vscode 使用技巧

之前笔者写过几篇关于vscode的文章 鱼和熊掌:VSCode+Vim ， VSCode 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" ]
    }