VS Code：在创建新组件时生成样板代码

Question

我想知道是否有一种方法可以配置 VS Code 在创建新组件时生成 Typescript/React 样板代码。例如，当我创建一个名为 myComponent.tsx 的新组件时，我希望该文件预先填充

import * as React from "react";

export interface props {}

export const MyComponent: React.FC<props> = (): JSX.Element => (
  <div>
    {"MyComponent"}
  </div>
);

我找到了 this extension 但生成的样板与我想要的不匹配。

谢谢！

Answer 1

最简单的方法是创建自定义代码段：

按 F1
首选项：配置用户代码段
typescriptreact.json

{
  "boilerplate": {
    "prefix": "boilerplate",
    "body": [
      "import * as React from \"react\";",
      "",
      "export interface props {}",
      "",
      "export const $TM_FILENAME_BASE: React.FC<props> = (): JSX.Element => (",
      "\t<div>",
      "\t\t{\"$TM_FILENAME_BASE\"}",
      "\t</div>",
      ");"
    ]
  }
}

然后，在 .tsx 文件中，输入 boilerplate 会提示上面的代码，它会准确地写出您想要的代码。

VS Code：在创建新组件时生成样板代码

VS Code: Generate boilerplate code when creating a new component

boilerplate

typescript

reactjs

visual-studio-code