, ,

[Front-End General] ESLint: .js を lint する

公開日: 2016/04/01
更新日: 2018/12/26

JSHint から乗り換えを検討。

Contents

Install

プロジェクトディレクトリにインストールする。

% npm install --save-dev eslint
% $(npm bin)/eslint --version
v2.5.3

IDE

例えば atom に導入するには、下記でインストール。

apm install linter-eslint

Config

.eslintrc を作成する。

% $(npm bin)/eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Google
? What format do you want your config file to be in? JSON
Successfully created .eslintrc.json file in /Users/****/projects

Installing eslint-config-google まで実行してくれた。
生成直後は "extends": "google" のみ。
Specifying Environments の設定を加える。

.eslintrc.json
{
    "extends": "google",
    "env": {
        "browser": true,
        "node": true,
        "es6": true,
        "mocha": true,
        "jquery": true
    }
}

例えば jquery が入っていないと下記のようなエラーが出る。

% $(npm bin)/eslint source/javascripts/lib/*
/Users/****/projects/source/javascripts/lib/_basic.js
  7:1   error  '$' is not defined                                      no-undef

Usage

% $(npm bin)/eslint source/javascripts/lib/*
/Users/****/projects/source/javascripts/lib/_smooth-scrolling.js
  12:1  warning  Line 12 exceeds the maximum line length of 80  max-len
✖ 1 problem (0 errors, 1 warning)

補遺

react(jsx)