Visual Studio Code 功能片段 React

Question

有谁知道 Visual Studio 中 React 功能组件片段的快捷方式是什么？我在编辑器中启用了 ES7 React/Redux/GraphQL/React-Native snippets 扩展。

Answer 1

如果您想创建React functional component代码片段，VS Code请按照以下步骤操作。

1. 去File - Preferences - Configure User Snippets
2. 将出现下拉菜单。选择New Global Snippets file并输入<any-name>您想要的内容，然后按 Enter 键
3. 应使用以下名称创建文件<any-name>.code-snippet
4. 粘贴此代码。您输入的任何内容都prefix将成为您的组件触发器

{
  "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并按 Enter 键。

Answer 2

我将rafce实时模板用于新组件。

这将创建如下代码：

import React from 'react';

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

export default MyComponent;

Answer 3

我找到了问题的解决方案（tnx 到 Krzysztof Podmok\xc5\x82y）。我想分享一些改进的代码，特别是针对 React 中的组件（它填充文件的名称而不仅仅是名称，并且我删除了 import React，只要它不再需要）。

\n

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

\n