VS Code 代码片段：让你的编码效率提升 10 倍-平芜编程栈

什么是代码片段？

代码片段（Snippets）是可以让你通过简短的缩写快速插入常用代码模板的功能。

比如输入cf然后按 Tab 键，就能自动生成：

const | = () => { | }

光标会停在竖线位置，让你直接输入函数名和函数体，不用手敲每个字符。

为什么有用？

节省时间：不用重复输入相同的代码结构
减少错误：模板化的代码不容易写错
统一风格：团队成员可以共享 snippets，保持代码风格一致
提高专注度：把精力放在逻辑上，而不是语法细节

如何创建代码片段？

1. 打开 snippets 配置

按Ctrl+Shift+P，输入Preferences: Configure User Snippets，选择对应语言（比如 JavaScript）。

2. 编辑 JSON 文件

打开后会看到类似javascript.json的文件，格式如下：

{ "cf": { "prefix": "cf", "body": [ "const $1 = () => {", "\t$2", "}" ], "description": "箭头函数" } }

3. 字段说明

prefix：触发快捷词
body：代码模板内容（数组形式，每行一个元素）
description：描述（在 IntelliSense 菜单中显示）
scope（可选）：指定生效的语言范围

实用例子

1. Console.log

"log": { "prefix": "log", "body": "console.log('$1:', $1);", "description": "Console log" }

使用：输入log→ 按 Tab → 输入变量名

2. Vue 组件模板

"vue3": { "prefix": "vue3", "body": [ "<template>", "\t<div>", "\t\t$1", "\t</div>", "</template>", "", "<script setup>", "import { ref } from 'vue'", "", "$2", "</script>", "", "<style scoped>", "$3", "</style>" ], "description": "Vue 3 组件模板" }

3. Try-Catch

"try": { "prefix": "try", "body": [ "try {", "\t$1", "} catch (error) {", "\tconsole.error(error);", "\t$2", "}" ], "description": "Try-Catch 块" }

4. React useEffect

"ue": { "prefix": "ue", "body": [ "useEffect(() => {", "\t$1", "}, [$2])" ], "description": "useEffect" }

进阶技巧

1. 占位符（Tab Stops）

$1,$2,$3表示按 Tab 后光标的跳转顺序：

"cl": { "prefix": "cl", "body": "console.log($1);", "description": "Console log 变量" }

2. 默认值

${1:defaultValue}可以设置占位符的默认值：

"fn": { "prefix": "fn", "body": [ "function ${1:name}(${2:params}) {", "\t$3", "}" ], "description": "函数声明" }

3. 选择列表

${1|选项1,选项2,选项3|}可以创建下拉选择：

"console": { "prefix": "c", "body": "${1|console.log,console.warn,console.error|}($2);", "description": "Console 方法" }

4. 变量

Snippets 支持内置变量：

"header": { "prefix": "header", "body": [ "/**", " * @author ${TM_USERNAME}", " * @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}", " * @description $1", " */" ], "description": "文件头注释" }

常用变量：

TM_FILENAME：当前文件名
TM_DIRECTORY：当前目录
CURRENT_YEAR/CURRENT_MONTH/CURRENT_DATE：当前日期
CLIPBOARD：剪贴板内容

团队协作

方法 1：项目级 snippets

在项目根目录创建.vscode/snippets.code-snippets：

{ "api": { "prefix": "api", "body": [ "import request from '@/utils/request'", "", "export const ${1:apiName} = (${2:params}) => {", "\treturn request({", "\t\turl: '/api/$3',", "\t\tmethod: '$4',", "\t\t$2", "\t})", "}" ], "description": "API 请求模板" } }