ゼロからのESLint その１

ESLintとは

JavaScriptの静的検証ツール
柔らかく言えば、JSの構文エラーがあったら教えてくれるよ〜ってやつ
みんなでやる時とか「こうやって書こうぜ」って感じにルールを決めて検証できる

とりあえず触ろう

Installation

terminal

$ npm init -y
$ npm install eslint

package.json

{
  "name": "lint",
  "scripts": {
    "lint": "eslint src"
  },
  "dependencies": {
    "eslint": "^6.6.0"
  }
}

src内のjsファイルを検証するように指定

$ node node_modules/eslint/bin/eslint --init

と叩くと対話的にルールを設定することができる。
対話的に.eslintrc.json を生成しても直接作っても差異はありません。

.eslintrc.json

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

これはESLintの設定ファイル
extends項目は推奨設定を自動で指定してくれるもの。
０からカスタムはするのは時間がかかるので基本的にこの記述
設定をカスタムしたい場合は "rules" に追記する。

とりあえず設定はこれでおしまい

JSファイルを用意する

app.js

function hoqe(text) {
  console.log(text + "使ってみた")
}
hoge("ESLint")

とりあえずここら辺で実行

$ npm run lint

/lint/src/app.js
  1:10  error  'hoqe' is defined but never used  no-unused-vars
  5:1   error  'hoge' is not defined             no-undef
✖ 2 problems (2 errors, 0 warnings)

エラーが出ちゃった。 hoqeってなんやねんって怒られてますね。　修正修正

app.js

function hoge(text) {
  console.log(text + "使ってみた")
}
hoge("ESLint")

ここでもう一度

$ npm run lint

何もエラーが出なければ、ESLintのルールに準じた記述ができたということ！

ゼロからのESLint その２に続く

おわり

今回使用したコード