🇬🇧 React function component snippet for Visual Studio Code

February 20, 2020

In this post, you will learn how to create a snippet for React function components easily.

Let's do it:

You need to go to File > Preferences > User Snippets.

creation snippet route

Then choose the snippet called jsx.code-snippets or something similar to the jsx prefix.

choose your snippet

If you don't have this option let's create it clicking in the New Snippets option.

new snippets option

Then assign it a name, I recommend you name it jsx.

assign snippet name

Copy and paste the following code to your snippet file that we just create and then save it.

{
  "basic jsx component": {
    "prefix": "component",
    "body": [
      "import React from 'react';",
      "import PropTypes from 'prop-types';",
      "$0",
      "const ${1:name} = (props) => {",
      "\t$0return(",
      "\t$0\t$0<div>${1:name}</div>",
      "\t$0);",
      "};",
      "$0",
      "${1:name}.propTypes = {",
      "\tprops: PropTypes.object.isRequired",
      "};",
      "$0",
      "export default ${1:name};"
    ],
    "description": "Create a basic jsx component structure"
  }
}

And that's it! ✨

Now you can go to any jsx file and type component and then press tab, and you will create a function component instantly.

import React from 'react';

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

export default name;