0. 前言

本篇博客介绍如何开发一个 VSCOde 插件提供常用的代码片段（Snippets）。

示例代码仓库：https://github.com/wangjs-jacky/jacky-snippets (opens new window)

VSCode 插件市场：jacky-snippets (opens new window)

1.开发 snippets 片段

由于 code-snippets 功能相对来说比较简单，可以先不创建标准的 VSCode 插件工程。

1. 直接在本地的 .vscode 文件夹创建 .code-snippets 结尾的文件。

   上述步骤也可以替换为，按下 F1 打开命令行，输入 snippets 关键字.

   

   选择 local 作用范围。

   

2. 打开这个网站 snippet-generator.app/ (opens new window) 可以快速创建一段模板代码。

   将模板代码黏贴到左侧，拷贝右侧的代码至上一步生成的 .code-snippets 文件中。

   

   其中，prefix 是触发词字段，description 为说明字段。

3. 限定这段 snippets 生效的范围

   在 package.json 中配置 snippets 属性

   "snippets": [
         {
           "language": "javascript",
           "path": "./snippets/snippets.json"
         },
         {
           "language": "javascriptreact",
           "path": "./snippets/snippets.json"
         },
         {
           "language": "typescript",
           "path": "./snippets/snippets.json"
         },
         {
           "language": "typescriptreact",
           "path": "./snippets/snippets.json"
         }
       ]
   

   language 的值如何确定？

   可以直接 ctrl+n 创建一个新文件，然后点击 Select a language ，语言可选键值参考括号内的英文。

   

4. 调试

   根据设置的 prefix 值即可触发语法提示，如下：

   

2.制作插件

code-snippets 除了可以直接在 local 工程中生效外，还可以制作为 vscode 插件，发布到应用市场，分享给他人使用。

code-snippets 开发如下：

1. 使用 VSCode 官方提供的代码片段模板工程。

   • 安装依赖

   npm install -g yo generator-code
   

   说明：yo 是第三方脚手架工具，VSCode 官方维护的是 generator-code 这个包，yo 启动时会自动去全局搜索 generator-* 名称开头的包。

   • 创建模板代码

   yo code
   

   • 选择 New Code Snippets

   

   • 输入 package.json 有关的一些基本信息，即可创建项目成功。

2. 创建代码片段

   比如说将 fse 库的代码示例制作成 snippets

   ├── scripts
   │   └── mergeJson.js
   ├── snippets
   │   └── fse
   │       ├── fse-copy.code-snippets
   │       ├── fse-empty.code-snippets
   │       ├── fse-ensureDir.code-snippets
   │       ├── fse-ensureFile.code-snippets
   │       ├── fse-ensureLink.code-snippets
   │       ├── fse-ensureSymlink.code-snippets
   │       ├── fse-import.code-snippets
   │       ├── fse-move.code-snippets
   │       ├── fse-outputFile.code-snippets
   │       ├── fse-outputJson.code-snippets
   │       ├── fse-pathExists.code-snippets
   │       ├── fse-readJson.code-snippets
   │       ├── fse-remove.code-snippets
   │       └── fse-writeJson.code-snippets
   

3. 由于在 package.json 只允许设置一个 path

   "contributes": {
     "snippets": [
       {
         "language": "javascript",
         "path": "./dist/fse.code-snippets"
       }
     ]
   },
   

4. 封装 json 合并脚本，详见 (opens new window)

   npm run build:json
   

5. 打包本地文件

   vsce package
   

插件的发布另起一篇博客记录。

3. 备注

插件的开发，具体可详见：VSCode 插件官网-Snippets in Visual Studio Code (opens new window)

除了简单的特性外，还有几个特性是 snippets 开发中用的比较多的：

1. tabSotp 特性：插入模板后，支持使用 tab 移动光标的位置

   语法为：$1、$2

2. placeholder 特性：默认值

   语法为：${1: foo} 、${1:another ${2:placeholder}}

3. choice 特性：支持选择

   语法为：${1| one,tow,three |} ，使用 | xxxx | 包裹可选项

4. variables 特性：内置变量。

   举例来说，比如有一段语法片段，需要根据不同 language 设置不同的值，如

   {
     "hello": {
       "scope": "javascript,html",
       "prefix": "hello",
       "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
     }
   }
   

   在 js 文件中插入文本为 /* Hello World */，在 HTML 文件中插入文本为 <!-- Hello World -->

参考

1. 狂奔的小马的文章 (opens new window)