LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-07-08

作成趣旨

前回、prettierでコードの自動整形を試してみたブリボン。
prettierのQiita記事はこちら
ESLintと組み合わせれば、もっと自動にコードの整形をしてくれるぞ!という情報を得まして、早速練習用リポジトリで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 コマンドを使おう!

eslint src/App.js

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

yarn lintでESLintを使う

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",
}

yarn startできない

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

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

関数コンポーネントで React を使っていなくても、宣言しないと使えないのに、明示的に使っていないという理由で、エラーを吐きだす。

yarn add eslint-plugin-react
eslintrc.json
"extends": ["eslint:recommended", "plugin:react/recommended"],

参考

参考文献

ESLint 最初の一歩
ESlint rules
ESLintで構文チェック(Webpack)
JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1