Zenn
🕌

eslint, prettier の最新の設定についていい加減まとめてみた

2020/11/04に公開
ESLint
JavaScript
Prettier
tech

はじめに

JS の勉強を初めて少し経つとコーディングスタイルがバラバラなのが気になりました。
そこで eslint や prettier を導入しようとしたのですが、色々と情報が錯綜していて結局よくわからん状態になりまして😅

ということで自分のメモ用ににごく簡単にまとめてみました。
参考にさせて頂いた記事は、

いざ導入

方針としては、

  • eslint-plugin-prettier は利用しない（非推奨なため）
  • prettier --write → eslint をまとめて実行できる npm スクリプトを package.json に用意する
  • React など必要なライブラリの設定をする

eslint-plugin-prettier は eslint --fix を実行するだけで、コード整形の部分に関しは prettier のルールを使うようにできる優れもので、よく使われているようです。
しかし現在は公式から非推奨扱いになっているようです。
なので利用しません。

必要なモジュールを入れます。

$ yarn add eslint eslint-config-prettier prettier -D

eslint-config-prettier は eslint に存在する prettier と競合するフォーマットルールを off にするために使います。
コード整形に関しては全て prettier にお任せします。

色々細かい部分はあると思うのですが、とりあえずこんな感じになりました。

.eslintrc.json
{
  "env": {
    "es2020": true,
    "node": true,
    "browser": true
  },
  "plugins": [
    "react"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "rules": {
// こんな感じでルールを書く
    "react/prop-types": [
      "off"
    ]
  }
}

前提としては、

  • TypeScript 不使用
  • React 使用

の場合になります。
今回はこれで作ってみましたが、 TypeScript を使うことの方が多いと思うのでまた対応させたものを出したいですね🧐

そして、 package.json にスクリプトを書いておきます。

package.json
  "scripts": {
    "fmt": "prettier --write 'src/**/*.js' && eslint ./src/"
  }

ここはチューニングする必要があると思います。今回は create-react-app で作成したので、チェック対象を src 配下に限定しています。
ただやっていることは、prettier で整形 → eslint で、変わらないと思います。

色々と条件があるとは思いますが、ベースはこんな感じで良いのでは無いかと。。。
間違っている部分や改善案があれば教えて頂けると嬉しいです😃

Discussion