ESLint と Prettier の導入

はじめに

今回のコードはこちら↓
https://github.com/49takaya3989/sample_eslint_prettier

開発環境

"@typescript-eslint/eslint-plugin": "7.0.2",
"@typescript-eslint/parser": "7.0.2",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"prettier": "3.2.5",
"typescript": "5.3.3",

eslint とは？

ESLint は、コードの一貫性を高め、バグを回避することを目的として、ECMAScript/JavaScript コードで見つかったパターンを特定してレポートするためのツールです。
ESLint は完全にプラグイン可能です。すべてのルールはプラグインであり、実行時にさらに追加できます。コミュニティ プラグイン、構成、パーサーを追加して、ESLint の機能を拡張することもできます。

https://eslint.org/docs/latest/use/getting-started

prettier とは？

Prettier は、独自のコード フォーマッタです。
元のスタイルがすべて削除され、出力されるすべてのコードが一貫したスタイルに準拠するようになります。

https://prettier.io/docs/en/install

環境構築

React に導入することを前提に進る。
↓こちらの記事で Vite + React の環境構築を解説しているのでよければ参考に。
https://zenn.dev/takaya39/articles/207e3e393081d9

eslint + prettier のセットアップ

1. eslint のインストール
2. eslint のセットアップ
3. prettier と eslint-config-prettier のインストール
4. prettier のセットアップ
5. eslint-config-prettier のセットアップ
6. package.json に lint と prettier のコマンドを追加する
7. コマンドの実行

eslint のインストール

Vite + React のセットアップをされた方は、 eslint は入っているので、prettier と eslint-config-prettier のインストールまでスキップする。
公式を参考に進めていく。

npm install --save-dev eslint

eslint のセットアップ

eslint の設定ファイル .eslintrcを作成する。

touch .eslintrc.js

.eslintrc.js に下記コードを追記する。

.eslintrc.js

module.exports = {
  "env": {
      "browser": true,
      "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
  },
}

prettier と eslint-config-prettier のインストール

公式を参考に進めていく。

npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier

prettier のセットアップ

prettier の設定ファイル.prettierrcとフォーマットから外すためのファイル.prettierignoreを作成する。

node --eval "fs.writeFileSync('.prettierrc','{}\n')"
node --eval "fs.writeFileSync('.prettierignore','')"

今回は最低限の設定で進めため、それぞれのファイルに下記を記述する。

.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

.prettierignore

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
**/*.html

eslint-config-prettier のセットアップ

eslint と prettier の設定がバッティングしないための設定を eslint に追記する。

.eslintrc

{
  "extends": [
    ・・・
    "prettier"
  ]
}

package.json に lint と prettier のコマンドを追加する

package.json

{
  ・・・
  "scripts": {
    ・・・
    "lint": "eslint .",
    "prettier": "prettier . --write",
  },
}

コマンドの実行

eslint と prettier のコマンドを実行する。

npm run lint
npm run prettier

エラーが起きなければ完了。

<おまけ> vscodeのワークスペースにeslintを適用

IDE で vscode を使用されている場合に、 vscode のワークスペースにプロジェクトで設定した eslintを適用する。

1. cmd + "," で vecode の設定を開く
2. タブをワークスペースに切り替える
3. 検索窓にeslintと入力する
4. setting.json で編集をクリックする
5. setting.json に下記コードを適用する

setting.json

{
  "[javascript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    }
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
}

以上！