VSCode + ESLint + Prettier + React + TypeScript (自分用メモ Fall, 2020)

4 min read読了の目安(約4000字

はじめに

目標

前提

  • Node.jsYarnはインストール済みとします(Yarnを使います)

ESLint, Prettier, TypeScript, React のインストール

プロジェクト・フォルダの作成

bash
$ mkdir zenn && cd $_
$ yarn init -y
yarn init v1.22.10
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.04s.

ESLint と Prettier

bash
$ yarn add -D eslint prettier eslint-config-prettier

eslint-config-prettier:
prettier と被る(または不要な)eslint のルールを無効化します。

TypeScript 関連

bash
$ yarn add -D typescript @typescript-eslint/{parser,eslint-plugin}

React 関連

bash
$ yarn add react react-dom
$ yarn add -D @types/{react,react-dom}
$ yarn add -D eslint-plugin-{react,react-hooks}

tsconfig.json

tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "lib": ["DOM", "ES2020"],
    "jsx": "react",
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true
  },
  "ts-node": {
    "compilerOptions": {
      "target": "ES2015",
      "module": "CommonJS"
    }
  }
}

.eslintrc.json

.eslintrc.json
{
  // 適用する環境
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
    "commonjs": true
  },
  // パーサー
  "parser": "@typescript-eslint/parser",
  // jsx を使います
  "parserOptions": {
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "jsx": true
    },
    // import 文でモジュールを使用します
    "sourceType": "module"
  },
  // React のバージョンは自動検出に
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": ["react-hooks", "react", "@typescript-eslint"],
  // 基本的にルールは recommended に従う
  // prettier は配列の最後尾に書く
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "rules": {
    // TypeScirpt なので prop-types は要らない
    "react/prop-types": "off"
  }
}

注意点1: extends では prettier を配列の最後部に記述すること!

注意点2:
https://github.com/prettier/eslint-config-prettier

ℹ️ Note: You might find guides on the Internet saying you should also extend stuff like "prettier/react". Since version 8.0.0 of eslint-config-prettier, all you need to extend is "prettier"! That includes all plugins.

.prettierrc.json

prettierのオプションはこちら(少ない!)。

.prettierrc.json
{
  "singleQuote": true,
  "jsxBracketSameLine": true
}

VSCodeの設定

ESLint, Prettier 拡張をインストール

.vscode/settings.json

settings.json
{
  "editor.formatOnSave": true,    // <-- prettierで整形
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true  // <-- eslintでリント
  },
  // デフォルトフォーマッタをprettierに
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

editor.defaultFormatter がキモ?
editor.formatOnSave でPrettierの整形が効かない時は大抵これを忘れてます。

おまけ

package.json
{
  "scripts": {
    "fix:eslint": "eslint . --ext .js,.ts,.jsx,.tsx --fix",
    "fix:prettier": "prettier --write ."
  }
}

謝々

https://qiita.com/iwaiktos/items/42fab6ad04cb297b8bbd

https://qiita.com/sho-t/items/c9fe6d382636bd3402f8

https://qiita.com/take_o/items/16beaec4619301ca8257