1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

VSCodeにES6+ReactのESLint設定を行う

JavaScript React ESLint 開発環境

1. eslintをプロジェクトのローカルにインストール

yarn add --dev eslint

手軽さからグローバルにインストールする例もありますが、チームで開発する場合は以下の理由からローカルにインストールした方がいいです

プロジェクト毎に別々のバージョンのeslintが利用できる
eslintに必要なプラグインも全てグローバルに入れる必要がある
eslintやプラグインのバージョンをチームで統一しやすい

2. eslint-config-airbnbをインストール

$ yarn add --dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint

3. VSCodeのESLint連携用のプラグインをインストール

VSCodeの拡張機能からESLintをインストールします

4. 設定ファイルを用意

eslintrcの拡張子にはJavaScript,JSON,YAMLがある
拡張子無しの.eslintrcはJSON,YAMLで記述可能ですが現在は非推奨です
- https://eslint.org/docs/user-guide/configuring#configuration-file-formats

{
  "extends": ["airbnb"],
  //ESlint標準のパーサーだとES6の一部記法が認識できずパースエラーになるのでbabel-eslintを使う
  "parser": "babel-eslint",
  "plugins": [
    //Reactのチェックに必要
    "react"
  ],
  "rules": {
  }
}

上記の設定だとかなりキツめの設定なので使ってみて気に入らない所はrulesに追記して行くのがいいでしょう

5. AutoFixを有効にする

{
    "eslint.autoFixOnSave": true
}

VSCodeのユーザー設定でeslintの自動修正を有効にします
セミコロンの有無やスペース数を自動で直してくれて便利です

ESLintが何か動かないぞ？という時

Parsing errorになっている

必要なプラグインがインストールされていなかったり、パーサーがES6に対応していなかったりしてパースエラーになっている可能性があります
ESlintはパースエラーになると、そこから後のチェックはしてくれないです