vscode 自定义代码片段

Fri Jun 16 2023 · 5min

command +shift+ p 然后输入snippet image.png 选择 配置用户snippetsimage.png 详细的language id 可以查看这里

举例

假如我们想拓展jsx的功能，我们可以分别在javascriptreact和 typescriptreact（分别代表.jsx .tsx）里进行配置 比如想快速生成<div classname={styles.xxx}></div>的片段 我们可以这样写

{
  "jsx classnames emmet": {
    "prefix": "styles.",
    "body": [
      "<div className={styles.$1}>$2</div>"
    ]
  }
}

如果是自定义的全局文件则可以通过scope控制

{
  "jsx classnames emmet": {
    "prefix": "styles.",
    "body": [
      "<div className={styles.$1}>$2</div>"
    ],
    "scope":"javascriptreact,typescriptreact"
  }
}

效果如下 屏幕录制2022-10-21 22.57.35.gif

cd ..