ESlintの導入・使い方

git・インフラ・環境構築

Reactでのアプリ開発は、JavaScriptでのコーディングになりますが、そんなJavaScriptの補完ライブラリとしてとっても便利なESlintの導入方法についてまとめました。

ESlintとは

JavaScriptの静的解析ツールで、構文の誤りを検出します。

コードの実行はしないで、構文をチェックするのみです。

ESlintのversionを確認

$ npm show eslint

eslint@8.6.0 | MIT | deps: 38 | versions: 294
An AST-based pattern checker for JavaScript.
ESLint - Pluggable JavaScript linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
keywords: ast, lint, javascript, ecmascript, espree bin: eslint dist .tarball: https://registry.npmjs.org/eslint/-/eslint-8.6.0.tgz .shasum: 4318c6a31c5584838c1a2e940c478190f58d558e .integrity: sha512-UvxdOJ7mXFlw7iuHZA4jmzPaUqIw54mZrv+XPYKNbKdLR0et4rf60lIZUU9kiNtnzzMzGWxMV+tQ7uG7JG8DPw== .unpackedSize: 2.7 MB dependencies: @eslint/eslintrc: ^1.0.5 escape-string-regexp: ^4.0.0 file-entry-cache: ^6.0.1 @humanwhocodes/config-array: ^0.9.2 eslint-scope: ^7.1.0 functional-red-black-tree: ^1.0.1 ajv: ^6.10.0 eslint-utils: ^3.0.0 glob-parent: ^6.0.1 chalk: ^4.0.0 eslint-visitor-keys: ^3.1.0 globals: ^13.6.0 cross-spawn: ^7.0.2 espree: ^9.3.0 ignore: ^4.0.6 debug: ^4.3.2 esquery: ^1.4.0 import-fresh: ^3.0.0 doctrine: ^3.0.0 esutils: ^2.0.2 imurmurhash: ^0.1.4 enquirer: ^2.3.5 fast-deep-equal: ^3.1.3 is-glob: ^4.0.0 (...and 14 more.) maintainers: - openjsfoundation <npm@openjsf.org> - eslintbot <nicholas+eslint@nczconsulting.com> - nzakas <nicholas@nczconsulting.com> - ivolodin <ivolodin@gmail.com> dist-tags: es6jsx: 0.11.0-alpha.0 latest: 8.6.0 next: 8.0.0-rc.0 published yesterday by eslintbot <nicholas+eslint@nczconsulting.com>

最新のversionは何か確認することができます。

latestが8.6.0であることが確認できましたのでこのversionをinstallします。

ESlintをinstall

Getting Started with ESLint
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

こちらの手順に沿って進めます。

$ npm install eslint --save-dev eslint@8.6.0

ここで-devと記述しているのは、開発用の依存関係であることを明示しており、installすると、package.jsonの”devDependencies”に入るライブラリであることを意味しています。

初期設定

$ npx eslint --init

? 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? … 
❯ 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

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
 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
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

? What format do you want your config file to be in? … 
  JavaScript
  YAML
❯ JSON

これら初期設定により、package.jsonに以下が追加されました。

  "devDependencies": {
    "@babel/core": "^7.12.9",
--ここから--
    "eslint": "^8.6.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0"
--ここまで--
  },

code runに、NodeでなくBrowserを選択した場合

✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest
✔ Would you like to install them now with npm? · No / Yes

package.jsonに「eslint-plugin-react」が追加され、eslintrc.jsonファイルが自動生成されます。

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

それぞれの役割は以下になります。

env

JavaScriptの実行環境を指定している。

「”browser”: true」ブラウザで提供されるAPIが使用可能

「”es2021″: true」ES2021のAPIが使用可能

詳細は以下に記載あり

Language Options
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

extends

他の設定ファイルを継承を設定できる。

「”eslint:recommended”」ESLintの推奨するルールセット

「”plugin:react/recommended”」eslint-plugin-reactプラグインが提供するrecommendという共有設定

parserOptions

ESLintはデフォルトではES5しかパースできない。

そのため、より新しい構文やJSXをパースするためにparseOptionsで設定を記述する必要があります。

「”ecmaFeatures”: { “jsx”: true }」JSXをパースする

「”ecmaVersion”: “latest”」最新のES2021の後部をパースする

「”sourceType”: “module”」コードがECMAScriptモジュールとしてパースされることを指定

plugins

ESLintはデフォルトではJavaScriptしかパースしないため、あらかじめルールが定義されたプラグインを使用する。

「”react”」この場合、eslint-plugin-reactが指定されている。

このプラグインはnpmで公開されているパッケージです。

rules

後述します。

ESlintの警告を無視する方法

ルールを設定し直す

installが完了したので、間違った記述がされていた際に自動補完をして警告を出してくれるようになりました。しかし、中にはこちらの意図しないところで警告を出されることもあります。

そのような場合に警告を消す方法をご紹介します。

.eslintrc.jsonの中のrulesに追記していきます。

例えば、以下の警告を消したい場合

'styles' was used before it was defined.eslint(no-use-before-define)

{

  省略

    "rules": {
        "no-use-before-define":0
    }
}

これで削除することができます。

ここで記述したキーの名前は、警告に表示されているものです。

一行だけ無効にする方法

無効にしたい行の上の行に以下のように記述します。

{/* eslint-disable-next-line */}

これでOKです!

ファイルごと対象外にする

rootディレクトリ配下に、.eslintignoreというファイルを作成し、以下のように記述します。以下はsample.jsファイルを対象外にする場合です。

dist/assets/
sample.js

ここで、dist/assets/ディレクトリを指定しているのは、ビルド済みのbundle.jsがこのディレクトリに出力されるので、これを対象から外すためです。

ESlintエラーを一覧で表示する

$ npx eslint ./src/**/*.jsx

こちらを実行することで、srcディレクトリ下の.jsxファイル全てをチェックしてくれます。

create-react-appで作成したプロジェクト

create-react-appで作成したプロジェクトには、実はデフォルトでESLintが入っているんです。

eslintの設定は、.eslintrc.jsonファイルで確認ができます。

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

ESlintを実行できるようにする

上記のlint実行コマンドを毎回入力するのは面倒ですよね。

そこで、コマンド実行を簡単にする方法があります。

そのためには、package.jsonファイルに以下の一行を追加します。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint ."  ←この一行を追加
  },

「.」が付いているのでお見逃しなく!

これで、以下コマンドでESlintを繰り返し実行することができ、rootディレクトリ配下の全てのファイルの構文チェックを実行してくれます。

$ npm run lint

ESlintプラグイン

必要なプラグインをインストールすれば独自の構文チェックをすることができます。

例えば、eslint-plugin-react-hooksはhooksをチェックをしてくれるプラグインですが、その他にもたくさんあります。

Rules of Hooks – React
A JavaScript library for building user interfaces

ちなみにこのプラグインは、create-react-appのプロジェクトではデフォルトで入っています。

アクセシビリティをチェックするプラグイン

ユーザーの能力や状況にかかわらずコンテンツを利用できるようにするアクセシビリティの準拠をチェックするプラグインがあります。

$ npm install eslint-plugin-jsx-a11y --save-dev

.eslintrc.jsonに設定値を追加

    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:jsx-a11y/recommended"  ←この一行を追加
    ],

    },
    "plugins": [
        "react",
        "jsx-a11y"  ←この一行を追加
    ],

そして、以下のようなコードを記述

function Image() {
  return <img src="/img.png" />;
}

そして、npm run lint を実行すると、以下のerrorが出力されました。

error img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

意味のあるテキストを記述するようにと、アクセシビリティに関するエラーが確認できました。

ESlintとPrettierの違い

ESlintとよく似たものにPrettierがありますが、この違いはなんでしょう?

この2つには明確な違いがあります。

ESlint

コード構文チェックが目的であり、コードの正しさを保つ。

Prettier

コード整形ツールであり、コードの読みやすさを保つ。

Prettierの詳細についてはこちらの記事をご覧ください。

以上、読んでいただきありがとうございました。

コメント