简介

本文将帮助你学习以下知识点：

如何配置代码片段
编写一个 VS Code 插件的方法
创建一个用于提示代码片段的 VS Code 插件
打包和发布 VS Code 插件

干货

一、配置代码片段

请参考官方教程。

配置步骤总结

打开：文件 => 首选项 => 配置用户代码片段，如下图所示： 2. 选择对应语言的代码片段配置，例如.js代表 JavaScript，.vue代表 Vue，如下图所示：
添加代码片段，如下图所示

具体配置规则请查看官方文档

官方文档截图

示例代码片段：

js 复制代码

{
    "vue component": {
      "prefix": "jzvtc",
      "body": [
        "<template>",
        "  <div>",
        "    $1",
        "  </div>",
        "</template>",
        "",
        "<script setup>",
        "</script>",
        "",
        "<style scoped lang='scss'>",
        "$5",
        "</style>"
      ],
      "description": "Vue component template"
    }
}

保存配置并重启后生效，如下图所示：

二、编写一个 VS Code 插件

请参考官方教程。

编写步骤总结：

安装 Yeoman：Yeoman 是一个代码生成器工具，用于创建项目和代码结构。你需要先全局安装 Yeoman 才能使用它的命令行界面。

运行以下命令全局安装 Yeoman：
```
npm install -g yo
```
安装 VS Code 插件生成器：VS Code 提供了一个 Yeoman 生成器，用于创建新的插件项目。你需要安装这个生成器才能使用 yo code 命令。

运行以下命令安装 VS Code 插件生成器：
css 复制代码
```
npm install -g generator-code
```
确保已安装 Node.js 和 npm：Yeoman 和 VS Code 插件生成器都依赖于 Node.js 和 npm。请确保已正确安装，并且可以在命令行中运行 node 和 npm 命令。

运行以下命令检查 Node.js 和 npm 的版本：
css 复制代码
```
node --version
npm --version
```
使用 yo code 命令创建项目，并选择相应的项目类型，如下图所示

创建的项目类型详解

New Extension (TypeScript): 创建一个新的 VS Code 插件项目，使用 TypeScript 编写。
New Extension (JavaScript): 创建一个新的 VS Code 插件项目，使用 JavaScript 编写。
New Color Theme: 创建一个新的 VS Code 颜色主题，用于自定义编辑器的外观和配色方案。
**New Language Support: **创建一个新的语言支持插件，用于在 VS Code 中提供特定语言的语法高亮、代码补全等功能。
New Code Snippets: 创建一个新的代码片段插件，用于快速插入常用代码块或模板。
New Keymap: 创建一个新的按键映射插件，用于自定义编辑器的快捷键设置。
New Extension Pack: 创建一个新的扩展包，用于打包多个相关的插件，方便一次性安装和管理。
New Language Pack (Localization): 创建一个新的语言包插件，用于将 VS Code 本地化为其他语言。
New Web Extension (TypeScript): 创建一个新的 Web 扩展项目，使用 TypeScript 编写，可以在浏览器中运行。
New Notebook Renderer (TypeScript): 创建一个新的笔记本渲染器插件，使用 TypeScript 编写，用于在 VS Code 中渲染和展示笔记本文件

三、创建一个代码片段提示插件

在创建 VS Code 插件项目时，选择 "New Code Snippets"
根据需求填写初始配置，如下图所示

问题详解

1. Folder name for import or none for new: (用于导入的文件夹名称，或者选择 "none" 创建新的) 这个问题是要你指定一个文件夹名称，用于导入已有的代码片段文件。如果你不需要导入现有的代码片段文件，可以选择 "none" 来创建一个新的代码片段。
1. What's the name of your extension? (你的插件的名称是什么？) 这个问题是要你为你的插件指定一个名称。这个名称将在插件的安装、显示和管理过程中使用。
1. What's the identifier of your extension? (你的插件的标识符是什么？) 这个问题是要你为你的插件指定一个唯一的标识符。标识符通常是一个由小写字母和连字符组成的字符串，用于在插件市场和配置文件中标识你的插件。
1. What's the description of your extension? (你的插件的描述是什么？) 这个问题是要你为你的插件提供一个简短的描述。描述通常用于在插件市场和编辑器中展示，帮助用户了解插件的功能和用途。

创建成功后的目录结构如下图：
根据上文提到的代码片段配置语法，在 snippets.code-snippets 文件中配置对应的代码片段，如下图所示
按下 F5 打开调试窗口，选择一个文件夹，创建一个对应语言的代码片段文件，输入前缀并选择相应的片段，即可显示提示。例如，我创建了一个 JavaScript 文件片段，效果如下图所示：

四、打包和发布一个 VS Code 插件

安装 @vscode/vsce：

bash 复制代码

npm install -g @vscode/vsce

在项目根目录下执行 npx vsce package，生成一个 .vsix 文件，即插件的安装包，如下图所示
注册一个 Visual Studio Code Marketplace 的发布者账号。如果还没有账号，可以在 VS Code Marketplace 的网站上注册一个。
登录到 Visual Studio Code Marketplace 的网站，并创建一个新的插件发布。填写插件的相关信息，如名称、描述、版本号等。上传之前生成的 .vsix 文件作为插件的安装包。
提交插件发布申请后，VS Code Marketplace 的团队将对插件进行审核。审核通过后，插件将会被发布到市场上供用户下载和使用。
更新和维护插件时，只需修改插件项目中的代码和资源文件，然后重新打包并提交更新即可。

总结

开发 VS Code 代码提示插件的过程实际上是生成一个可执行文件，让 VS Code 加载后注入一段代码提示片段的 JSON 数据供 VS Code 程序执行。

课后思考

如何开发一个更高级的自定义代码片段提示插件？例如，像 Emmet 一样可以进行运算，输入 div * 5 就可以生成 5 个 div 元素。
如何加载多种语言模板的代码片段文件？例如，Vue、CSS、SCSS 等。

从0到1开发一个vscode的代码片段提示插件

简介

干货

一、配置代码片段

配置步骤总结

二、编写一个 VS Code 插件

编写步骤总结：

创建的项目类型详解

三、创建一个代码片段提示插件

问题详解

四、打包和发布一个 VS Code 插件

总结

课后思考