在 Visual Studio Code (VS Code) 中，可以通过自定义**代码片段（Snippets）**快速插入常用代码模板。以下是详细设置步骤：
步骤 1：打开代码片段设置
-
按下快捷键
Ctrl + Shift + P（Windows/Linux）或Cmd + Shift + P（Mac）打开命令面板。 -
输入
Snippets，选择Preferences: Configure User Snippets。-
全局片段：选择
New Global Snippets File（适用于所有文件类型）。 -
语言特定片段：选择对应语言（如
Python、JavaScript等）。
-
步骤 2：编辑代码片段文件
选择语言或创建全局片段后，会打开一个 .json 文件。按照以下格式添加代码片段：
json
{
"Print to console": {
"prefix": "clog",
"body": [
"console.log('$1');",
"$2"
],
"description": "快速插入 console.log"
}
}
-
键名（如
"Print to console"）：代码片段名称，可自定义。 -
prefix：触发代码片段的快捷词（如输入clog后按Tab）。 -
body：插入的代码内容（每行一个字符串，支持多行）。 -
description：代码片段的描述（可选）。
步骤 3：高级功能
-
光标占位符：使用
$1,$2指定光标位置，按Tab跳转。json
"body": [ "function ${1:name}($2) {", " $3", "}" ] -
预设变量：使用
${变量名}或内置变量（如TM_FILENAME当前文件名）。json
"body": [ "// File: ${TM_FILENAME}", "console.log('${1:Hello World}');" ] -
多选项占位符：用
|分隔选项。json
"body": [ "${1|one,two,three|}" ]
步骤 4：保存并测试
-
保存
.json文件。 -
在代码文件中输入
prefix设置的快捷词（如clog），按Tab或Enter插入片段。
示例：Python 的 main 函数片段
json
{
"Python Main Function": {
"prefix": "main",
"body": [
"if __name__ == '__main__':",
" $1"
],
"description": "插入 Python 主函数入口"
}
}
注意事项
-
JSON 语法：确保逗号、引号正确，避免格式错误。
-
语言作用域：确认代码片段文件对应正确的语言（如
python.json仅对.py文件生效）。 -
冲突处理：若多个片段有相同
prefix，按Tab后会弹出选择列表。
通过以上步骤，你可以高效创建和管理常用代码片段，大幅提升编码速度！🚀
在 Visual Studio Code 中设置好代码片段后，可以通过以下方式快速使用它们：
基础使用方式
-
输入前缀触发
-
在代码文件中输入你定义的
prefix（快捷词，例如clog）。 -
按下
Tab或Enter，代码片段会自动插入。
-
-
光标跳转与编辑
-
代码片段中的
$1,$2表示光标停留的位置。按Tab键可依次跳转到下一个占位符，按Shift + Tab返回上一个。 -
直接编辑占位符内容，完成后按
Enter或继续编码。
-
高级用法示例
1. 多选项占位符
如果代码片段中设置了多选占位符（例如 ${1|one,two,three|}），输入后会弹出选项列表，用方向键选择后按 Enter 确认。
json
{
"React Component": {
"prefix": "rfc",
"body": [
"import React from 'react';",
"",
"export default function ${1|Button,Card,Header|}() {",
" return (",
" <div>$2</div>",
" );",
"}"
]
}
}
-
输入
rfc→ 按Tab→ 选择组件名（如Card）→ 按Tab跳转到<div>位置。
2. 变量占位符
使用内置变量（如 TM_FILENAME 当前文件名）或自定义变量：
json
{
"File Header": {
"prefix": "header",
"body": [
"// File: ${TM_FILENAME}",
"// Author: ${1:Your Name}",
"// Created: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
]
}
}
-
输入
header→ 按Tab→ 自动填充文件名和日期，并等待输入作者名。
使用技巧
-
手动触发建议列表
如果代码片段未自动弹出，按下Ctrl + Space（Windows/Linux）或Cmd + Space（Mac）手动唤出建议列表，选择对应的代码片段。 -
语言特定限制
-
确保代码片段文件作用于当前文件类型（例如
python.json仅在.py文件中生效）。 -
在非目标语言文件中，代码片段不会触发。
-
-
全局片段与局部片段
-
全局片段：适用于所有文件类型（需在命令面板中选择
New Global Snippets File）。 -
语言特定片段：仅对指定语言生效（如
javascript.json只对.js文件有效）。
-
常见问题
1. 代码片段未触发？
-
检查项：
-
确认
prefix输入正确（区分大小写）。 -
确保代码片段文件与当前文件类型匹配。
-
检查 JSON 文件是否有语法错误（如缺少逗号或引号）。
-
2. 如何快速查找已定义的片段？
-
按下
Ctrl + Shift + P→ 输入Insert Snippet→ 选择对应语言的片段库查看列表。
实战演示
假设你为 Python 定义了一个 for 循环片段：
json
{
"For Loop": {
"prefix": "forloop",
"body": [
"for ${1:i} in range(${2:10}):",
" $3"
]
}
}
-
使用步骤：
-
在
.py文件中输入forloop。 -
按
Tab→ 自动插入代码，光标停留在i处。 -
输入变量名（如
index）→ 按Tab→ 编辑范围（如5）→ 按Tab→ 在循环体内编写代码。
-
总结
-
核心操作：输入
prefix→Tab/Enter→ 编辑占位符 →Tab跳转。 -
高效技巧：
-
用
$0指定片段插入后的最终光标位置。 -
结合内置变量（如时间、文件名）实现动态内容。
-
使用多选项占位符减少重复输入。
-
通过熟练使用代码片段，你可以将编码效率提升数倍！ 🚀
操作示例
以.vue文件为例：
需求目标：新建一个.vue文件时，输入vts，通过代码片段生成以下代码：
<script setup lang="ts" name="">
</script>
<template></template>
<style scoped lang="scss"></style>并且光标定位在 name=""的双引号中间
设置操作记录
"vue3-ts-template": { //快捷输入的时候显示的提示
"prefix": "vts", //输入的前缀，就是输入这个会有提示
"body": [ //这个是一个字符串数组，就是会输出的内容，如果内容含有双引号，需要在双引号前面使用\进行转义
"<script setup lang=\"ts\" name=\"$1\">",
"$2",
"</script>",
"",
"<template></template>",
"",
"<style scoped lang=\"scss\"></style>",
]
}使用操作记录
输入vts，自动弹出代码片段提示，按回车确认
输入name，按Tab，光位定位到下一个占位，就是第2行开头位置
