TypeScript のコードスタイル設定(eslint & prettier)

December 7, 2020

TypeScript のコードスタイルチェック設定

目的

TypeScript を使った React (NextJS) プロジェクトにコードスタイルチェックとフォーマッターを導入する。

環境情報

要素	バージョン
macOS	10.15.7
TypeScript	3.9.2
NextJS	10.0.1
React	16.13.0
eslint	7.13.0
prettier	2.1.2
WebStorm	2020.2
node	14.4.0
yarn	1.22.10

実行手順

パッケージインストール

プロジェクトのルートディレクトリで以下を実行する。

### for typescript

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

### for react

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

eslint 設定

.eslintrc.json に以下の内容を記述する

{
  // 適用する環境
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
    "commonjs": true
  },
  // パーサー
  "parser": "@typescript-eslint/parser",
  // jsx を使います
  "parserOptions": {
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "jsx": true
    },
    "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",
    "prettier/react",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    // TypeScirpt なので prop-types は要らない
    "react/prop-types": "off"
  },
  // .js ファイルをオーバーライド （webpack.conig.jsなど）
  "overrides": [
    {
      "files": ["*.js"],
      "rules": {
        "@typescript-eslint/no-var-requires": "off",
        "@typescript-eslint/explicit-function-return-type": "off"
      }
    }
  ]
}

prettier 設定

.prettier.json に以下の内容を記述する。

{
  "singleQuote": true,
  "jsxBracketSameLine": false,
  "bracketSpacing": true,
  "semi": false,
  "useTabs": false
}

linter 実行スクリプト登録

package.json の script エントリーに以下を追加する。

"lint": "eslint --ext .ts,.tsx ./pages ."

linter 実行

プロジェクトルートで以下を実行する。

$ yarn lint

WebStorm での TypeScript 整形

コードエディターで、⌘ Shift L を押下する。

Blog.