Visual Studio Code 功能性代码片段 React

Question

有人知道在Visual Studio中React函数组件片段的快捷方式是什么吗？ 我已经在编辑器中启用了ES7 React/Redux/GraphQL/React-Native片段扩展。

- Sergey Kirillov

Answer 1

如果您想在VS Code中创建React函数式组件代码段，请按照以下步骤进行操作：

1. 进入“文件-首选项-配置用户代码段”
2. 会出现下拉菜单。选择“新建全局代码段文件”，输入您想要的任何名称，然后按回车键
3. 文件应该创建为以下名称：<任何名称>.code-snippet
4. 粘贴此代码。您在“前缀”中键入的任何内容都将成为组件触发器

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from \"react\"",
      "",
      "const ${1:name} = (props) => {",
      "  return (",
      "    <div>",
      "      $2",
      "    </div>",
      "  )",
      "};",
      "",
      "export default ${1:name};",
      ""
    ],
    "description": "React Functional Component"
  }
}

5. 保存文件
6. 输入（在本例中）rfc，然后按回车键。

- Krzysztof Podmokły

Answer 2

我使用rafce模板来创建新的组件。

这将创建类似以下代码：

import React from 'react';

const MyComponent = () => {
    return (
        <div>
        
        </div>
    );
};

export default MyComponent;

- Sergey Kirillov

Answer 3

我找到了解决我的问题的方法（感谢Krzysztof Podmokły）。我想分享一些改进后的代码，特别是针对React组件（它填充文件名而不仅仅是名称，并且我删除了import React，因为它已经不再需要了）。

    {
      "React Functional Component": {
        "prefix": ["rfc"],
        "body": [
          "",
          "const $TM_FILENAME_BASE = () => {",
          "  return (",
          "    <div>",
          "      $2",
          "    </div>",
          "  )",
          "};",
          "",
          "export default $TM_FILENAME_BASE",
          ""
        ],
        "description": "React Functional Component"
      }
    }

- Niko

Answer 4

如果您想生成函数组件片段，请使用以下键：

函数组件 -> rnsf

常量组件 -> tsnf

VS Code

- Kabariya Kritesh

---

由于您当前的回答写得不清楚，请[编辑]以添加更多细节，以帮助其他人理解如何回答所提出的问题。您可以在帮助中心找到有关编写良好答案的更多信息。 - Community

Answer 5

sfc 用于 'Simple React Snippets' 扩展程序创建无状态函数组件。生成的模板为：

const ... = () => {
 return (  );
}

export default ...;

- Faouzi

Answer 6

安装这个扩展（创建这些组件是必需的） https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 然后你可以创建文件，例如：MyComponent.jsx（或.tsx） 输入rafce（VS Code会为你提供一些选项），然后按Enter键。

- Dmitry Buslov

Answer 7

根据@Niko的答案，提供了有用的${TM_FILENAME_BASE}占位符，这里是一个用于Typescript函数组件的代码片段，除了将组件命名为文件名之后，还添加了作为ComponentNameProps的props接口。

"React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react'",
      "",
      "export interface ${TM_FILENAME_BASE}Props {",
      "}",
      "export function $TM_FILENAME_BASE  ({}:${TM_FILENAME_BASE}Props)  {",
      "  return <></>",
      "};"
    ],
    "description": "React Functional Component"
  }

假设文件名为FileName.tsx，它会创建以下内容：

import React from 'react'

export interface FileNameProps {
}
export function FileName  ({}:FileNameProps)  {
  return <></>
};

- Porkopek