VSCode代码片段“定义即生效，触发即插入”，无需重启；用户级JS片段存于javascript.json，作用于所有JS文件；失效主因是语言模式错误、prefix非法或JSON格式问题。
vscode 的代码片段（snippets）不是“写完再用”，而是“定义即生效，触发即插入”——只要路径正确、语法合规、前缀匹配，ctrl+space 或直接输入触发词后回车就能插入，无需重启编辑器。
如何创建并启用一个用户级 JavaScript 片段
用户级片段作用于所有 JS 文件，优先级低于工作区级但高于内置片段。关键在文件位置和 scope 设置：
- 打开命令面板（
Ctrl+Shift+P），执行Preferences: Configure User Snippets - 选择
javascript.json（不是javascriptreact.json，后者仅对.jsx有效） - 在生成的 JSON 中添加新片段，注意
"scope"字段可省略（默认已由文件名隐式指定） - 保存后立即生效，无需重启 VSCode
{
"log with timestamp": {
"prefix": "logt",
"body": [
"console.log('%c[${new Date().toLocaleTimeString()}] $1', 'color: #007acc');"
],
"description": "Insert timestamped console.log"
}
}
为什么输入 prefix 后没出现提示？常见失效原因
片段不弹出，90% 是触发上下文或语法问题：
- 当前文件未被识别为对应语言（检查右下角语言模式是否为
JavaScript，不是Plain Text） -
prefix包含非法字符（只支持字母、数字、短横线-、下划线_；log-t可以，log.t不行） - 片段定义在
javascript.json，但当前是.ts文件（TypeScript 需单独配typescript.json） - JSON 格式错误（多逗号、缺引号、括号不闭合），VSCode 不报错但会静默忽略整个文件
如何在 React 组件中插入带 props 解构的函数组件模板
React 函数组件常用结构（如解构 props、返回 JSX）需适配 javascriptreact.json，且要处理变量占位与缩进：
-
prefix设为rfc，和官方 Prettier/ESLint 不冲突 - 用
$1、$2控制光标停靠位置，${1:props}提供默认值 - 每行开头加空格实现缩进，VSCode 会自动对齐到当前行首（不必用
\t） - JSX 中的双花括号需转义为
{{和}}，否则被当作变量占位符解析
{
"React Function Component": {
"prefix": "rfc",
"body": [
"const $1 = ({ ${1:props} }) => {",
" return (",
" <div>",
" $0",
" </div>",
" );",
"};",
"",
"export default $1;"
],
"description": "Create a React function component with props destructuring"
}
}
工作区级片段与用户级的区别及使用时机
工作区级片段（放在项目根目录 .vscode/snippets/ 下）只在该文件夹打开时生效，适合团队统一规范或项目特有逻辑：
- 路径必须是
.vscode/snippets/javascript.json（不能叫my-snippets.json） - 同名
prefix时，工作区级覆盖用户级（不是合并） - 若项目用 TypeScript + Vue，建议配
typescript.json和vue.json分开管理，避免混用导致意外插入 - Git 提交时可把
.vscode/snippets/加入版本控制，但别提交settings.json里个人偏好
真正麻烦的不是写 JSON，而是搞清「当前文件到底算哪种语言」——VSCode 的语言标识（language ID）和文件扩展名不是一一对应的，比如 .tsx 对应 typescriptreact，而 .js 在某些工作区可能被识别为 javascriptreact。验证方式：按 Ctrl+Shift+P → 输入 Developer: Inspect Editor Tokens and Scopes，看顶部显示的 Language ID 是什么。
