Zenn
Open2

importの順番をルール化して自動で整列させるeslint-plugin-import

rena-hrena-h

install

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

typescript-eslint の no-unused-vars を off にする

eslint/no-unused-vars をTS用に拡張したもの。

eslint-plugin-unused-imports と重複して no-unused-vars のエラーが報告されてしまう

'Hogehoge' is defined but never used. eslint (unused-imports/no-unused-imports)
'Hogehoge' is defined but never used. eslint (@typescript-eslint/no-unused-vars)

そのため、typescript-eslint の no-unused-vars を 無効にする必要がある。

.eslintrc
  "rules": {
    "@typescript-eslint/no-unused-vars": "off"
}

これで、 unused-imports/no-unused-imports のエラーだけが報告されるようになる。

eslint-plugin-unused-imports を plugins と rules に追加

.eslintrc
{
  "plugins": ["import", "unused-imports"],
  "rules": {
    "unused-imports/no-unused-imports": "warn",   // "error" でも
  }
}

順番をルール化

refs

.eslintrc.json
"import/order": [
  "warn",
  {
    "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],
    "newlines-between": "always",  // import groups の間 1行あける
    "pathGroupsExcludedImportTypes": ["builtin"],
    "alphabetize": { "order": "asc", "caseInsensitive": true }, // 大文字小文字関係なくアルファベット順にしたい
    "pathGroups": [
      { "pattern": "src/types/**", "group": "internal", "position": "before" },
      .... // 好きに設定
      { "pattern": "src/repositories/**", "group": "internal", "position": "before" },
    ]
  }
]

Groups option

ここで、「buildin (ビルドイン)-> external (外部) -> internal (内部)」で並ぶようにしている

"groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],

pathGroups

path のパターンを指定して group 化することができる
↓ の例では、src/types/** を Groups option で定義された internal group と同じ位置で扱って欲しいという設定。

pattern と group は必須 option で、position はoptional

"pathGroups": [
      { "pattern": "src/types/**", "group": "internal", "position": "before" }
}

完成

.eslintrc.json
{
  "env": {
    "node": true,
    "es6": true
  },
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
  "plugins": ["import", "unused-imports"],     // eslint-plugin- 接頭辞は省略
  "rules": {
    "@typescript-eslint/no-unused-vars": "off",
    "unused-imports/no-unused-imports": "warn",
    "import/order": [
      "warn",
      {
        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],
        "newlines-between": "always",
        "pathGroupsExcludedImportTypes": ["builtin"],
        "alphabetize": { "order": "asc", "caseInsensitive": true },
        "pathGroups": [
          { "pattern": "src/types/**", "group": "internal", "position": "before" },
          .... // 好きに設定
          { "pattern": "src/repositories/**", "group": "internal", "position": "before" },
        ]
      }
    ]
  }
}

.vscode/settings.json にこれを設定していると、保存時に import の順番が自動で変わり、未使用の import は削除されるようになるので便利です。

.vscode/settings.json
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}