💭

ESlintについてのメモ

2022/03/02に公開

この記事は

筆者はサイ本を通読して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の拡張機能で解決したい場合はこちら

設定ファイルについて

ファイル名

.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
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で設定
}