vscode 的代码片段功能可通过设置一次实现快速插入常用代码结构。首先进入 “文件” > “首选项” > “代码片段”，可选择新建全局或特定语言的片段文件；接着编写 json 格式的代码片段，定义 prefix（触发词）、body（生成的代码）、description（描述）；然后根据使用场景如组件开发、样式模板、快捷注释等创建对应片段；最后建议集中管理片段、使用易记前缀、多用 tab 位提高效率，并依靠 vscode 的语法提示和错误检查完善片段。
你是不是也经常在 VSCode 里重复敲一些代码结构，比如函数、循环、组件模板？其实 VSCode 提供了非常实用的“代码片段（Snippets）”功能，可以帮你快速插入常用代码块，提高编码效率。只要设置一次，之后就能随时调用，特别适合写项目中经常用到的结构。
如何打开 VSCode 的代码片段设置
要自定义代码片段，首先得找到设置入口。在 VSCode 中，可以通过菜单栏的 “文件” > “首选项” > “代码片段”（或者在 Mac 上是 “Code” > “Preferences” > “Snippets”）来管理代码片段。
点击后会看到一个列表，可以选择“新建全局代码片段文件”或者为特定语言创建。比如你想为 JavaScript 创建片段，就选择 JavaScript；如果想通用，可以选全局。
怎么写一个代码片段
代码片段本质上是一个 JSON 文件，结构清晰，写法也不复杂。下面是一个简单的例子，用来快速生成一个 JavaScript 函数：
ECTouch是上海商创网络科技有限公司推出的一套基于 PHP 和 MySQL 数据库构建的开源且易于使用的移动商城网店系统！应用于各种服务器平台的高效、快速和易于管理的网店解决方案，采用稳定的MVC框架开发，完美对接ecshop系统与模板堂众多模板，为中小企业提供最佳的移动电商解决方案。ECTouch程序源代码完全无加密。安装时只需将已集成的文件夹放进指定位置，通过浏览器访问一键安装，无需对已有
{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log to console"
}
}-
prefix是你输入的触发词，比如输入log然后按 Tab 就会生成代码。 -
body是生成的代码内容，支持多行。 -
$1、$2是光标停留的位置，按 Tab 可以依次跳转。 -
description是提示信息，方便识别这个片段的作用。
你可以复制上面的结构，修改成你常用的内容，比如 React 组件、HTML 模板、CSS 样式等。
常见使用场景和建议
-
组件开发：如果你用 React 或 Vue，可以把组件模板做成片段，比如输入
rfc生成一个函数组件。 - 样式模板：CSS 或 SCSS 中常用的一些样式结构也可以做成片段，减少重复输入。
-
快捷注释：比如写一个“TODO”标记，输入
todo就能快速生成带格式的注释。
一些实用建议：
- 把常用的片段集中管理，不要分散在多个文件里。
- 用简单易记的前缀，比如
func表示函数，loop表示循环。 - 多用 Tab 位（$1、$2）提高编辑效率。
不用担心写错，VSCode 有提示
刚开始写代码片段时可能会格式不对，不过 VSCode 自带语法提示，输入时会自动补全结构。你也可以在保存时检查 JSON 格式是否正确。如果写错了，保存时会提示错误，方便及时修改。
基本上就这些。设置一次，以后写代码就能快不少。
