NextJsでimport順を自動で並び替える(#javascript)

まずはpluginをinstall

npm install eslint-plugin-import --save-dev 

eslintの設定を更新します。

// .eslintrc.json
{
  "extends": "next/core-web-vitals",
  "plugins": ["import"],
  "settings": {
    "import/resolver": {
      "typescript": true,
      "node": true
    }
  },
  "rules": {
    // import
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/no-duplicates": "error",
    "import/no-extraneous-dependencies": "error",
    "import/no-self-import": "error",
    "import/no-useless-path-segments": "error",
    "import/order": [
      "error",
      {
        "pathGroupsExcludedImportTypes": [],
        "newlines-between": "always",
        "alphabetize": { "order": "asc", "caseInsensitive": false }
      }
    ]
  }
}

あとはlint fixしてやればいいのですが面倒なので保存時にfixかけるように変更します。

// .vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}