VS Code Snippets

1. 打开代码片段编辑器：

   • 按下 Cmd + Shift + P，这将打开命令面板。
   • 输入 snippets，然后选择 Preferences: Configure User Snippets。

2. 选择语言类型：

   • 选择 typescript，打开 typescript.json 文件，编辑。该文件会对所有 *.ts 生效
   • 选择 typescriptreact，打开 typescriptreact.json 文件，编辑。该文件会对所有 *.tsx 生效

3. 添加代码片段：

   • 在 typescript.json 或 typescriptreact.json文件中，添加代码片段。

     {
       "snippets-x-style": {
          "prefix": "snippets-x-style",
          "body": [
            "import { mergeToken } from '@ant-design/cssinjs-utils';",
            "import { genStyleHooks } from '../../theme/genStyleUtils';",
            "import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/cssinjs-utils';",
            "",
            "export interface ComponentToken {}",
            "",
            "export interface $1Token extends FullToken<'$1'> {}",
            "",
            "const gen$1Style: GenerateStyle<$1Token> = (token) => {",
            "",
            "\tconst { componentCls } = token;",
            "",
            "\treturn { [componentCls]: { } }",
            "}",
            "",
            "export const prepareComponentToken: GetDefaultToken<'$1'> = () => ({});",
            "",
            "export default genStyleHooks(",
            "\t'$1',",
            "\t(token) => {",
            "\t\tconst compToken = mergeToken<$1Token>(token, {});",
            "\t\treturn gen$1Style(compToken);",
            "\t},",
            "\tprepareComponentToken,",
            ");"
          ],
          "description": "x style template"
        },
     }

4. 打开 TS 文件，插入片段，输入组件名称：

光标会选中多个需要重复输入的节点，直接输入即可。