【vscode 小技巧】代码片段的使用

为啥要使用 vscode 代码片段？解决了什么问题？

• 1、公共代码的拷贝麻烦，逐个敲太浪费时间，而且拷贝的页面还带有业务逻辑，删除繁琐。
• 2、每个人编写习惯的差异，保持某个模块代码初始化的统一性；不易跑偏。
• 3、我们在完成组件的封装后，对组件的使用是固定的模式的情况下，可考虑升级成代码片段。
• 4、建议每个项目都单独配置一下代码片段。
• 5、可以考虑编写vscode Snippets 插件。

使用流程

准备需要快速生成的代码模版

interface ComponentProps {
  key: string;
  [key: string]: any;
}

const Component: React.FC<ComponentProps> = ({}) => {
  return <>HelloWorld</>;
};

Component.displayName = 'HelloWorld';

export default Component;

在线snippet creater，复制到左侧区域，输入触发片段的快捷代码

将生成的右侧代码复制

vscode设置 => 配置用户代码片段 => 当前项目（或者全局）=> 当前项目根目录 .vscode/comp.code-snippets => 保存

// .vscode/comp.code-snippets
{
  "react": {
    "prefix": "comp",
    "body": [
      "interface ComponentProps {",
      "  key: string;",
      "  [key: string]: any;",
      "}",
      "",
      "const Component: React.FC<ComponentProps> = ({}) => {",
      "  return <>HelloWorld</>;",
      "};",
      "",
      "Component.displayName = 'HelloWorld$0';",
      "",
      "export default Component;",
      ""
    ],
    "description": "组件"
  }
}

在 vscode 编译器输入 comp，即可触发