vscode如何预置代码-猿码集

1. 什么是预置代码？

预置代码是在使用VS Code时，将常用的代码片段预先定义好，在需要使用的时候通过命令快速插入。

VS Code中的预置代码片段又称为Snippet，它可以帮助开发人员节省时间，提高编码效率，避免错误的出现。

2. 创建自定义预置代码

2.1 确认Snippets目录位置

在VS Code中，预设代码片段是保存在语言配置文件中的。通过Shift+Ctrl+P/Shift+Cmd+P快捷键打开命令面板，选择“Configure User Snippets”来确认各语言的配置文件位置。一般情况下，该文件应为一个JSON格式的文件。

{
    "javascript": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    },
    ...
}

相应地，对于每种编程语言都会有一个对应的配置文件，例如：在JavaScript项目中预设代码就储存在`javascript.json`配置文件中。

2.2 编辑预设代码片段

我们以JavaScript语言为例，来创建一个简单的预设代码片段。

在“Configure User Snippets”面板中选择JavaScript。VS Code会提示你创建新片段或编辑现有的片段。

我们选择为JavaScript创建新的片段。接下来，我们需要设置代码片段的前缀（prefix）、正文内容（body）和描述信息（description）。

下面是一个制作用于输出console.log的代码片段的示例：

{
    "version": 1.0.0,
    " snippets": [
        {
            "prefix": "clc",
            "body": [
             "console.log('${1:message}');",
             "$2"
            ],
            "description": "console.log message"
        }
    ]
}

创建好之后，即可在对应的文件中使用该代码片段的前缀快速插入。

3. 使用内置预置代码

VS Code提供了许多内置的代码片段，我们可以找到这些片段并直接使用。VS Code默认包含了很多语言的预设代码片段，如HTML、CSS、JavaScript等。

在编辑器中，输入前缀例如“for”时，如果我们启用了内置代码片段功能，该功能将会自动提醒我们有以“for”为前缀的代码片段，我们可以直接选择想要使用的片段，并且该代码片段还具有参数提示的功能。

我们以JavaScript语言为例，输入“for”时，下面就自动出现以下选择：

4. 自定义预置代码排版技巧

我们自定义的代码片段，不仅仅是一个代码块，它还涵盖了排版才能，使其更加清晰易读，还需要注意以下几个技巧：

4.1 使用换行符

实际编写代码的时候，我们也需要为了可读性多留出一些空白。同样，我们也可以在自定义代码片段时嵌入换行符来提高可读性。

{
    "version": 1.0.0,
    " snippets": [
        {
            "prefix": "mld",
            "body": [
                "const obj = {",
                "  key1: '${1:value1}',",
                "  key2: '${2:value2}',",
                "  key3: ${3:true}",
                "};",
                "$0"
            ],
            "description": "multiline definition"
        }
    ]
}

4.2 使用变量

我们可以在代码片段中添加变量来提高可重用性。在代码片段中使用双大括号并设置一个默认值，通过按Tab键或使用鼠标光标可以轻松地在默认值之间切换。当同时使用多个变量时，Tab键可以按顺序跳转。

{
    "version": 1.0.0,
    " snippets": [
        {
            "prefix": "fd",
            "body": [
                "function $1(${2:args}) {",
                "  ${3:// body}",
                "}",
            ],
            "description": "function definition"
        }
    ]
}

4.3 在代码片段中嵌入动态值

使用代码片段时，我们希望快速拿到常用代码框架。同时，也希望能够方便地使用动态值。使用VS Code的动态值也非常简单，它可以在代码片段的内容中插入可调用JavaScript函数或代码表达式。

例如，我们可以使用动态值生成一个具有每日日期的代码段：

{
    "version": 1.0.0,
    " snippets": [
        {
            "prefix": "date",
            "body": [
                "const date = new Date();",
                "console.log(\"Today's date is ${date.toLocaleDateString()}!\");",
            ],
            "description": "Use today's date"
        }
    ]
}

5. 快捷键

在编辑器中，如果我们记得自定义的快捷代码片段的前缀，可以直接在代码编辑区中输入该前缀的命令触发快捷键并使用对应的代码片段。此时直接按下“Tab”键就可以自动填写必需的变量。

另外，使用“Ctrl/Cmd + Shift + P”打开“命令面板”，输入“Insert Snippet”命令，同样可以打开当前配置分组中包含的所有片段。

最后，如果我们想要查看当前打开的编辑器支持哪些代码片段，可以在编辑器中输入“Ctrl/Cmd + Shift + P”，并输入“Syntax Snippets”命令。这将会拆分当前语法中能够使用的所有代码片段，并列出可用的代码片段。

6. 总结

在VS Code中，我们可以通过自定义代码片段来快速插入常用的代码块。代码片段不仅可以加快我们编写代码的速度，而且还可以帮助我们避免代码中的错误。同时，通过VS Code的快捷键，我们可以快速访问和使用自定义代码片段。

vscode如何预置代码