⚡️
Nest.jsにおいて、import順をPrettierで常に同じルールで並ぶようにする
背景
Nest.jsにて、とあるファイルを見て何がimportされているのかを一目見て把握できるようにしたいです。
基本的にNest.jsというフレームワークにおいては、先頭にnestjs/*の何かが来てくれる方がわかりやすいです。
これを実現するために、Nest.jsにデフォルトで導入されているPrettierの設定をいじってimport文を保存時に自動で並び替えます。
なお、この記事ではNest.js前提になっていますが、ReactやVueでも同じように使うことができます。
プラグインの導入
prettier-plugin-sort-importsというPrettierのプラグインを使って先の設定をします。
プラグインの導入
npm install --save-dev @trivago/prettier-plugin-sort-imports
詳しいオプションなどは本家リポジトリのREADME.mdをご参照ください。
Nest.jsにおける設定例
.prettierrc
{
"singleQuote": true,
"trailingComma": "all",
"plugins": ["@trivago/prettier-plugin-sort-imports"],
"importOrder": [
"^@nestjs/(.*)$",
"^なにかしらライブラリ/(.*)$",
"^[@/]",
"^[./]",
"(.*)"
],
"importOrderSortSpecifiers": true,
"importOrderParserPlugins": ["typescript", "decorators-legacy"]
}
ポイントは以下の点です。
plugins
インストールした@trivago/prettier-plugin-sort-importsを追記します
importOrder
- 並べたい順番を正規表現パターンマッチで記述します
- 今回は、
nestjsパッケージ→なにかしらのライブラリ→@/で記載されたパス→./の相対パスで記載されたパス→その他 という順番にします
importOrderSortSpecifiers
このオプションを有効にすると、importグループ内の並びもアルファベット順にソートしてくれます。
importOrderParserPlugins
このオプションを指定しない場合、以下のエラーが発生しフォーマットエラーとなります。
おわりに
フロント・バックエンドに限らず、周辺知識も含めてTypeScriptの勉強会を主催しています。
毎朝オフラインでもくもくしたり、神戸を中心に関西でLTもしています。
盛り上がってる感を出していきたいので、良ければメンバーにだけでもなってください😣
Discussion