Edited at

eslintで、怒られないコードを書く

More than 3 years have passed since last update.


はじめに

仕事でjshintを使っていましたが、使い方を間違っていたり、

設定をなんとなくの理解で使っている状態でした。

JSおじさんの勉強会でeslintの話がでたので、

自分なりに使い方をまとめて見たいと思います。


JSオジサン as a Service



eslintのメリット


  • ルール単位でON/OFFができる

  • 拡張性が高い

  • JSXに対応している

  • ECMAScript6にも対応している


準備

◎eslintをインストール

sudo npm install -g eslint

◎設定ファイル(eslingrc)を作成

eslint --init

① What style of indentation do you use?

インデントをタブにするかスペースにするか

② What quotes do you use for strings?

文字列はシングルクオートにするか、ダブルクオートにするか

③ What line endings do you use?

windowsを使うかUnix(Mac)を使うか

④Do you require semicolons?

セミコロンは必須にするか

⑤Are you using ECMAScript 6 features?

ECMAScriptの6の機能を使用する、しないか

⑥Where will your code run?

実行環境(複数選択可)

⑦Do you use JSX?

JSX(React)を使うか

⑧What format do you want your config file to be in?

設定ファイルの形式

上記の各問いを選択していくと設定ファイルが作成される。

{

"rules": {
"indent": [
2,
"tab"
],
"quotes": [
2,
"double"
],
"linebreak-style": [
2,
"unix"
],
"semi": [
2,
"always"
]
},
"env": {
"node": true,
"browser": true
},
"extends": "eslint:recommended",
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
},
"plugins": [
"react"
]
}

◎検査を実行

eslint hogehoge.js


ルールの有効、無効の設定

設定ファイルのルールIDを変更することでルールを適応するかを変更できる。

* 2 ・・・ 有効(エラー)

* 1 ・・・ 有効(警告)

* 0 ・・・ 無効

 "rules": {

"indent": [
0,//無効
"tab"
],


グローバルオブジェクトの許可

下記のように、グローバルオブジェクトとして許可する変数名を定義できる。

{

"globals": {
"v1": true,
"v2": true
}
}


設定ファイル

"extends": "eslint:recommended"

List of available rules内の(recommended)とついてるものが有効になります。

最低限のチェックの場合はこれだけでもいいみたいです。


eslint-recommended.md(日本語訳)


◎他のrules

下記が参考になりました。


ESLint 1.0.0新ルールまとめ


公式のドキュメントはこちら


http://eslint.org/docs/rules/



package.jsonにも定義できる

設定ファイルではなく、package.jsonに定義することもできる。

{

"name": "eslint",
"version": "1.0.0",
"description": "Sample",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT",
"eslintConfig": {
"rules": {
"curly": 2,
"no-multi-spaces": false,
"no-underscore-dangle": false,
"quotes": [2, "single"],
"strict" : false
}
}
}


gulpで利用する

gulpのタスクでチェックするには下記のプラグインを使用します。


gulp-eslint


以上eslintの簡単な説明でした。

eslintを使って、周りのメンバーに怒られないコードを書くように心がけたいと思います。