Make React TS Development Easier with Snippets — React Snippets Extension 【VS Code Extension Guide】

Whether you're just starting out or coming back to development after a while, here's a handy VS Code extension for React TS.

I'll also introduce the snippets I use myself and show you how to add your own.

Adding a Snippet 「If You Want to Add Your Own」

Open the user snippets file

Press Shift + Cmd + P to open the command palette.

Snippets: Configure Snippets — search for this and select it.

Type "tsx" and set it up so the snippets apply to .tsx files.

A file called typescriptreact.json will open — enter something like the following (this is my own setup).

{
	"React Functional Component": {
  "prefix": "rfc", // 好きなショートカットキー
  "body": [
    "import React, { Component } from 'react';",
    "",
    "const ${TM_FILENAME_BASE}: React.FC = () => {",
    "  return (",
    "    <>${2:hello}</>",
    "  );",
    "};",
    "",
    "export default ${TM_FILENAME_BASE};"
  ],
  "description": "React Functional Component template"
}
}

A quick explanation:

• “prefix”: the shortcut you type to call up the snippet (e.g. rfc).
• “body”: the actual code that gets inserted. ${1} and ${2} are tab-completion placeholders.
• “description”: a description of the snippet.
• ${TM_FILENAME_BASE} is taken from the file name

That's roughly how it works.

React Snippets Extension 「If You Want to Use an Existing One」

Install the extension called VS Code ES7+ React/Redux/React-Native/JS snippets.

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

rcc

Includes a styled component, plus basics like state management already written in.

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

// #region constants

// #endregion

// #region styled-components

// #endregion

// #region functions

// #endregion

// #region component
const propTypes = {};

const defaultProps = {};

/**
 *
 */
class Staff extends React.Component {
constructor(props) {
  super(props);

  this.state = {
  };
}

  render() {
    return <div></div>;
  }
}

Staff.propTypes = propTypes;
Staff.defaultProps = defaultProps;
// #endregion

export default Staff;

rccp

Useful for a much simpler skeleton that doesn't include a styled component.

import PropTypes from 'prop-types'
import React, { Component } from 'react'

export default class Staff extends Component {
  static propTypes = {second: third}

  render() {
    return (
      <div>Staff</div>
    )
  }
}