ESLintとPrettierとを基本からまとめてみた【React＋TypeScriptのアプリにESLintとPrettierを導入】

ESLintとは

• JavaScriptのための静的検証ツール
• ファイル内のバグチェックやコーディングスタイルの一貫性を保つのに役立つ

Prettierとは

• ソースコードを整形してくれるコードフォーマッター
• Node.js上で動作して、インデントや改行などの書き方を自動で統一してくれる
• 複数人で開発する場合に、フォーマットを統一してくれるので読みやすいコードにしてくれる

環境構築

VS CodeにESlintとPrettierの拡張機能を追加する

1. VS Codeの拡張機能としてESlintをインストールする。
   

2. Prettierもインストールする。
   

ESLintをインストール

1.ESLintとTypeScript用のESLintのプラグインをインストール

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

2.アプリケーション配下に.eslintrc.jsonを作成

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "env": { "browser": true, "node": true, "es6": true },
  "rules": {
    // ruleを追加したい場合
  }
}

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

【補足】eslint-config-pretterは、ESLintのルールを手動でOFFにする必要をなくすためのライブラリでeslintとprettierを共存させるなら入れておくと簡単に設定してくれる。

npm install -D prettier eslint-config-prettier

VS Codeの設定でセーブ時に整形するようにする

セーブ時に整形するようにVS Codeの設定を変更する。

1.設定画面を開く
ショートカットキーcommand + ,(Windows: Ctrl + ,)または、メニューバーから基本設定 > 設定 で設定画面を開く。

File>Preferences>Settingsを開いて、画像の赤枠のアイコンを押下するやり方もある。

2.右上のアイコンをクリック

3.Settingsの内容を修正する

settings.json

{
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "git.autofetch": true,
  "terminal.integrated.automationShell.windows": "",
  "terminal.integrated.defaultProfile.windows": "Git Bash",

//追加する
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

参考サイト

VS CodeでESlint、Prettierを使用したReact環境を構築する
VSCodeでESLint+typescript-eslint+Prettierを導入する（2020/11/14修正）
【ReduxToolkit入門】#4-2 ~簡易TODOアプリ: 開発準備編~
なぜESLintとprettierを入れようと思ったか。
React＋TypeScriptのアプリにESLintとPrettierを導入しよう！VSCodeの拡張機能も紹介！静的解析ツールとフォーマッター導入編