Zenn
🐷

eslintとprettierの組み合わせ

2022/03/04に公開
JavaScript
TypeScript
ESLint
Prettier
tech

最初に

eslintはJavaScriptにおけるスタンダードなリンターであり、コードを静的解析をし、問題のありそうな部分やスタイルガイドに準拠していない部分を検知するのに役立ちます。一方、prettierはJavaScriptのスタンダードなフォマッターであり、一定のスタイルを一貫して適用し、コードスタイルをめぐる不毛な議論を無くすることを目的にしています。

いい感じのコードにするという点では、どちらも共通していたり、eslint --fixに構文をフォーマットする機能があったりで、ややこしいです。筆者の備忘のために、以下にまとめました。

前提

node: v16.14.0
TypeScriptを用いて、nodeの環境で動かすコード(AWS Lambdaにデプロイするイメージ)を前提としています。ReactなどUIフレームワークの対応とは別物なので悪しからずご承知おきください。

コード例

まずはサンプルプロジェクトの作成

$ yarn init -y # 全てデフォルトでプロジェクトを作成
$ yarn add --dev typescript
$ tsc --init # 全てデフォルトでtscを初期化

この時点での各設定ファイル

package.json
{
  "name": "sample",
  "version": "1.0.0",
- "main": "index.js", # ここは削除でOK
  "license": "MIT",
  "devDependencies": {
    "typescript": "^4.6.2"
  }
}
tsconfig.json
# 余計なコメントは削除してます
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

prettierの設定

prettierrcの作成

$ yarn add --dev prettier
$ echo {}> .prettierrc.json

vscodeの設定

vscode拡張のインストール
Command + Pをしてext install prettier

demo1

また、保存時にフォーマッターが走るようにvscodeの設定をします。
プロジェクトルートで以下のコマンドを作ります。

$ mkdir -p .vscode && touch $_/settings.json
.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

eslintの設定

eslintのファイルを対話モードで作成

$ yarn add --dev eslint
$ yarn create @eslint/config

以下のように質問に答えていきます

ESLintのチェック範囲を設定します。
今回はTo check syntax and find problemsを選択します。

? How would you like to use ESLint? … 
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style

モジュールを選択します。ESModuleを使いたいのでJavaScript modules (import/export)を選択します。

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

特にUIフレームワークは使わないのでNone of theseを選択します。

? Which framework does your project use? … 
  React
  Vue.js
❯ None of these

TypeScriptはYesを使用します。

? Does your project use TypeScript? › No / Yes

ここだけ複数選択可でスペースでON/OFFするので注意

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
  Browser
✔ Node

設定ファイルの出力形式はなんでもOKですが、JSONにします。

? What format do you want your config file to be in? … 
  JavaScript
  YAML
❯ JSON

npmでインストールするか聞かれますが、Noを選択して、
別途yarn add --devインストールします。

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
? Would you like to install them now with npm? › No / Yes

ここまでの各設定ファイルは以下

.eslintrc.json
{
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}
package.json
{
  "name": "sample2",
  "version": "1.0.0",
  "license": "MIT",
  "devDependencies": {
+   "@typescript-eslint/eslint-plugin": "^5.13.0",
+   "@typescript-eslint/parser": "^5.13.0",
+   "eslint": "^8.10.0",
    "prettier": "^2.5.1",
    "typescript": "^4.6.2"
  }
}

vscodeの設定

vscode拡張のインストール
Command + Pをしてext install eslint

demo1

eslint-config-prettierの設定

ここまででprettierとeslintの設定はある程度できました。ただし、prettierとeslintには目的の違いもあり、ルールの競合が起きる場合があります。Prettierの公式ドキュメントでも論じられています。

Prettierのドキュメントにもある通り、eslint-config-prettierを使用することが推奨されています。

これにより、prettierと競合するeslintのルールを無効化することができます。

$ yarn --dev add eslint-config-prettier

eslintrc.jsonのextendsでprettierを追加します。最後のルールが一番優先されるので、extendsフィールドの一番最後にいれること

eslintrc.json
{
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
+       "prettier"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

また、package.jsonに以下を追加して、npmスクリプトでフォーマットできるようにしておきます。

package.json
{
  "name": "sample2",
  "version": "1.0.0",
  "license": "MIT",
+  "scripts": {
+    "lint-fix": "eslint --cache --fix src/ && prettier --write src/"
+  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.13.0",
    "@typescript-eslint/parser": "^5.13.0",
    "eslint": "^8.10.0",
    "prettier": "^2.5.1",
    "typescript": "^4.6.2"
  }
}

最後に

以上で最低限のprettierとeslintの設定が完了しました。その他のルールや設定はプロジェクトやチームの事情に応じて適宜追加していく必要があります。

Discussion