CODEWITHSUNDEEP
reactjsvisual-studio-codevscode-snippets
Sergey Kirillov
Sergey Kirillov

Reputation: 671

Visual Studio Code functional snippet React

Does anybody knows what's the shortcut for React functional components snippet in Visual Studio? I have the ES7 React/Redux/GraphQL/React-Native snippets extension enabled in the editor.

Upvotes: 16

Views: 106322

Answers (8)

Osama Bin Sajid
Osama Bin Sajid

Reputation: 52

Those who are looking to use this as react native,

They can add the blow code to javascript.json file using above instructions.

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

Upvotes: 1

Dmitry Buslov
Dmitry Buslov

Reputation: 51

Intstall this extension (is required for creating these components) https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

Then you can create file, ex: MyComponent.jsx (or .tsx) Type in rafce (VS Code will suggest you some of these) and hit Enter

Upvotes: 3

Porkopek
Porkopek

Reputation: 1012

Based on the answer of @Niko, that provides the useful ${TM_FILENAME_BASE} placeholder, here is a snippet for Typescript functional component that, besides naming the component after the file, adds the interface for props as 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"
  }

and, assuming that the file is named FileName.tsx, creates this:

import React from 'react'

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

Upvotes: 1

Niko
Niko

Reputation: 91

I found the solution for my problem (tnx to Krzysztof Podmokły). I would like to share some improved code particularly for component in React (it fills name of the file instead of just name, and I deleted import React, as long as it doesn't needed anymore).

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

Upvotes: 8

Faouzi
Faouzi

Reputation: 1019

sfc is used with 'Simple React Snippets' extension to create statless functional components. The generated template is :

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

export default ...;

Upvotes: 4

Krzysztof Podmokły
Krzysztof Podmokły

Reputation: 866

If you wish to create React functional component snippet in VS Code follow these steps.

  1. Go to File - Preferences - Configure User Snippets
  2. Dropdown will appear. Select New Global Snippets file and type <any-name> you want and hit enter
  3. File should be created with the following name <any-name>.code-snippet
  4. Paste this code. Anything you type in prefix will be your component trigger
{
  "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"
  }
}
  1. Save the file
  2. Type (in this case) rfc and hit enter.

Upvotes: 40

Kabariya Kritesh
Kabariya Kritesh

Reputation: 37

If you want to generate function component snippet, use below key

Function component -> rnsf

Const component -> tsnf

VS code

Upvotes: 2

Sergey Kirillov
Sergey Kirillov

Reputation: 671

I used the rafce live template for new components.

This creates code like:

import React from 'react';

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

export default MyComponent;

Upvotes: 35

Related Questions