VSCode 代码片段 #154

Anuluca     Date : 2024-08-22   Tags : 2

在 Visual Studio Code (VSCode) 中，自定义代码片段可以帮助你快速插入常用的代码模板，从而提高开发效率。以下是如何创建和管理自定义代码片段的步骤。

创建自定义代码片段

1. 打开代码片段管理器：

   在 VSCode 中，按下 Ctrl + Shift + P (Windows/Linux) 或 Cmd + Shift + P (Mac) 打开命令面板，然后输入并选择 Preferences: Configure User Snippets。

2. 选择语言或全局代码片段：

   在选择语言时，VSCode 会展示支持的编程语言列表。你可以选择一种编程语言来创建针对该语言的代码片段，或者选择 New Global Snippets file... 来创建全局代码片段（适用于所有文件类型）。

3. 定义代码片段：

   选择或创建一个代码片段文件后，你会看到一个 JSON 格式的文件。在这个文件中，你可以添加自定义的代码片段。每个代码片段都是一个独立的 JSON 对象，结构如下：

   1 2 3 4 5 6 7 8 9 10

   { "Snippet Name": { "prefix": "trigger", "body": [ "line 1", "line 2" ], "description": "This is a description for the snippet" } }

   • Snippet Name：代码片段的名称，用于识别和管理代码片段。
   • prefix：触发代码片段的前缀。当你输入这个前缀并按下 Tab 键时，VSCode 会自动展开为完整的代码片段。
   • body：代码片段的主体内容。可以是多行的字符串数组，每一行代表代码的一行。
   • description：对代码片段的简短描述，便于理解代码片段的用途。

代码片段示例

以下是一些常见的自定义代码片段示例：

1. JavaScript 函数模板

1
2
3
4
5
6
7
8
9
10
11

{
  "Function Template": {
    "prefix": "myfunc",
    "body": [
      "function ${1:functionName}(${2:params}) {",
      "  ${3:// body}",
      "}"
    ],
    "description": "Creates a JavaScript function template"
  }
}

• 当你在 JavaScript 文件中输入 myfunc 并按下 Tab 键时，会自动生成一个函数模板，光标会停留在 functionName，按 Tab 后光标会跳到 params，再按一次 Tab 跳到函数体部分。

2. Vue 单文件组件模板

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

{
  "Vue Component": {
    "prefix": "vuecomp",
    "body": [
      "<template>",
      "  <div>",
      "    ${1:<!-- Content here -->}",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '${2:ComponentName}',",
      "  data() {",
      "    return {",
      "      ${3:/* data */}",
      "    };",
      "  },",
      "  methods: {",
      "    ${4:/* methods */}",
      "  }",
      "};",
      "</script>",
      "",
      "<style scoped>",
      "</style>"
    ],
    "description": "Vue.js single file component template"
  }
}

• 输入 vuecomp 并按下 Tab 键，VSCode 会生成一个完整的 Vue 组件模板，光标会依次停留在组件名称、data 和 methods 部分。

3. CSS Flexbox 容器模板

1
2
3
4
5
6
7
8
9
10
11
12

{
  "Flexbox Container": {
    "prefix": "flex",
    "body": [
      "display: flex;",
      "justify-content: ${1:flex-start};",
      "align-items: ${2:stretch};",
      "flex-direction: ${3:row};"
    ],
    "description": "CSS Flexbox container"
  }
}

• 当你输入 flex 并按下 Tab 键时，会自动生成一个 Flexbox 容器的基础模板。

使用代码片段

当你在 VSCode 编辑器中编写代码时，输入代码片段的 prefix 并按下 Tab 键，VSCode 会自动将该前缀展开为完整的代码片段。如果代码片段中包含占位符（如 ${1}），按下 Tab 键后，光标会依次跳转到每个占位符位置。

总结

自定义代码片段是 VSCode 中一个非常强大的功能，特别适合编写重复性代码或常用的代码模板。通过合理利用代码片段，你可以大幅提高开发效率，减少手工输入和错误。