💭

ESlintについてのメモ

2022/03/02に公開約3,200字

この記事は

筆者はサイ本を通読してJavaScriptについてある程度理解しましたが、仕事で役立つ即効性のある知識は各ライブラリの理解であると考えました。
公式ドキュメントに目を通すとともに、必要になった時にすぐに該当のページへ辿り着けるように、個人用に書いています。

eslintの思想

https://eslint.org/docs/about/

JavaScriptは動的で型付けが緩やかなため、開発者のミスが起こりやすいので、静的な解析を通してそれを抑止するために開発された。
個々のルールは着脱可能で、一つ一つが独立していることを目指している。
って感じでしょうか。

prettierがコーディングスタイルによる不毛な議論をなくすために設定項目を最低限にしているのとはまた違った観点。

使ってみる

$ yarn init -y
$ yarn add eslint --dev
$ yarn create @eslint/config # 対話式で設定可能
$ yarn eslint . # CLIから実行
  • CLIからオプションを色々つけても実行可能だけど、チーム開発を考えると設定情報は設定ファイルにおいたほうが良い
  • gitのhookにかけたい場合はこちらを参照
  • Editorの拡張機能で解決したい場合はこちら

設定ファイルについて

ファイル名

  1. .eslintrc.js
  2. .eslintrc.cjs
  3. .eslintrc.yaml
  4. .eslintrc.yml
  5. .eslintrc.json
  6. package.json
    の優先順位でその階層において一つだけ適用。基本的にはrootにおいておけばOK(細かい規則はこちら)

また、JSON, YAMLともにコメント可能

主要な書式とドキュメントの関連

以下のような書式で書く or yarn create @eslint/configコマンドで作成する。

eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "extends": "airbnb",
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "single"]
    },
    "ignorePatterns": ["build/**/*.js"] // globで設定
}

各フィールドの説明は以下

CLIオプション

おそらく設定ファイル + エディターの拡張で使用する人が多いと思うが、CI/CDに組み込む時などに必要っぽい。
設定ファイルで規定できることの多くが、オプションで提供されている。
--fixおよび--fix-dry-runは設定ファイルでは表現できないので必読。

https://eslint.org/docs/user-guide/command-line-interface

ESLintの結果について

lintの結果についても、多くの書式で表示が可能

https://eslint.org/docs/user-guide/formatters/

DEMOが便利

https://eslint.org/demo が便利

  • サンプルコードを入力
  • 条件変更
    • paserOption
    • Environments
    • Rules
  • メッセージを確認できる
  • eslintrcをダウンロードできる

demo1
demo2

他ツールとの連携

https://eslint.org/docs/user-guide/integrations
  • vscodeはこちら
  • 外部のルールはこちらでも見れそう。例: React

Discussion

ログインするとコメントできます