React TS でスニペットを使って楽をする　React Snippets Extension 【VS code 拡張機能紹介】

初めての開発や久しぶりの開発で便利な React TS 用に VSCode で便利な拡張機能をします。

また、私の使うスニペットの紹介と、スニペットの追加方法の紹介をします。

スニペットの追加 『自分で追加する場合』

ユーザースニペットファイルを開く

Shit + cmd + p でコマンドパレットを開きます。

Snippets: Configure Snippets を検索して、選択します。

tsx と入力して、tsx ファイルでスニペットが効くように設定しましょう。

typescriptreact.json というファイルが開くので、例えば以下のように入力しましょう。（以下は私の設定）

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

ちょっとした説明をすると

• “prefix”: スニペットを呼び出す際に入力するショートカット（例: rfc）。
• “body”: 実際に挿入されるコード。${1} や ${2} はタブ補完用のプレースホルダー。
• “description”: スニペットの説明。
• ${TM_FILENAME_BASE} ファイル名から取得

といった感じです。

React Snippets Extension『あるものを使う場合』

VS Code ES7+ React/Redux/React-Native/JS snippets という拡張機能をインストールしよう。

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

rcc

styled component を含み、状態管理などの基本的な部分も書かれています。

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

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>
    )
  }
}