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 to 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"
      }
    }

Answer 4

如果你想生成功能组件片段，请使用下面的键

功能组件-> rnsf

常量组件 -> tsnf

VS代码

Answer 5

sfc

与“Simple React Snippets”扩展一起使用来创建无状态功能组件。生成的模板是：

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

export default ...;

Answer 6

安装此扩展（创建这些组件需要） https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

然后您可以创建文件，例如：MyComponent.jsx（或.tsx） 输入

rafce

（VS Code 会建议您其中一些）并按 Enter

Answer 7

基于 @Niko 的答案，它提供了有用的

${TM_FILENAME_BASE}

占位符，这里是 Typescript 功能组件的片段，除了在文件后命名组件之外，还将 props 的接口添加为 ComponentNameProps:

"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 <></>
};

Answer 8

那些希望将其用作 React Native 的人，

他们可以使用上述说明将打击代码添加到 javascript.json 文件中。

  {
  "React Native Functional Component": {
    "prefix": "rafce",
    "body": [
      "import React from 'react';",
      "import { View, Text, StyleSheet } from 'react-native';",
      "",
      "const ${TM_FILENAME_BASE} = () => {",
      "  return (",
      "    <View style={styles.container}>",
      "      <Text>${TM_FILENAME_BASE}</Text>",
      "    </View>",
      "  );",
      "};",
      "",
      "const styles = StyleSheet.create({",
      "  container: {",
      "    flex: 1,",
      "    justifyContent: 'center',",
      "    alignItems: 'center'",
      "  }",
      "});",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
    "description": "React Native Functional Component with StyleSheet"
  }
}