React で ESLint を使う方法

Ⅰ. はじめに

タイトルの通り「React で ESLint を使う方法」です。

Ⅱ. やり方

1. 新規プロジェクトを作成する

create-react-app hello-world

2. ESLint をインストールする

npm i -g eslint

2. ESLint を初期化する

以下コマンド実行後、ESLint の設定ファイルが自動生成されます。

eslint --init

3. standard に対応する

.eslintrc

{
  "extends": ["standard", "standard-react"]
}

4. 必要なパッケージをインストールする

npm i -D babel-eslint eslint-config-standard eslint-config-standard-react eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react

5. VSCode に拡張機能をインストールする

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

実行結果

FAQ

Q. VSCode で ESLint が動かない。

A. node_modules, package-lock.json, yarn.lock を削除した後に以下コマンドを実行する。

npm i

※ESLint の詳細ログは Ctrl + Shift + Uの出力タブで ESLint を選択すると表示されます。

参考

https://github.com/standard/eslint-config-standard-react