ESlintの導入・使い方

git・インフラ・環境構築

Reactでアプリを開発するには、JavaScriptでコードを書くことになりますが、JavaScriptの補完ライブラリとしてとても便利なESlintの導入方法についてまとめました。

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"
--ここまで--
  },

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です!

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

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

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

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

コメント

タイトルとURLをコピーしました