More than 5 years have passed since last update.

コードのチェックはESLintに任せよう！ブリボンの初めてのESLint

Last updated at 2019-07-09Posted at 2019-07-08

作成趣旨

前回、prettierでコードの自動整形を試してみたブリボン。
prettierのQiita記事はこちら
ESLintと組み合わせれば、もっと自動にコードの整形をしてくれるぞ！という情報を得まして、早速練習用リポジトリでESLintを導入してみました。

・JavaScriptの構文チェッカー
・細かな設定をすることができる

要は、変なコードを書いていないか（ ; 忘れや import ミスなど）を教えてくれる便利なやつです。
prettierと組み合わせると、変なコードを自動認識した上で、コードの整形までやってくれます。

yarn add ESLint

eslint --initをターミナルで呼び出すことで、対話的にeslintの設定ファイルを作ってくれるらしいです。
今回は、Qiitaの記事を元にファイルを生成しました。

.eslintrc.json

{
  "extends": ["eslint:recommended"],
  "plugins": [],
  "parserOptions": {},
  "env": { "browser": true},
  "globals": {},
  "rules": {}
}

まずは、こんな感じで簡単に作ってみましょう！！
参考: ESLint 最初の一歩

eslint src/App.js

上記のコマンドで、src配下のApp.jsファイルの構文チェックができる。

package.json

"lint": "eslint src/**/*.js"

上記でsrc配下の全ファイルが、ESLintによりふるいにかけられます。

yarn add eslint-plugin-prettier
yarn add eslint-plugin-react

####Parsing error: Unexpected token <
解決方法

yarn add babel-eslint

.eslintrc.json

{
    "parser": "babel-eslint",
}

    "babel-eslint": "10.0.1",
    "eslint": "^5.16.0",

上記のバージョンを使用する

yarn add eslint-plugin-react

.eslintrc.json

"extends": ["eslint:recommended", "plugin:react/recommended"],