vscode 自定义代码片段

1. 效果

图1 实例效果

2. 实现步骤

2.1. 打开 snippet 文件

按下 f1 然后输入 Snippets: Configure User Snippets
指定 snippet 生效的编程语言

snippets 储存在 ~/.config/Code/User/snippets/ 目录下

2.2. 编写 snippet

{
    "eslint diable next line": {
        "prefix": "eslint",
        "body": ["// eslint-disable-next-line$0"],
        "description": "eslint disable"
    },
}

如上 typescript.json

prefix 是触发代码片段补全的字符串
body 是补全后的文本
$0 表示补全完成后光标的结束位置
如果有 $1 $2 等，那么按 tab , 光标位置会依次跳入到对应的位置，最终定位到 $0

2.3. snippet 作用域

2.3.1. 应用于单个编程语言

上面文件命名为 typescript.json, 那么其仅在 typescript 中才会生效。

2.3.2. 应用于多个编程语言

如果，按下 f1 然后输入 Snippets: Configure User Snippets ，然后选择 New Global Snippets file 那么会生成 $name.code-snippets 文件，输入如下代码实例

{
    "eslint diable next line": {
        "scope": "javascript,typescript",
        "prefix": "eslint",
        "body": ["// eslint-disable-next-line$0"],
        "description": "eslint disable"
    },
}

其中，多了一个 scope 字段，它表示该代码片段可作用的语言

3. 参考文献

Create your own snippets