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

はじめに

仕事で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を使って、周りのメンバーに怒られないコードを書くように心がけたいと思います。