ESLintでjavascript構文チェック！

ESLintとは

• javascriptの構文をチェックするツールです。
• 人によって異なるjavascriptの書き方もチーム開発では揃っていないと気持ちが悪いし、バグのもとに…。
• 構文チェックツール「ESLint」を導入すれば、スタイルガイドに合わせたチーム開発ができる。

1. コードスタイルの一貫性を保つ

• スペース、インデント、ブレース（波括弧）の配置などのコードスタイルの問題をリンターで確認できる。
• チームの同意を得たコーディングスタイルを設定ファイルに記述しておけば自動的に確認できる

1. 潜在的エラーや良くないパターンを見分けられる

• リンターは、重複変数、到達不能コード、無効な正規表現の可能性があるエラーを発見するため、より高度な確認に使用できる。リンターの警告で、ランタイム前にエラーを修正できる

1. 品質を強化する

• 人とは常に手抜きをしたくなるものなので、プロジェクトの特定のスタイルガイドに従うときはツールで強化することが大切だ。
• 作成手順にリンティングツールが備わっている場合は、プロジェクトの開始を止めるか、未修整エラーがあるならリポジトリにコミットする

1. 時間を節約する

• 上の3点から得られる主なメリットはリンターが開発中の手間を省くことだ。
• ブレースについて同僚と見当違いの議論に貴重な時間を費やすことなく、初期段階で1～2個のバグを発見する

ESLintを導入しよう

npmでeslintをinstall

$ npm install --save-dev eslint
$ export PATH=$PATH:./node_modules/.bin
$ eslint -v

eslintの初期設定

$ eslint --init

// 質問に対する回答を求められる
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb
? Do you use React? Yes
? What format do you want your config file to be in? JavaScript

package.json

{
  "devDependencies": {
    "eslint": "^4.15.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1",
  },
}

.eslintrc.js

module.exports = {
    "extends": "airbnb"
};

Atomに導入

テキストエディタにlinterをインストール

• linter
• linter-eslint

導入結果

行の左の「赤い●」は、その行にjavascript構文エラーがありのマーク(jsは一応動く)

jsが動かない致命的なエラーの場合は、行の左に1点のみ「赤い●」が付く

参考サイト

• JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう
• AtomにESLint導入した