💡 如何在 Visual Studio Code 中轻松使用代码片段？

codeCola_js
109 阅读4分钟

如何在 Visual Studio Code 中使用代码片段

什么是代码片段？

代码片段是一小段可能会反复编写的代码，通过存入代码片段之后，可以快速重复生成这段代码。

为什么要使用代码片段？

使用代码片段可以提高工作效率，让你将更多时间投入到代码设计上，而不是反复编写相同的代码。此外，它还能减少鼠标移动的次数，让你更专注于编程任务。

如何在 Visual Studio Code 中使用代码片段？

  1. 在 Visual Studio Code 中，右键新建一个名为 ".vscode" 的文件夹。
  2. 在 ".vscode" 文件夹中创建一个以你的代码片段名命名的文件，并使用 ".code-snippets" 作为后缀，例如 my-snippet.code-snippets。
  3. 在该文件中编写你的代码片段。

可以利用下面这个网站轻松生成代码片段

代码片段生成器

编写你的第一个代码片段

我们以 React 的代码片段为例：

{
  "在文档中插入 useEffect": {
    "prefix": "useEffect",
    "body": [
        "useEffect(() => {",
        "${2}",
        "}, [${1}]);${0}"
    ],
    "description" : "插入 useEffect"
 }
}

在这个代码片段中：

  • $1 表示第一个占位符。
  • $2 表示第二个占位符。
  • $3 表示第三个占位符。
  • 你还可以继续使用 $4, $5, 等等，来表示后续的占位符。

在编辑器中使用这个代码片段时，你可以通过按下Tab键或其他指定的键来依次跳转到这些占位符，然后输入你需要的内容。当你完成输入后，继续按Tab键通常会将光标移到下一个占位符位置或代码块的结尾，以便你继续编辑或完成代码。

这个设计让你在插入代码后，无需移动鼠标，通过按Tab键等方式轻松导航到关键的编辑位置。而 $0 表示插入代码后光标的最终位置，因此，如果你已经完成了对 $1 的编辑，按下Tab键将光标移到 $0 的位置，使你可以方便地继续编辑代码的其余部分或将光标移出代码块。

这种灵活的设计使得代码片段可以适用于不同的代码插入场景，提高了编码效率。

演示动画

通过使用这种方式，你可以在编写React代码时更加高效地利用代码片段，无需频繁移动光标，提高了编码效率。

在代码片段中写入默认值

可是使用占位符在代码片段中写入默认值

占位符 占位符是有默认值的 tab stops。他们一般被大括号包裹着，就像 1:default。占位符的内容是默认被选中的，所以你可以很容易的修改它。占位符支持嵌套，像这样{1:default} 。占位符的内容是默认被选中的，所以你可以很容易的修改它。占位符支持嵌套，像这样 {1:first ${2:second}}。

{
  "在文档中插入 useEffect": {
    "prefix": "useEffect",
    "body": [
        "useEffect(() => {",
        "${2}",
        "}, [${1: 请在这里写入你的依赖项}]);${0}"
    ],
    "description" : "插入 useEffect"
 },
}

默认值

同时选中代码片段中的多个部分

使用镜像占位符

{
    "For 循环": {
        "prefix": "for",
        "body": [
            "for (let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index}++) {",
            "\tconst ${3:element} = ${2:array}[${1:index}];",
            "\t$0",
            "}"
        ]
    }
}

forloop

下拉框选项

在预设位置使用下拉框选项

{
    "插入 true or false": {
        "prefix": "if",
        "body": [
            "if (${1|true,false|}) {",
            "\t${2: // Code to run if true}",
            "} else {",
            "\t${3: // Code to run if false}",
            "}$0"
        ]
    }
}

if

插入变量

工作区变量名描述
TM_SELECTED_TEXT当前选中的文字或空字符串
TM_CURRENT_LINE当前行的文字
TM_CURRENT_WORD光标下的单词或空字符串
TM_LINE_INDEX以0为第一行的当前行序号
TM_LINE_NUMBER以1为第一行的当前行序号
TM_FILENAME当前文档的文件名
TM_FILENAME_BASE当前文档的文件名，不带扩展名
TM_DIRECTORY当前文档所在的文件夹
TM_FILEPATH当前文件的绝对路径
CLIPBOARD当前剪贴板的内容
WORKSPACE_NAME当前打开的工作区或文件夹的名字
时间变量名描述
CURRENT_YEAR当前年份
CURRENT_YEAR_SHORT当前年份的缩写，即最后两位数字
CURRENT_MONTH当前月份，两位数字表示 (例如 '07')
CURRENT_MONTH_NAME当前月份名字 (例如 'July')
CURRENT_MONTH_NAME_SHORT当前月份名字缩写 (例如 'Jul')
CURRENT_DATE当前月份中的日期
CURRENT_DAY_NAME当前日期的名字 (例如 'Monday')
CURRENT_DAY_NAME_SHORT当前日期的名字缩写 (例如 'Mon')
CURRENT_HOUR当前的时间（小时），以24小时制展示
CURRENT_MINUTE当前分钟数
CURRENT_SECOND当前秒数
CURRENT_SECONDS_UNIX从UNIX起的秒数（时间戳）
注释变量名描述
BLOCK_COMMENT_START块注释的起始字符串（例如，在HTML中为 <!--）
BLOCK_COMMENT_END块注释的结束字符串（例如，在HTML中为 -->）
LINE_COMMENT行注释的字符串（例如，在JavaScript中为 //）

配置 settings.json

最后，建议在 .vscode/settings.json 配置一下信息，体验更好噢

"editor.quickSuggestions": {
    "other": true,       // 启用快速建议，用于除了注释和字符串之外的其他代码。
    "comments": true,    // 启用在注释中的快速建议。
    "strings": true      // 启用在字符串中的快速建议。
},

"editor.snippetSuggestions": "top",        // 将代码片段建议放置在快速建议的顶部，以便更容易访问。
"editor.tabCompletion": "onlySnippets"     // 仅在输入时使用代码片段作为选项来完成代码，而不包括其他自动完成项。
avatar
文章
阅读
粉丝