このポートフォリオ作成で使用した、便利なESLintプラグインのメモです。

//package.json 

    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-simple-import-sort": "^8.0.0",
    "eslint-plugin-sort-keys-custom-order": "^1.0.3",
    "eslint-plugin-unused-imports": "^2.0.0",
    "prettier-plugin-tailwindcss": "0.1.11",

eslint-config-prettier

👉　https://www.npmjs.com/package/eslint-config-prettier
Turns off all rules that are unnecessary or might conflict with [Prettier].
Prettierとコンフリクトの起きる不要なルールをすべてOFFしてくれます。

eslint-plugin-import

👉　https://www.npmjs.com/package/eslint-plugin-import
This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.
import / export シンタックスの整合性をチェックします（スペルミスなど警告が出ます）。

eslint-plugin-simple-import-sort

👉　https://www.npmjs.com/package/eslint-plugin-simple-import-sort
This is for those who use eslint --fix (autofix) a lot and want to completely forget about sorting imports!
importsをアルファベット順に自動で並び替えます（on saveをで実行されるよう設定する必要あり）。便利！

eslint-plugin-sort-keys-custom-order

👉　https://www.npmjs.com/package/eslint-plugin-sort-keys-custom-order
This plugin enforces alphabetically sorting keys in objects and typescript types with auto-fix. You can add a list of priority sorted keys for custom sorting (ex: if you want "id" to be the first property).
オブジェクトや型定義のキーを自動でアルファベット順に並び替えます。並び順を指定することもできます（指定方法は下記.eslintrc.json参照）。

eslint-plugin-unused-imports

👉　https://www.npmjs.com/package/eslint-plugin-unused-imports
Find and remove unused es6 module imports. 
使わなくなったモジュールのimportを特定して自動で削除します。

これらのプラグインをインストールしたら.eslintrc.jsonでプラグインの追加とルールを設定します。細かな設定は必要に応じて調整してください。

//.eslintrc.json
{
"plugins": ["sort-keys-custom-order","simple-import-sort","import","unused-imports"],
"extends": ["next/core-web-vitals", "prettier"],
  "rules": {
        // For JS objects sorting
        "sort-keys-custom-order/object-keys": ["warn", { "orderedKeys": [
            "id",
            "name",
            "title"
        ] }],
        // For TS types sorting
        "sort-keys-custom-order/type-keys": ["warn", { "orderedKeys": [
            "id",
            "name",
            "title"
        ] }],
        "simple-import-sort/imports": "warn",
    "simple-import-sort/exports": "warn",
    "import/first": "warn",
    "import/newline-after-import": "warn",
    "import/no-duplicates": "error",
    "unused-imports/no-unused-imports": "error"
    }
}

その他

prettier-plugin-tailwindcss

👉　https://www.npmjs.com/package/prettier-plugin-tailwindcss
A Prettier plugin for Tailwind CSS v3.0+ that automatically sorts classes based on our recommended class order.

yarn add -D prettier prettier-plugin-tailwindcss

Tailwind cssのクラス名を推奨する順番に並び替えてくれます。地味に便利✨