React入門 - Tips11 - PrettierとEsLintを設定する

目次

React入門

PrettierとEsLintとは

Prettierはコードフォーマッタ
ESLintは構文チェックツール

設定方法

ここを参考にしました。

纏めます。

１．React入門 - Part2でReact+TypeScript環境を作ります。

２．ESLint/Prettier package を install、設定 する

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
yarn add -D prettier eslint-config-prettier

３．.eslintrc.jsonを作成

package.jsonと同ディレクトリに.eslintrc.jsonを作成します。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "env": { "browser": true, "node": true, "es6": true },
  "rules": {
    // 個別に設定するESLintルールを記述
  }
}

※いちお、UTF-8で保存

４．.prettierrc.jsonを作成する

package.jsonと同ディレクトリに.prettierrc.jsonを作成します。

{
  "printWidth": 120,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "endOfLine": "lf"
}

※いちお、UTF-8で保存

５．VSCodeにESLintとPrettier - Code formatterをインストール

VSCodeを開いて、左側に表示されている拡張機能アイコンをクリックし
それぞれ、ESLint、Prettierと入力しインストールしてください。

確認

試しに以下を入力してみてください。

  let test = 'aaa';
  if (test) { return null } else { return <div></div> }

保存すると

  let test = 'aaa';
  if (test) {
    return null;
  } else {
    return <div></div>;
  }

となりますね。

ちなみに、以下の場合は、

  if (test) return null;
  else return <div></div>;

こんな風に変換されますね。

  if (test) return null;
  else return <div></div>;

細かい設定は後ほど。。。（調べます。）