Prettierを使ってSvelteKitプロジェクトのimportの順番をソートする

はじめに

SvelteKitを使ったプロジェクトをチームで開発しているとモジュールをimportする場合において、どの順番に並んでる方が可読性が高いか考えることもあると思います。
しかし、どの順番がいいかは個人の感覚になってしまいますし、毎回手動で並び替えるのはしんどいので、Prettierを使ってimportの順番をソートしてみました。

インストール

Prettierを使ってimportの順番をソートするにはpluginを使用する必要があります。いくつかpluginはあると思いますが、今回は@trivago/prettier-plugin-sort-importsを使用します。

npm install --save-dev @trivago/prettier-plugin-sort-imports

設定

いくつか設定がありますが、多くの方が使いそうなオプション2つを紹介します。
その他のオプションはこちらで確認してください。

importOrder

importOrderに並び替えしたい順番にファイルパスを列挙していきます。

サードパーティモジュールのimportを並び替えたいなら<THIRD_PARTY_MODULES>を使用すると好きな位置に並び替えできます。

{
  "importOrder": [
    "^(svelte/(.*)$)|^(svelte$)",
    "^(@sveltejs/(.*)$)|^(@sveltejs/kit$)",
    "<THIRD_PARTY_MODULES>",
    "^\\$app/(.*)$",
    "^\\$env/(.*)$",
    "^\\$service-worker",
    "^\\$lib/(.*)$",
    "^[./]",
  ]
}

以下のようにソートされます。

<script>
 import { onMount } from 'svelte';
 import { fade } from 'svelte/transition';
 import { error } from '@sveltejs/kit';
 import Button from '@smui/button';
 import { browser } from '$app/environment';
 import { PUBLIC_BASE_URL } from '$env/static/public';
 import { build } from '$service-worker';
 import Modal from '$lib/components/Modal.svelte';
 import Header from './layout/Header.svelte';
</script>

importOrderSeparation

ソートされたモジュールのグループ毎に改行をいれて区切るかどうかを指定できます。

{
  "importOrderSeparation": true,
}

以下のように改行されます。

<script>
 import { onMount } from 'svelte';
 import { fade } from 'svelte/transition';

 import Button from '@smui/button';

 import Modal from '$lib/components/Modal.svelte';
 import Header from '$lib/components/Header.svelte';
 import Footer from '$lib/components/Footer.svelte';
</script>

SvelteKitのデフォルト設定に対して設定する

SvelteKitの雛形を作った際に自動で作られる.prettierrcに対する設定を紹介します。

npm create svelte@latest my-app

.prettierrc

{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 100,
	"plugins": ["prettier-plugin-svelte", "@trivago/prettier-plugin-sort-imports"],
	"pluginSearchDirs": ["."],
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
	"importOrder": [
		"^(svelte/(.*)$)|^(svelte$)",
		"^(@sveltejs/(.*)$)|^(@sveltejs/kit$)",
		"<THIRD_PARTY_MODULES>",
		"^\\$app/(.*)$",
		"^\\$env/(.*)$",
		"^\\$service-worker",
		"^\\$lib/(.*)$",
		"^[./]"
	],
    "importOrderSeparation": true
}

さいごに

これで設定完了です！ SvelteKitを使ってチーム開発する場合に是非、検討してみてください！