1分でわかるESLintの使い方とインストール手順

1分でわかるESLintの使い方とインストール手順

ESLintとは

JavaScriptのコードが正しいかチェックするツール。

以下の手順で簡単にインストールして使用可能。

1. npmをインストールする

https://nodejs.org/ja/

2. ターミナルを開く

ターミナル(コマンドプロンプト)でESLintをインストールするディレクトリに移動

C:\foo>

3. ESLintをインストールする

C:\foo>npm i -D eslint

4. ESLintの初期設定を行う

C:\foo>eslint --init

How would you like to configure ESLint?

と表示されるので「Answer questions about your style」を選択して決定する

How would you like to configure ESLint?
> Answer questions about your style
  Use a popular style guide
  Inspect your JavaScript file(s)

5. 表示される質問に回答

質問がいくつか表示されるのでy/Nで回答する。

よくわからないものはNにして問題ない。

Are you using ECMAScript 6 features? (y/N)

Where will your code run? (Press  to select)
>(*) Browser
 ( ) Node

Do you use CommonJS? (y/N)

Do you use JSX? (y/N)

What style of indentation do you use? (Use arrow keys)
> Tabs
  Spaces

What quotes do you use for strings? (Use arrow keys)
> Double
  Single

What line endings do you use? (Use arrow keys)
> Unix
  Windows

Do you require semicolons? (Y/n)

? What format do you want your config file to be in? (Use arrow keys)
> JavaScript
  YAML
  JSON

以上の質問の回答が完了すると設定ファイルが書き出される。

JavaScriptやJSONだと{}や,の付け忘れなどでエラーを発生させやすいためiwb.jpではYAML推奨。

書き出された.eslintrc.ymlは次のようになっている。

YAML選択時の設定ファイル

env:
  browser: true
  commonjs: false
extends: 'eslint:recommended'
rules:
  indent:
    - error
    - 4
  linebreak-style:
    - error
    - windows
  quotes:
    - error
    - single
  semi:
    - error
    - always

eslint:recommendedについて

extends: 'eslint:recommended'はESLintの推奨ルールをまとめて設定している。

eslint:recommendedについてはESLintのRulesのページで確認できる。

チェックマークが付いているものが有効になっているものだ。

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

例えばno-consoleはerrorが有効になっているのでconsoleがコード内に含まれるとエラーになる。
ESLint Rules no-console error

これをoffにしたい場合はrules:に

no-console:
  - off

を追加する

errorやoffは数字で指定することもできる

no-console:
  - 0
文字指定 数字指定
off 0
warn 1
error 2

実際に実行してみる

C:\foo>eslint test.js

のようにファイルを指定して実行する。

jsファイルすべての場合は*.jsのように指定。

test.jsコード例

var arr = [7, ,9];

function add(a, b) {
    var str;
    var str = "Answer is ";
  return str + a + b;;
}

console.log(add(1, 2));

eslint test.jsの結果はこうなる。

1:5   error  'arr' is defined but never used                         no-unused-vars
1:11  error  Unexpected comma in middle of array                     no-sparse-arrays
5:9   error  'str' is already defined                                no-redeclare
5:15  error  Strings must use singlequote                            quotes
6:3   error  Expected indentation of 4 space characters but found 2  indent
6:22  error  Unnecessary semicolon                                   no-extra-semi
6:22  error  Unreachable code                                        no-unreachable
9:1   error  Unexpected console statement                            no-console

エラーの内訳

no-unused-vars

使用されていない変数の宣言がある

no-sparse-arrays

[7, ,9]のように配列のカンマ内がカラ

no-redeclare

変数が2回以上宣言されている

quotes

singleが指定されているのにダブルクォーテーションが使用されている

indent

インデントに4が使用されているのに2になっている

no-extra-semi

b;;のように不要なセミコロンがある

no-unreachable

return;のあとに記述がある

このコードだとreturn str + a + b;;になっているため、このエラーが表示される。

no-console

コード内にconsoleが含まれている。

つまり、このように修正すればエラーは発生しなくなる。

※no-consoleはoffに設定

var arr = [7, 9];

function add(a, b) {
    var str = 'Answer is ';
    return str + a + b;
}

console.log(arr);
console.log(add(1, 2));