在 React 项目中，经常需要创建一个组件、页面。这个时候，我们可以使用代码片段来快速生成一个默认的模板。

通常情况下，我们需要创建一个组件，需要创建一个文件夹，然后在文件夹中创建一个 index.tsx 文件，然后在 index.tsx 文件中写入组件的代码。而定义在 index.tsx 中的组件名称通常情况下为文件夹的名称。但是 vscdoe 并没有提供一个变量用于获取当前文件夹的名称，而是只有当前文件夹的路径，因此需要使用正则匹配得到当前文件夹的名称。

这个时候，我们可以使用代码片段来快速生成一个默认的模板。

首先，需要创建一个新的用户代码片段，打开 VSCode 的命令面板（cmd + shift + p），输入 “Preferences: Configure User Snippets”，然后选择 “New Global Snippets file…”。

如果你使用了 typescript 则直接替换成如下代码：

1
{
2
  "React Functional Component": {
3
    "prefix": "rfc",
4
    "body": [
5
      "const ${1:${TM_DIRECTORY/^.+\\/(.*)$/$1/}}: React.FC = () => {",
6
      "  return (",
7
      "    <div>$1</div>",
8
      "  );",
9
      "};",
10
      "",
11
      "export default $1;"
12
    ],
13
    "description": "Create a React functional component with folder name"
14
  }
15
}

如果你使用的是 javascript 则删除 body 中第一行的 : React.FC 即可。

使用时只需要输入 rfc 然后按下 tab 键即可生成一个默认的模板。