Written by
on May 3, 2020

[ESLint] eslint-plugin-importを利用して自動でimportをアルファベット順にソートする

Tags:

#TypeScript #JavaScript #Node.js #ESLint

以前までTypeScriptの開発ではTSLintを使っていましたが、TSLintの開発が縮小されていくということもあり、最近はESLintを利用しています。

TSLintにはimportがアルファベット順に並んでいないと警告を出してくれるorderd-importsというルールがあります。autofixもサポートされており、VSCodeのTSLint拡張を使うと保存時に自動でアルファベット順にソートしてくれていました。

ただ、ESLintに移行するとこれに代替する機能が標準ではありませんでした。正確にはimportがアルファベット順に並んていないと警告を出してくれるsort-importsというルールがあるのですが、これがautofixに対応していないのです。

autofixに対応していない理由はissueに書かれていました。

autofixによってimportの順番が変更されるとimportの評価順序が変更され、元の動作とは違った動作になってしまうことをことを危惧しているようです。とはいえ、Lintエラーが出るたびにいちいちimportをアルファベット順に手動で並べ替えるのはかなり大変です。

そこでESLintでimportを自動でソートしてくれるブラグインがないか調べたところ以下のESLintプラグインが見つかりました。

GitHubのスター数も2500あり、npmのウイークリーダウンロード数も7043052とかなり使われているプラグインです。また、TypeScript本体やJestでもこのプラグインが利用されていました。このプラグインはソート機能以外にもimportに関する様々なルールが提供されています。

今回はこのeslint-plugin-importを使ってimportをアルファベット順にソートする方法について書いていきます。

eslint-plugin-importの使い方

今回はTypeScriptプロジェクトでESLintとeslint-plugin-importを利用する設定を書いていきます。まずは必要なライブラリのインストールです。

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-import typescript

TypeScriptプロジェクトでESLintを使うには@typescript-eslint/eslint-pluginと@typescript-eslint/parserが必要です。

次に.eslintrc.jsonの記述です。今回は以下のように設定しました。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:import/errors"
  ],
  "plugins": ["@typescript-eslint", "import"],
  "parser": "@typescript-eslint/parser",
  "env": { "node": true, "es6": true },
  "parserOptions": {
    "tsconfigRootDir": "."
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".ts"]
      }
    }
  },
  "rules": {
    "sort-imports": 0,
    "import/order": [2, { "alphabetize": { "order": "asc" } }]
  }
}

import/orderルールがeslint-plugin-importによって提供されているルールで、このルールを有効化して、{ "alphabetize": { "order": "asc" }のオプションを記述するとimportがアルファベット順に並んでいない場合にエラーを出してくれます。また、TypeScriptの開発を行う場合にはsettingsでimport/resolverの設定をしないとTypeScriptのモジュールのimportでエラーが出てしまうので、"node": {"extensions": [".ts"]}を記述します。 ESLint標準で入っているsort-importsのルールはimport/orderと重複するため、無効化しています。

次にpackage.jsonのscriptsを記述します。

  "scripts": {
    "lint": "eslint -c .eslintrc.json **.ts",
    "lint:fix": "eslint -c .eslintrc.json **.ts --fix"
  }

yarn run lint:fixを実行するとimportがアルファベット順に並んでいない場合は自動で修正してくれます。ただ、ファイルを修正するたびにいちいちyarn run lint:fixを実行するのは少し面倒です。 VSCodeのESLint拡張を利用することでファイル保存時にyarn run lint:fixと同様のことを行ってくれます。

ESLint拡張がVSCodeに入っていない場合には拡張の検索からESLintと検索し、インストールしてください。 ESLint拡張の設定は.vscode/settings.jsonに以下のように記述します。

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

これでコード保存時にESLintのautofixが実行され、importをアルファベット順にソートしてくれます。

まとめ

今回はeslint-plugin-importを利用して自動でimportをアルファベット順にソートする方法について書きました。今回のサンプルコードはリポジトリにあるので参考にしてみてください。以上です。

[ESLint] eslint-plugin-importを利用して自動でimportをアルファベット順にソートする

Tags:

eslint-plugin-importの使い方

まとめ

See Also