Zenn
🐾

【自分用メモ】ESlintとPrettireの導入

2022/08/09に公開
ESLint
Prettier
idea

Next.jsプロジェクトへの導入手順
.eslintrc.jsの設定については正直まだまだわかってない...

1.ESlintの基本設定

以下のコマンドを実行して、対話型で基本設定を行う

yarn run eslint --init

2..eslintrc.jsファイルの設定

env

グローバルな変数を環境に応じて定義してくれるところ
よく使うもの

  • browser
  • node
  • es2021
  • jest

parserOptions

JSが構文解析に必要な情報を補足としてつけるところ
ESlintがデフォルトで扱えるのがES5のみのため、6とかreactとかを使うために設定する

"parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },

extends

「rulesのデフォルト設定を行えるもの」+「他のオプションを拡張できるもの」
設定はあと勝ちとなるため、大事なものを後ろに書く
env,plugins,rulesを設定できる
自動でpluginsを拡張するものもある

plugins

元々持っていないものを追加して使えるようにするところ
package.jsonに入れたslint-plugin-xxxxxを設定する
その際はxxxxxだけで良い
新しいrulesを追加する

rules

rulesが一番強い

settings

Reactのバージョンを使っているものに合わせる

settings: {
  react: {
    "version":"detect"
  }
}

3.ESlintプラグインを追加する

おすすめプラグイン

  • eslint-plugin-react-hooks
yarn add eslint-plugin-react-hooks --dev

eslintrc.jsのextendsに"plugin:react-hooks/recommended"を追加する

  • eslint-plugin-jsx-a11y
yarn add eslint-plugin-jsx-a11y --dev

eslintrc.jsのextendsに"plugin:jsx-a11y/recommended"を追加する

  • eslint-plugin-eslint-config-prettier
yarn add -D eslint-config-prettier

eslintrc.jsのextendsの最後に"prettier"を追加する

4.Prettierのインストール

プロジェクトフォルダで以下を実行

Prettier
yarn add -D prettier

その他

便利コマンド
⌘ + shift + Pでeslint fixallを選んで「fix all auto flexible problem」
可能な範囲でコードを自動修正してくれる

Discussion