VSCode创建代码片段

开发 VS Code Snippet

了解 Snippet 文件格式

VS Code 的代码片段文件是 JSON 格式的。一个基本的代码片段文件结构如下：

1
2
3
4
5
6
7
8
9
10
{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}

“Print to console”：代码片段的名称，用于标识这个代码片段。
“prefix”：触发代码片段的前缀，当在编辑器中输入这个前缀并按下 Tab 键时，代码片段将被插入。
“body”：代码片段的主体内容，是一个字符串数组，每一个元素代表一行代码。$1、$2 等是占位符，用于指定光标位置和跳转顺序。
“description”：代码片段的描述信息，在触发代码片段时会显示。

创建 Snippet 文件

可以为不同的语言创建不同的代码片段文件，也可以将多个语言的代码片段放在同一个文件中。
全局代码片段：

  • 打开 VS Code，按下 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（Mac）打开命令面板。
  • 输入 Preferences: Configure User Snippets 并选择该命令。
  • 选择要创建代码片段的范围，例如 New Global Snippets file…，然后输入文件名（如 my-snippets.code-snippets）。
    特定语言代码片段：
  • 同样打开命令面板，输入 Preferences: Configure User Snippets。
  • 选择特定的语言，如 vue，VS Code 会自动打开该语言的代码片段文件。

编写自定义代码片段

假设你要为 Vue 项目创建一个 Element Plus 表单的代码片段，示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
    "Element Plus Form Snippet": {
        "prefix": "el-form-snippet",
        "body": [
            "<el-form :model=\"$1\" ref=\"formRef\" label-width=\"80px\">",
            "  <el-form-item label=\"$2\">",
            "    <el-input v-model=\"$1.$2\"></el-input>",
            "  </el-form-item>",
            "  <el-form-item>",
            "    <el-button type=\"primary\" @click=\"onSubmit\">提交</el-button>",
            "    <el-button @click=\"onReset\">重置</el-button>",
            "  </el-form-item>",
            "</el-form>",
            "<script setup>",
            "import { ref } from 'vue';",
            "const formRef = ref(null);",
            "const $1 = ref({",
            "  $2: '',",
            "});",
            "const onSubmit = () => {",
            "  // 提交表单逻辑",
            "};",
            "const onReset = () => {",
            "  formRef.value.resetFields();",
            "};",
            "</script>"
        ],
        "description": "Generate an Element Plus form in Vue"
    }
}

在这个示例中，输入 el-form-snippet 并按下 Tab 键，就会插入一个基本的 Element Plus 表单代码，同时还包含了 Vue 3 的组合式 API 代码。

部署 VS Code Snippet

本地部署

如果你只是为自己的开发环境创建代码片段，那么保存代码片段文件后，VS Code 会自动加载这些代码片段。你可以在相应的文件中输入代码片段的前缀，然后按下 Tab 键来测试代码片段是否正常工作。

发布到 VS Code 市场

如果你想将自己的代码片段分享给其他开发者，可以将其打包成 VS Code 扩展并发布到 VS Code 市场。具体步骤如下：
安装 Yeoman 和 VS Code 扩展生成器
在终端中运行以下命令：

1
npm install -g yo generator-code

创建扩展项目
在终端中进入你想要创建项目的目录，然后运行以下命令：

1
yo code

按照提示选择扩展类型（选择 New Code Snippets Extension），输入扩展名称、描述等信息。

将代码片段添加到扩展项目中

将之前编写的代码片段文件复制到扩展项目的 snippets 目录下。

配置 package.json

打开扩展项目的 package.json 文件，确保 contributes.snippets 字段正确配置，示例如下：

1
2
3
4
5
6
7
8
"contributes": {
    "snippets": [
        {
            "language": "vue",
            "path": "./snippets/my-snippets.code-snippets"
        }
    ]
}

打包扩展

在终端中运行以下命令打包扩展：

1
vsce package

这将生成一个 .vsix 文件。

发布扩展

首先，你需要在 VS Code 市场注册一个账号，并获取个人访问令牌。然后在终端中运行以下命令登录并发布扩展：

1
2
vsce login <publisher-name>
vsce publish

其中 是你在 VS Code 市场的发布者名称。
完成以上步骤后，你的代码片段扩展就会发布到 VS Code 市场，其他开发者可以在 VS Code 扩展商店中搜索并安装你的扩展。