Snippet 最常见的失败不是语法错,而是补全排序太靠后、Tab 不触发、Emmet 在 JSX 中不展开。 先把这组设置放进 User Settings,今天的练习会顺很多。

{
  "editor.tabCompletion": "on",
  "editor.snippetSuggestions": "top",
  "emmet.triggerExpansionOnTab": true,
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  }
}

1. React 函数组件骨架

适合放进 typescriptreact.json。输入 rfcx 后展开,光标先填组件名,再填 props 类型,最后停在 return 内。

{
  "React function component with props": {
    "prefix": "rfcx",
    "body": [
      "type ${1:ComponentName}Props = {",
      "  ${2:// props}",
      "};",
      "",
      "export function ${1:ComponentName}(props: ${1:ComponentName}Props) {",
      "  return (",
      "    <${3:div}>",
      "      $0",
      "    </${3:div}>",
      "  );",
      "}"
    ],
    "description": "React function component with typed props"
  }
}

2. 包裹选中文本的 try/catch

先选中一段代码,再触发 tryx。如果没有选区,默认会在 try 块里留一个光标。

{
  "Wrap selection in try catch": {
    "prefix": "tryx",
    "body": [
      "try {",
      "  ${TM_SELECTED_TEXT:${1:// code}}",
      "} catch (${2:error}) {",
      "  console.error(${2:error});",
      "  $0",
      "}"
    ],
    "description": "Wrap selected code in try/catch"
  }
}

3. 团队 API 错误返回

适合放进 .vscode/team.code-snippets。用 choice 限定错误码,让团队返回结构保持一致。

{
  "API error response": {
    "scope": "typescript,javascript,typescriptreact,javascriptreact",
    "prefix": "apierr",
    "body": [
      "return {",
      "  code: \"${1|BAD_REQUEST,UNAUTHORIZED,FORBIDDEN,NOT_FOUND,INTERNAL_ERROR|}\",",
      "  message: \"${2:message}\",",
      "  requestId: ${3:requestId},",
      "};$0"
    ],
    "description": "Standard API error response"
  }
}

Emmet 的强大在于它能描述结构关系。你不是背 div 的补全,而是在写一个极短的 DOM/CSS 草图。 下面这些模式足够覆盖大多数日常页面。

Lab 1 — 创建第一个 User Snippet

目标:在 TSX 文件中输入 rfcx,生成一个带 props 类型的 React 函数组件。

1. 打开命令面板 ⌘⇧P(Win: Ctrl Shift P)
2. 输入并选择 Snippets: Configure User Snippets
3. 选择 typescriptreact.json
4. 粘贴上面「React function component with props」snippet
5. 新建 Demo.tsx,输入 rfcx,按 Tab
6. 连续按 Tab 观察光标如何在组件名、props、标签名、正文之间跳转

Lab 2 — 把团队约定放进项目

目标:创建项目级 snippet,让这个仓库的其他人也能用。

1. 在练习项目中创建目录 .vscode
2. 创建文件 .vscode/team.code-snippets
3. 粘贴「API error response」snippet
4. 打开任意 .ts 文件,输入 apierr 并展开
5. 在 choice 位置选择不同错误码,感受枚举模板带来的规范性
6. 把这个文件提交到 Git,这就是团队共享的编辑器能力

Lab 3 — Emmet 生成一个设置页骨架

目标:不用手敲标签,用一个 abbreviation 生成页面结构。

main.settings>(header.page-head>h1{Settings}+p{Manage account preferences})+(section.panel>h2{Profile}+form>label*3>span{Field $}+input[name=field$])

1. 新建 settings.html 或 Settings.tsx
2. 输入上面的 Emmet 缩写
3. 按 Tab 或执行 Emmet: Expand Abbreviation
4. 观察 >、+、*、$、{} 分别生成了什么
5. 改写它:把 3 个字段改成 5 个,把 input 改成 textarea

1. Snippet 的 prefix、body、description、scope 分别负责什么?
2. $1、${1:default}、${1|a,b,c|}、$0 的区别是什么?
3. 什么类型的模板应该放进 .vscode/*.code-snippets 并提交到 Git?
4. Emmet 中 >、+、*、$、{} 分别表示什么?
5. 当 Tab 不展开 snippet 或 Emmet 时,你会按什么顺序排查?