VSCode怎么新建代码块_VSCode创建自定义代码片段和快速插入教程

星夢妙者

发布时间：2025-08-25 13:24:02

756人浏览过

来源于php中文网

原创

答案：VSCode中通过“用户代码片段”配置自定义代码块，选择语言创建JSON文件，定义prefix、body和description，实现快速插入代码；使用tab stops、占位符、预定义变量提升智能化；团队可通过工作区代码片段文件（.vscode目录下.code-snippets）共享统一规范，提升协作效率与代码一致性。

vscode怎么新建代码块_vscode创建自定义代码片段和快速插入教程

VSCode中新建代码块，也就是自定义代码片段，核心操作是打开VSCode的“用户代码片段”配置界面，选择或创建对应语言的JSON文件，然后按照特定格式定义你的代码片段，通过设置

prefix

（前缀）来快速触发。这能显著提升编码效率，减少重复劳动。

解决方案

在VSCode里创建自定义代码片段，其实远没有听起来那么复杂。我们通常会通过“用户代码片段”功能来完成。

首先，打开VSCode，通过菜单栏

文件 (File)

首选项 (Preferences)

配置用户代码片段 (Configure User Snippets)

。这时，VSCode会弹出一个选择框，让你选择是为全局用户创建代码片段，还是为某个特定语言创建。我个人习惯是为特定语言创建，比如JavaScript、TypeScript或者Vue，这样管理起来更清晰，也不会在不相关的语言里看到一堆无用的提示。

选择一个语言（比如

javascript.json

），如果文件不存在，VSCode会自动创建一个空的JSON文件。这个文件就是我们定义代码片段的地方。

一个基本的代码片段结构是这样的：

{
    "Console Log": {
        "prefix": "clog",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    },
    "Function Declaration": {
        "prefix": "func",
        "body": [
            "function $1($2) {",
            "\t$3",
            "}"
        ],
        "description": "A basic function declaration"
    }
}

这里面，每个顶层键（比如

"Console Log"

）代表一个代码片段的名称，它在VSCode的命令面板里可能会显示。

```
prefix
```
：这是最关键的，你在编辑器里输入这个前缀，VSCode就会提示你这个代码片段。
```
body
```
：一个字符串数组，数组的每一项代表代码片段的一行。
```
$1
```
,
```
$2
```
这样的叫做制表符停止点（tab stops），当你插入代码片段后，光标会依次跳转到这些位置，方便你输入内容。
```
${1:placeholder}
```
这种则带有默认占位符。
```
description
```
：对这个代码片段的简短描述，会在VSCode的提示框里显示。

保存这个

.json

文件后，你就可以在对应的语言文件里，输入你设置的

prefix

，比如

clog

，然后按下

Tab

或

Enter

，代码片段就会自动插入了。这感觉就像是拥有了一台私人定制的打字机，高效得让人上瘾。

为什么自定义代码片段能大幅提升开发效率？它真的值得投入时间学习吗？

我个人觉得，自定义代码片段简直是解放双手、提升开发幸福感的利器，它绝对值得你投入一点点时间去学习和配置。为什么这么说呢？

首先，想想我们每天在写代码时，有多少次在重复敲着相似的结构？比如在JavaScript里写

console.log()

，或者在React里写一个函数组件的骨架。这些都是重复劳动，不仅耗费时间，更容易因为手误而引入一些低级错误。有了代码片段，你只需要敲几个字母，一个完整的、结构正确的代码块就出来了，这大大减少了机械性输入。

其次，它能确保代码风格的一致性。尤其是在团队协作中，每个人都有自己的编码习惯，但通过共享的代码片段，我们可以强制或者说引导大家使用统一的代码结构和命名规范。这对于代码的可读性和维护性来说，是极其重要的。你不会再看到五花八门的函数声明方式，所有人都遵循同一个“模板”。

再者，它降低了认知负担。当你在实现一个复杂功能时，大脑应该专注于业务逻辑，而不是如何拼写

useEffect

或者

useState

。代码片段把这些“体力活”自动化了，让你的思维可以更流畅地在高级抽象层面运作，减少了那种“上下文切换”的开销。从长远来看，这点时间投入的回报率非常高，因为它减少了大量的重复性工作，让你有更多精力去解决真正有挑战性的问题。对于我来说，一旦习惯了，没有代码片段就感觉像是在用石器时代的方式编程。

除了基本的代码结构，自定义代码片段还能玩出什么花样？（变量、占位符和多光标）

自定义代码片段的魅力远不止于插入静态文本，它内置了许多高级功能，能让你的代码块变得更加智能和动态。

最常用的就是我们前面提到的制表符停止点（Tab Stops），用

$1

$2

$3

等表示。当代码片段插入后，光标会首先停在

$1

的位置，按下

Tab

键，光标会跳到

$2

，再按

Tab

跳到

$3

，以此类推。这对于需要填写多个参数或者函数体内容的场景非常实用。例如，一个

for

循环的片段，你可以让光标依次停在初始化变量、条件、增量以及循环体内部。

更进一步，你可以使用占位符（Placeholders），格式是

${1:defaultValue}

。这不仅提供了制表符停止点，还为该位置提供了一个默认值。如果不需要修改，直接按

Tab

跳过即可；如果需要修改，直接输入就会覆盖默认值。比如，一个函数参数的片段，你可以给它一个默认值

arg

，方便快速修改成

event

或

data

。

文希AI写作

AI论文写作平台

下载

"Function with Placeholder": {
    "prefix": "fnp",
    "body": [
        "function ${1:myFunction}(${2:param1}, ${3:param2}) {",
        "\t$0", // $0 是最终光标停留的位置
        "}"
    ],
    "description": "Function declaration with placeholder parameters"
}

此外，VSCode还支持一系列预定义变量，这些变量在代码片段插入时会自动替换为当前上下文的值。例如：

```
$TM_FILENAME
```
：当前文件的名称。
```
$TM_DIRECTORY
```
：当前文件所在目录的路径。

$CURRENT_YEAR

$CURRENT_MONTH

$CURRENT_DATE

：当前的日期和时间信息。

```
$CLIPBOARD
```
：剪贴板中的内容。
```
$BLOCK_COMMENT_START
```
,
```
$BLOCK_COMMENT_END
```
：当前语言的块注释符号。

这些变量的加入，让代码片段的动态性大大增强。比如，你可以创建一个文件头注释的片段，自动包含文件名、作者和创建日期。

"File Header": {
    "prefix": "fhead",
    "body": [
        "/**",
        " * @file        $TM_FILENAME",
        " * @description $1",
        " * @author      Your Name",
        " * @date        $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
        " */",
        "$2"
    ],
    "description": "Adds a standard file header"
}

最后，多光标功能虽然不是代码片段独有，但与代码片段结合使用时，能产生奇妙的效果。你可以通过在

body

中使用相同的制表符停止点，来模拟多光标的效果。比如，在

$1

位置输入内容时，所有

$1

的地方都会同步更新。这对于需要同时修改多个相似变量名或字符串的场景非常有用。虽然这在JSON里不是直接的“多光标”，但它通过制表符停止点的同步更新，达到了类似的目的。

这些高级特性，让代码片段不再是简单的文本替换，而是一个可以与你的编码习惯深度融合的智能工具。

如果我的团队需要共享一套代码片段，VSCode有办法实现吗？（团队协作与管理）

当然有办法！在团队协作中，统一的代码片段不仅能提升效率，更能确保代码风格和结构的一致性，减少“千人千面”的问题。VSCode提供了“工作区代码片段”的功能，完美解决了这个问题。

除了我们前面提到的“用户代码片段”（User Snippets），它存储在你的用户配置目录下，只对你个人有效。VSCode还支持工作区代码片段（Workspace Snippets）。

要创建一个工作区代码片段，你可以在

文件 (File)

首选项 (Preferences)

配置用户代码片段 (Configure User Snippets)

时，选择“新建全局代码片段文件”下面的“新建工作区代码片段文件”。或者更直接地，在你的项目根目录下创建一个

.vscode

文件夹（如果还没有的话），然后在里面新建一个

.code-snippets

扩展名的文件，比如

my-project.code-snippets

。

这个文件的内容格式和用户代码片段完全一样，都是JSON格式，里面定义了你的代码片段。

// .vscode/my-project.code-snippets
{
    "React Component Basic": {
        "prefix": "rcomp",
        "body": [
            "import React from 'react';",
            "",
            "const ${1:ComponentName} = (${2:props}) => {",
            "\treturn (",
            "\t\t",
            "\t\t\t$3",
            "\t\t",
            "\t);",
            "};",
            "",
            "export default ${1:ComponentName};"
        ],
        "description": "Basic React Functional Component"
    }
}

关键在于，这个