美文网首页
vscode 使用技巧

vscode 使用技巧

作者: KaiW | 来源:发表于2019-03-14 21:47 被阅读0次

之前笔者写过几篇关于vscode的文章 鱼和熊掌:VSCode+VimVSCode Vim进阶操作VSCode Vim进阶操作 没想到后来收到很多开发同仁的反馈。
今天我把最近vscode日常使用技巧分享出来,大部分是跟前端开发相关。

1. 编写scss


最近开始大量写前端页面,sass作为老牌的css预处理程序让css编写变得高效。 允许你使用 自定义变量, 嵌套,mixin 等众多功能, 并且完全兼容 CSS 语法。

vscode 对scss支持非常好,不光支持语法高亮,autocompletion 。通过Live Sass Compiler 这个插件可以watch scss文件动态生成css。

通过修改settings 来配置css输出规则。

 "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      // "extensionName": ".min.css",
      "savePath": "/css/"
    }
  ],

2. vim 编辑html


考虑到编写前端需要处理大量html,比如需要选中,复制,修改html标签相关的内容,普通的vim命令处理起来有些麻烦,这里介绍几个快捷命令:

  1. dit 删除标签内部的内容。
  2. cit 删除 标签内部的内容并切换到insert模式。
  3. yit 复制 标签内部的内容。
  4. vit 选中标签内部的内容。
  5. vat 选中标签以及内部的内容。

同理,如果要删除 修改 复制括号 () 引号内部的内容可以用i 模式。

di) yi) ci)
da) ya) ca) #通知删除 括号

3. vim 删除内容但不覆盖剪贴板


在编程的时候,通常我们需要把一段代码复制,然后删除一些内容后粘贴过去。
具体用vim 操作时候先通过 yy yw 等命令复制内容,然后需要 d 删除一些代码,此时原先复制的内容就会被覆盖掉。
好在vim当中有一个叫d 的命令, 代表black hole register, 搭配d 命令就可以删除内容但不覆盖剪贴板。

vscode 可以通过设置替换d 命令来实现这个功能。

{
        "before": ["d"],
        "after": [ "\"", "_", "d" ]
    }

相关文章

  • VSCode 使用技巧

    1. 修改当前行颜色: 1. go to file > Preferences > settings2. type...

  • vscode 使用技巧

    1、注释 单行注释:'ctrl + /’ 多行注释(块注释):'Alt+Shift+A’ 2、使用clg 可以快速...

  • VSCode使用技巧

    VSCode所有的快捷键,都可以进行自定义,只需要通过设置->键盘快捷键方式->搜索快捷键->双击键入自定义快捷方...

  • Vscode使用技巧

    1,npm run lint -- --fix 运行eslint检查代码错误

  • vscode使用技巧

    一、创建新建文件模板: 1.打开vscode,找到用户代码片段 2.在当前工作空间下创建代码片段,也可设置全局代码...

  • vscode 使用技巧

    之前笔者写过几篇关于vscode的文章 鱼和熊掌:VSCode+Vim , VSCode Vim进阶操作,VSC...

  • VSCode 使用技巧

    (一) 插件相关 通用插件 标签自动成对修改Auto Rename Tag 目标文件自动联想AutoFileNa...

  • vscode使用技巧

    1、选中中划线

  • vscode一些插件的使用方法

    关于vscode的使用技巧,可参考官网http://code.visualstudio.com/docs,user...

  • vscode使用小技巧

    新建,保存和预览文件 新建:在本地新建文件夹(目录),并将其拖至vscode中,再在vscode中对该目录新建相应...

网友评论

      本文标题:vscode 使用技巧

      本文链接:https://www.haomeiwen.com/subject/pdjhmqtx.html