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

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

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

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

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

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "const ${1:${TM_DIRECTORY/^.+\\/(.*)$/$1/}}: React.FC = () => {",
      "  return (",
      "    <div>$1</div>",
      "  );",
      "};",
      "",
      "export default $1;"
    ],
    "description": "Create a React functional component with folder name"
  }
}

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

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