備忘録

備忘録

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

実行結果

f:id:kagasu:20191019004257p:plain

FAQ

Q. VSCode で ESLint が動かない。

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

npm i

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