Sakiのプログラミング学習ブログ

プログラミングについて学んだことや、学習の振返りを書いています。

【ESLint】インストール&設定の手順と、実行結果の見方

はじめに

JavaScriptのESLintについて学んだので、

  • インストール&設定の手順
  • 実行結果の見方
  • VSCodeにESLintを設定する手順

をまとめた。

目次

ESLintとは?

公式Docs:https://eslint.org/より。

ESLintは、ECMAScript/JavaScriptのコードに見られるパターンを特定して報告するためのツールで、コードの一貫性を高めてバグを回避することを目的としています。多くの点でJSLintやJSHintと似ていますが、いくつかの例外があります。

  • Linterの一種
    • Linter:コンピュータプログラムなどのソースコードを読み込んで内容を分析し、問題点を指摘してくれる静的解析ツール
  • Rubyのrubocopと同じ役割

実行環境

  • macOS BigSur 11.5
  • Node.js v16.6.0
  • eslint v7.32.0

インストール&設定の手順

公式:https://eslint.org/docs/user-guide/getting-started の通りに実行。

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

ESLintはnpmまたはyarnを使ってインストールできる。今回はnpm(Node.jsのパッケージを管理するツール)を使ってインストールした。

// インストール
$ npm install eslint --save-dev // -gを付けていないのでローカルにインストールしている

// インストールできたか確認
$ npm ls
jsbook@ /Users/<ユーザー名>/jsbook
└── eslint@7.32.0 #=>成功!

2. 設定ファイルをセットアップする

※注: package.jsonファイルがすでにあることを前提としているので、そうでない場合は、事前にnpm initを実行しておく。

// package.jsonを生成(既にある場合は実行しない)
$ npm init

// ESLintの設定ファイルをセットアップする
$ npx eslint --init

3. 9個の質問に答える

  • $ npx eslint --initを実行すると9個の質問をされるので、答えていく
  • 選択にあたってこちらの記事を参考にした。
    ESLintのセットアップ方法(Mac) - Qiita
  • フィヨルドブートキャンプのプラクティスでは、

    チェックするルールはプロジェクトごとに違いますが、特になければJavaScript Standard Styleを使いましょう。

とあったので、7個目の質問で「Standard」を選んだ。 どのようなStyleかは、JavaScript Standard Style に日本語で詳しく解説されている。

? How would you like to use ESLint?
  To check syntax only 
  To check syntax and find problems 
> To check syntax, find problems, and enforce code style //これを選んだ

? What type of modules does your project use? (Use arrow keys)
  JavaScript modules (import/export)
  CommonJS (require/exports)
> None of these //これを選んだ

? Which framework does your project use?
  React
  Vue.js
> None of these //これを選んだ

? Does your project use TypeScript? · No / Yes // No を選んだ

? Where does your code run? · browser, node //両方選んだ

? How would you like to define a style for your project?
❯ Use a popular style guide //これを選んだ
  Answer questions about your style
  Inspect your JavaScript file(s)

? Which style guide do you want to follow? 
  Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard //これがJavaScriptStandardStyle
  Google: https://github.com/google/eslint-config-google

? What format do you want your config file to be in?
   JavaScript
>  YAML
   JSON
// rubyの設定ファイルで一番使い慣れてるのでYAMLにした。

? Would you like to install them now with npm? // Yesにした

4. 設定ファイルができているか確認する

$ cd <インストールした場所>

// 設定ファイルの中身を見る
$ cat .eslintrc.yml
env:
  browser: true
  es2021: true
  node: true
extends:
  - standard
parserOptions:
  ecmaVersion: 12
rules: {}

$ npm ls
jsbook@ /Users/<ユーザー名>/jsbook
├── eslint-config-standard@16.0.3
├── eslint-plugin-import@2.23.4
├── eslint-plugin-node@11.1.0
├── eslint-plugin-promise@5.1.0
└── eslint@7.32.0

//=>成功!

ローカルにインストールした理由

公式のインストール手順では、$ npm install eslint --save-dev = ローカルでインストール方法が載っていたが、ESLint 最初の一歩 - Qiita では、$ npm install -g eslintとグローバルにインストールしていたので、ローカルとグローバルのどちらでインストールすべきか迷った。
考えた結果、ローカルにインストールすることにした。
理由は、

  1. 現場では、プロジェクトごとに違うルールでLinterを通すため、スコープを小さくインストールした方が良いと考えたため
  2. スクラム開発のプラクティスに入るまでは、特定のディレクトリ下でのみJavaScriptを書くため、グローバルにインストールする必要がなかったため
  3. 一次情報が一番信憑性が高いため


(「私はこういう理由でインストールしたよ」,「グローバルにインストールした方がいいよ」、などありましたら、コメントいただけると嬉しいです🙇‍♀️)

npxとは?

ESLintの設定ファイルをセットアップするために、$ npx eslint --initを実行したが、このnpxとは何なのか?

npxは、npmのバージョン5.2.0で導入されたコマンドで、ローカルにインストールしたnpmパッケージ(今回でいうESLint)を、このコマンド一つで簡単に実行してくれる

使い方

基本のコマンド

// ESLintをファイルに通す
$ npx eslint <ファイル名>

// 自動修正は--fixオプションを使う
$ npx eslint <ファイル名> --fix

FizzBuzz問題を例に、実行結果の見方を解説

ESLintを通す前のコード ❗ネタバレ注意❗

// fizzbuzz.jsファイル

for (let num = 1; num <= 20; num++) {
  if (num % 3 == 0 && num % 5 == 0) {
    console.log('FizzBuzz');
  } else if (num % 3 == 0) {
    console.log('Fizz');
  } else if (num % 5 == 0) {
    console.log('Buzz');
  } else {
      console.log(num);  // ここはわざとインデントをずらした
  }
}

これにESlintを通してみると、実行結果は以下のようになった。

$ npx eslint fizzbuzz.js 

/Users/<ユーザー名>/jsbook/fizzbuzz.js 

  2:15       error  Expected '===' and instead saw '=='           eqeqeq
  2:31       error  Expected '===' and instead saw '=='           eqeqeq
  3:28       error  Extra semicolon                               semi
  4:22       error  Expected '===' and instead saw '=='           eqeqeq
  5:24       error  Extra semicolon                               semi
  6:22       error  Expected '===' and instead saw '=='           eqeqeq
  7:24       error  Extra semicolon                               semi
  9:1        error  Expected indentation of 4 spaces but found 5  indent
  9:22       error  Extra semicolon                               semi

✖ 9 problems (9 errors, 0 warnings) 
  5 errors and 0 warnings potentially fixable with the `--fix` option.


rubocopとは実行結果の表示が違い、戸惑ったので、実行結果の見方を以下に追記した。

$ npx eslint fizzbuzz.js 

/Users/<ユーザー名>/jsbook/fizzbuzz.js // ESLintを通したファイルのパス
//行番号:何文字目か  種類    メッセージ                                     ルール名
     2:15         error  Expected '===' and instead saw '=='           eqeqeq
     2:31         error  Expected '===' and instead saw '=='           eqeqeq
     3:28         error  Extra semicolon                               semi
     4:22         error  Expected '===' and instead saw '=='           eqeqeq
     5:24         error  Extra semicolon                               semi
     6:22         error  Expected '===' and instead saw '=='           eqeqeq
     7:24         error  Extra semicolon                               semi
     9:1          error  Expected indentation of 4 spaces but found 5  indent
     9:22         error  Extra semicolon                               semi

✖ 9 problems (9 errors, 0 warnings) // 9つの問題(うち、エラーは9個, 警告は0個)
  5 errors and 0 warnings potentially fixable with the `--fix` option.
  // 5つのエラーと0つの警告が、`--fix`オプションで修正可能な可能性がある

違反の意味が分からないときの調べ方

実行結果を見て、指摘されている違反の意味が分からないときは、以下のサイトでルール名(例:上記のeqeqeq)で検索すると詳細を知ることができる。

errorとwarningのちがい

「ワーニングとは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典」より引用

error

  • 問題があると判断したもの
  • 該当部分の修正が必要

warning

  • ユーザに確認し、判断して欲しいもの
  • 「何とかなったっぽいけど、できれば注意して」「できるけど、できれば止めて」なもの

違反が無かったときの実行結果

違反が無かったときの実行結果が、rubocopとは異なる
rubocopを通して違反が一つも無い時は、no offenses detected(違反は検出されなかった)と表示される。

$ rubocop <ファイル名>
Inspecting 1 file
.

1 file inspected, no offenses detected

しかし、ESLintは何も返ってこない

~/jsbook> $ npx eslint fizzbuzz.js
~/jsbook> 

--fixオプションを使ってみる

上記のコードに--fixオプションを使って自動修正を行うと、以下のコードになった。

自動修正後のコード ❗ネタバレ注意❗

for (let num = 1; num <= 20; num++) {
  if (num % 3 === 0 && num % 5 === 0) {
    console.log('FizzBuzz')
  } else if (num % 3 === 0) {
    console.log('Fizz')
  } else if (num % 5 === 0) {
    console.log('Buzz')
  } else {
    console.log(num)
  }
}

VSCodeにESLintを設定する

VScode拡張機能の検索で、ESLintを探して、Installをクリック。

これですぐに使えるようになる。

違反がある所にカーソルを当てると、風船のマークが表示される。

風船をクリックするとメニューが出るので、やりたいことに応じて選ぶ。

参考記事