🚀掌握 VSCode Snippets，解锁极速编码体验

晓得迷路了
798 阅读8分钟

在日常的前端开发中，我们都会经常使用到一些语法或者 API，比如数组的 for 循环、React 中的 useState 等等。

在开发排期爆满的情况下，在键盘上重复地敲写这些代码会让人狂躁，当然你也使用复制粘贴大法，但想要真正提升效率，你需要更强大的武器： VSCode Snippets！

学会在 VSCode 中使用代码片段和自定义个人代码片段，让你每天多一些喝水和摸鱼🐟时间。

什么是 VSCode Snippets？

简单来说，VSCode Snippets 就是可以让你快速插入预设代码片段的工具。只需输入简单的缩写，就能自动生成完整的代码片段，省去重复敲击键盘的烦恼。

snippets-demo1

注意：在输入内容时 VSCode 可能会弹出代码提示，直接按 Tab 键会接受代码提示内容，而不是跳转到下一个光标位置。此时，你可以先按 ESC 键关闭代码提示，然后再使用 Tab 键切换光标位置。

VSCode 内置的代码片段

VSCode 本身内置了许多语言的片段，例如 JavaScript、TypeScript、PHP 等等。

你可以在命令面板（Ctrl + Shift + P）上输入 Insert Snippet 查看当前文件类型下有哪些代码片段，包括内置、自定义和插件的代码片段。

snippets-demo2

以下是一些个人常用的代码片段：

// clg - 打印控制台 log
console.log()

// forof - 数组循环
for (const element of object) {
  
}

// trycatch - 异常捕获
try {
  
} catch (error) {
  
}

// settimeout - 定时执行
setTimeout(() => {
  
}, timeout);

安装代码片段插件

VSCode 的插件市场中有很多代码片段的插件，搜索 snippets 就可以看到相关插件，按需下载一些热门的插件。

image-20250222104830862

以 Simple React Snippets 为例，可以看到这个插件提供了很多代码片段。

image-20250222104857847

这么多的代码片段，你可能一下子记不住对应的缩写，不过对于那些常用的可以多翻翻他的文档，使用几次就自然记下来了。

snippets-demo3

自定义代码片段

掌握了 VSCode Snippets 的基本用法后，是时候进阶到自定义代码片段了。

为什么要自定义代码片段？

  • 插件无法满足你的需求：现有的代码片段插件可能没有你需要的特定代码结构。
  • 默认缩写不符合你的习惯：例如，rsf 生成 useState 可能不如 rus（React Use State）直观易记。

所以掌握自定义代码片段是有必要的。

打开代码片段配置文件

  1. 打开命令面板：使用快捷键 Ctrl + Shift + P 打开命令面板。
  2. 搜索并选择“Preferences: Configure User Snippets”（也可以直接搜索关键字“Snippets”）。
  3. 选择你要为其创建代码片段的编程语言，例如 JavaScript、TypeScript 等，选中后 VSCode 就打开了代码片段的 JSON 配置文件。
snippets-demo4

代码片段作用域

VSCode 代码片段提供了三种作用域，让你能够灵活控制代码片段的生效范围：

  • 语言作用域：代码片段只在特定的编程语言下生效。
  • 项目作用域：代码片段只在当前项目工程下生效，代码片段文件会保存在项目根目录下的 .vscode 文件夹中，文件格式为 xxx.code-snippets。
  • 全局作用域：代码片段在全局范围内生效，对所有项目和文件类型都有效。

image-20250222110549195

代码片段语法

代码片段配置文件采用 JSON 格式，我们以 mlog 为例，先讲解下每个字段的含义：

"Print to console": {
  "scope": "javascript,html",
  "prefix": "mlog",
  "body": [
    "console.log('$1');",
    "$2"
  ],
  "description": "Log output to console"
}
  • JSON key 值 Print to console 是代码片段的名称，用于标识代码片段的名称，方便查找和管理。
  • scope 代表作用域，仅在项目或全局配置文件中可指定，多种语言使用 , 分隔。
  • prefix 触发代码片段的缩写，也可以支持数组，多个缩写都可以触发该代码片段。
  • body 是代码片段内容，值是个数组或字符串，数组下每个值都占一行，$1 和 $2 是光标占位符，当代码片段补全时，光标会自动定位在 $1 处，使用键盘 Tab 键切换到下个占位符处 $2。
  • description 为代码片段的描述，方便理解和使用。
snippets-demo5

代码片段中最重要就是 body 的编写，body 支持以下语法：

占位符

在代码片段中，$ 加数字的形式代表占位符，例如 $0、$1、$2 等等。它们的作用是标记光标位置，并在代码片段插入后引导用户输入相应的内容。

占位符的奥秘：

  • $0 代表光标的最终位置，当代码片段插入后，光标会自动定位到 $0 处，方便用户继续编写代码。
  • 如果代码片段中出现多个相同的占位符（例如两个 $1），在键盘输入时，这些占位符的内容会同步更新。
"Practice Snippets": {
  "prefix": "ps",
  "body": [
    "console.log('$1', '$1', '$2');",
    "$0"
  ],
  "description": "Practice! Practice! Practice!"
}

snippets-demo6

占位符默认值

VSCode 代码片段支持为占位符设置默认值，默认值可以是文本或者一组选项。

  1. 设置默认值：
  • 语法： ${1:default}，其中 1 是占位符编号，default 是默认值。
  • 示例：
"Practice Snippets": {
  "prefix": "ps",
  "body": [
    "console.log('${1:JavaScript}');"
  ],
  "description": "Practice! Practice! Practice!"
}
  • 效果：插入代码片段后，${1:JavaScript} 会被替换为 JavaScript，用户可以直接使用默认值，也可以修改为其他内容。
  1. 提供选项列表
  • 语法：${1|option1,option2,option3|}，其中 1 是占位符编号，option1, option2, option3 是可供选择的选项。
  • 示例：
"Practice Snippets": {
  "prefix": "ps",
  "body": [
    "console.log('${1|JavaScript,CSS,HTML|}');"
  ],
  "description": "Practice! Practice! Practice!"
}
  • 效果：插入代码片段后，会弹出一个选项列表，用户可以选择 JavaScript、CSS 或 HTML，也可以直接输入其他内容。
snippets-demo7

变量

VSCode 代码片段也提供了变量功能，允许你在代码片段中动态插入各种信息，例如当前年份、文件名、选中文本等。

变量使用 $ 符号加变量名表示，常用变量如下：

  • $CURRENT_YEAR: 当前年份，例如 2023。
  • $CURRENT_MONTH: 当前月份，例如 10。
  • $CURRENT_DATE: 当前日期，例如 26。
  • $TM_FILENAME: 当前文件名，例如 index.js。
  • $TM_SELECTED_TEXT: 当前选中的文本。
  • $BLOCK_COMMENT_START: 块注释开始符号，例如 /*。
  • $BLOCK_COMMENT_END: 块注释结束符号，例如 */。
"Practice Snippets": {
  "prefix": "ps",
  "body": "$BLOCK_COMMENT_START Hello $CURRENT_YEAR $TM_FILENAME $BLOCK_COMMENT_END",
  "description": "Practice! Practice! Practice!"
}
snippets-demo8

其他更多变量见文档：code.visualstudio.com/docs/editor…

变量格式化

VSCode 代码片段不仅支持变量和占位符，还提供了强大的格式化功能，允许你在插入变量或占位符内容之前，对其进行各种形式的修改，例如大小写转换、驼峰命名等。

格式化定义由三部分组成，使用 / 分隔：

  • 正则表达式：用于匹配需要格式化的内容。
  • 格式字符串：用于格式化用户输入的内容，可以引用正则表达式中的匹配组。
  • 正则表达式选项：例如 g（全局匹配）、i（忽略大小写）等，可不传。

以下代码片段会替换文件名中的 . 为 _。

"Practice Snippets": {
  "prefix": "ps",
  "body": "${TM_FILENAME/[\\.]/_/}",
  "description": "Practice! Practice! Practice!"
}
snippets-demo9

除了变量，占位符的内容当然也可以格式化。

"Practice Snippets": {
  "prefix": "ps",
  "body": "转化: ${1/[\\.]/_/}",
  "description": "Practice! Practice! Practice!"
}
snippets-demo10

除了常规文本替换，VSCode 还支持一些常规的格式化能力：

  • /upcase: 转大写
  • /downcase: 转小写
  • /capitalize: 首字母大写
  • /camelcase: 小驼峰
  • /pascalcase: 大驼峰

使用语法如 ${1:/capitalize}，需要配合正则表达式中的匹配组使用，匹配组和内置格式化项用冒号 : 连接。

"Practice Snippets": {
  "prefix": "ps",
  "body": "首字段大写: ${1/(.*)/${1:/capitalize}/}",
  "description": "Practice! Practice! Practice!"
}

上面例子的 body 相对会复杂些了，不过配合上述讲解的语法，还是可以看懂的。

  • 整体结构为占位符 ${1} 加上格式化的三段 /(.*)/${1:/capitalize}/。
  • 格式化的第一段将匹配所有值为一个分组。
  • 第二段使用分组 $1 加上内置的格式化能力 /capitalize，两者使用冒号连接。
  • 最后一段没添加正则选项，保持为空。

所以这段的效果是：输入的内容首字母大写。

snippets-demo11

格式字符串还可以支持条件判断，这边简单举个例子，更多可以查看官方文档。

"Practice Snippets": {
  "prefix": "ps",
  "body": "IF: ${1/(.*)/${1:+return} ${1}/};",
  "description": "Pratice! Pratice! Pratice!"
}

重点关注 ${1:+return}，:+ 代表 if，如果 $1 有值，就会返回 return 字符串。

至此你已经学会了代码片段的核心语法，可以开始创建属于自己的高效代码片段库了。

实例分析

接下来我们分析下上面 Simple React Snippets 插件 useState 代码片段：

"Declare a new state variable using State Hook": {
    "prefix": "usf",
    "body": ["const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState($2);"],
    "description": "Declare a new state Variable using the State Hook. Hit Tab to apply CamelCase to function"
 }

主要来看 body 的内容，其中占位符解析如下：

  • ${1}: 第一个占位符，用于定义状态变量的名称。
  • ${1/(.\*)/${1:/capitalize}/}: 第二个占位符，与第一个占位符同步更新，并对状态变量名称进行格式化，将其首字母大写，用于定义 set 函数的名称。
  • $2: 第三个占位符，用于定义状态变量的初始值。

第二个占位符中的首字母大写格式化上节已介绍。

代码片段效果：用户输入 usf 并按下 Tab 键，然后输入 count 作为状态变量名称，并按下 Tab 键，最后输入 0 作为初始值，代码片段将生成以下代码：

const [count, setCount] = useState(0);
snippets-demo12

为了缩写好记，你可以复制这段代码，把 prefix 改成 rus（React Use State）。

最后留个实例，各位可以自己分析下，其中 \t 就是 Tab 符，一个 \t 就相当于按了一次 Tab 键，$CLIPBOARD 是个变量，值为你当前复制的内容。

"Practice Snippets": {
  "prefix": "ps",
  "body": [
    "axios('$CLIPBOARD')",
    "\t.then(res => {",
    "\t\t$1",
    "\t})",
    "\t.catch(err => {",
    "\t\t$2",
    "\t})"
  ],
  "description": "Practice! Practice! Practice!"
}

你可以试下复制一下接口 url 后，再使用上面的代码片段。

为代码片段设置快捷键

除了使用缩写触发代码片段外，VSCode 还允许你为代码片段设置快捷键，实现一键触发，进一步提升编码效率。

  1. 设置步骤：
    1. 打开命令面板：使用快捷键 Ctrl + Shift + P。
    2. 搜索并选择“Preferences: Open Keyboard Shortcuts (JSON)”，可以输入关键字“Shortcuts”。
    3. 在配置文件中添加以下代码：
{
  "key": "ctrl+shift+q", // 自定义快捷键
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "javascriptreact", // 代码片段语言
    "name": "Practice Snippets" // 代码片段名称
  }
}
  1. 参数说明：
  • key: 自定义快捷键，例如 ctrl+shift+q。
  • command: 固定为 editor.action.insertSnippet，表示插入代码片段。
  • when: 触发条件，例如 editorTextFocus 表示在编辑器获得焦点时触发。
  • args: 代码片段参数：
    • langId: 代码片段语言，例如 javascriptreact。
    • name: 代码片段名称，例如前面示例中的 Practice Snippets。

最后效果就是按下 ctrl+shift+q 即可快速插入该代码片段。

VSCode Emmet

除了 VSCode 代码片段，还有一个编码利器 VSCode Emmet，两者的特点和不同如下：

特性VSCode EmmetVSCode Snippets
主要用途快速生成 HTML 和 CSS 代码快速生成各种编程语言的代码片段
语法简洁的缩写语法自定义代码片段
内置支持是是
自定义能力有限强大
适用场景HTML 和 CSS 开发各种编程语言开发

总结

VSCode Snippets 支持多种编程语言，允许用户创建自定义代码片段，通过变量、占位符和格式化等功能，灵活生成常用代码片段，减少重复编码，是前端开发的效率利器。

最后，你可以根据个人或团队的编码习惯，结合社区已有的插件，打造专属的代码片段合集，提升日常开发效率。

avatar
文章
阅读
粉丝