コードをきれいにしたい

これは何？

javascriptのコードが解析されていい感じに整形されるようにします。

• リンター(解析): ESLint
• フォーマッター(整形): prettier

ESLint

    npm init @eslint/config

インストールすると、設定に関する質問がいくつかあるのでそれに答えます。

style guideはAirbnbが1番人気のようです。
Airbnbの設定は日本語にも訳されていて、わかりやすいと思います。

↓ Google、Airbnb、Standardの大まかな違いは以下の記事にまとめられています。

.eslintrcがjsもしくはjsonもしくはymlで作成されるので、そこで自分好みの設定をすることができます。

"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
"error" or 2 - turn the rule on as an error (exit code will be 1)

• "off" => 指定したルールは無視される
• "warn"ルールに反している場合,注意をされる
• "error"ルールに反している場合、ガチギレされる

.eslintrc.json

    "rules": {
            "no-unused-vars": "off",
            "indent": ["warn", 2],
            "semi": "error",
        }

例えば上記のように設定した場合、使われていない変数があっても警告は表示されない、インデントが2出なかった場合、注意をされる、セミコロンがなかった場合、ガチギレされるになります。
※ 設定できるruleの一覧

設定時にstyle guideを選んだ場合は、デフォルトでそのstyle guideのruleが適用されていて、.eslintrcでオーバーライドする形になります。

以下のコマンドでリンターを走らせることができます。

    npx eslint 解析したいファイルまたはディレクトリ

prettier

ESLintでコードを解析して、prettierでコードをよりprettyにする(整形する)ことができます。

    npm install --save-dev --save-exact prettier
    echo {}> .prettierrc.json

.prettierrc.jsonにprettierの設定を書きます。

.prettier.json

    {
        "singleQuote": true,
        "semi": false
    }

例えば上記のように設定すると、ダブルクォートがシングルクォートに変換され、末尾のセミコロンがある場合は削除されます。
※ 追加できるオプション

以下のコマンドでprettierを走らせることができます。

    npx prettier --write 対象のファイルまたはディレクトリ

対象外にしたいファイルやディレクトリがある場合は.prettierignoreを作成し、追加することで対象外にできます。

ESLintとprettierを同時に使う

package.jsonにESLintで解析するのと同時にprettierで整形できるようにコマンドを設定します。

package.json

    "scripts": {
        "clean": "npx prettier --write src && npx eslint --fix src"
    }

上記のように設定すると、npm run cleanによってESLintとprettierが走るようになります。

ESLint側とprettier側で設定が違うとコンフリクトしてしまうので、擦り合わせをする必要があります。

• eslint-config-prettier
• stylelint-config-prettier

↑ どちらもconflictするruleをESLint側でoffにするものなのでどちらを使ってもいいと思います。

eslint-config-prettierを使ってみます。

    npm install --save-dev eslint-config-prettier

.eslintrc.json

    {
      "extends": [
        "some-other-config-you-use",
        "prettier"         // <= 追加
      ]
    }

conflictがあるかどうかの確認は以下のコマンド(ディレクトリではなくファイル指定)

    npx eslint-config-prettier 対象のファイル

• conflictがあった場合

    The following rules are unnecessary or might conflict with Prettier:
    
    - indent

• conflictがなかった場合

    No rules that are unnecessary or conflict with Prettier were found.