简介

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

  • 如何装备代码片段
  • 编写一个 VS Code 插件的办法
  • 创立一个用于提示代码片段的 VS Code 插件
  • 打包和发布 VS Code 插件

干货

一、装备代码片段

请参阅官方教程。

装备步骤总结

  1. 打开：文件 => 首选项 => 装备用户代码片段，如下图所示：

    从0到1开发一个vscode的代码片段提示插件
    2. 挑选对应言语的代码片段装备，例如.js代表 JavaScript，.vue代表 Vue，如下图所示：
    从0到1开发一个vscode的代码片段提示插件

  2. 添加代码片段，如下图所示

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

具体装备规则请检查官方文档

官方文档截图

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

示例代码片段：

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

  1. 保存装备并重启后生效，如下图所示：

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

二、编写一个 VS Code 插件

请参阅官方教程。

编写步骤总结：

  1. 装置 Yeoman：Yeoman 是一个代码生成器东西，用于创立项目和代码结构。你需求先大局装置 Yeoman 才干运用它的指令行界面。

    运转以下指令大局装置 Yeoman：

    npm install -g yo

  2. 装置 VS Code 插件生成器：VS Code 供给了一个 Yeoman 生成器，用于创立新的插件项目。你需求装置这个生成器才干运用 yo code 指令。

    运转以下指令装置 VS Code 插件生成器：

    npm install -g generator-code

  3. 确保已装置 Node.js 和 npm：Yeoman 和 VS Code 插件生成器都依赖于 Node.js 和 npm。请确保已正确装置，而且能够在指令行中运转 node 和 npm 指令。

    运转以下指令检查 Node.js 和 npm 的版别：

    node --version
npm --version

  4. 运用 yo code 指令创立项目，并挑选相应的项目类型，如下图所示

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

创立的项目类型详解

  • 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 中渲染和展现笔记本文件

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

  1. 在创立 VS Code 插件项目时，挑选 “New Code Snippets”

  2. 依据需求填写初始装备，如下图所示

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

问题详解

    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? (你的插件的描绘是什么？) 这个问题是要你为你的插件供给一个简略的描绘。描绘一般用于在插件商场和编辑器中展现，协助用户了解插件的功能和用途。

  1. 创立成功后的目录结构如下图：

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

  2. 依据上文说到的代码片段装备语法，在 snippets.code-snippets 文件中装备对应的代码片段，如下图所示

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

  3. 按下 F5 打开调试窗口，挑选一个文件夹，创立一个对应言语的代码片段文件，输入前缀并挑选相应的片段，即可显现提示。例如，我创立了一个 JavaScript 文件片段，效果如下图所示：

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

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

  1. 装置 @vscode/vsce：
npm install -g @vscode/vsce

  1. 在项目根目录下执行 npx vsce package，生成一个 .vsix 文件，即插件的装置包，如下图所示

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

  2. 注册一个 Visual Studio Code Marketplace 的发布者账号。假如还没有账号，能够在 VS Code Marketplace 的网站上注册一个。

  3. 登录到 Visual Studio Code Marketplace 的网站，并创立一个新的插件发布。填写插件的相关信息，如称号、描绘、版别号等。上传之前生成的 .vsix 文件作为插件的装置包。

  4. 提交插件发布申请后，VS Code Marketplace 的团队将对插件进行审阅。审阅通过后，插件将会被发布到商场上供用户下载和运用。

  5. 更新和维护插件时，只需修正插件项目中的代码和资源文件，然后从头打包并提交更新即可。

总结

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

课后思考

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