Svelte for VS Codeを使ってSvelteファイルのimportを最適化する方法

モチベーション

• 適切な順番にimport文を並び替えてほしい
• 未使用のimport文を自動で消してほしい
• 同じリソース元から複数のimport文を書いてしまってる場合に自動的に最適化してほしい。

手順

Svelte for VS CodeをVS Codeにインストールする

ソートしてほしい場合(未使用のimport文もソートされるが、削除はされない)

.vscode/settings.jsonを編集する

.vscode/settings.json

{
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode",
    "editor.codeActionsOnSave": ["source.sortImports"]
  }
}

フォーマットしたい.svelteファイルを保存する

実行前

<script>
  import { PUBLIC_URL } from '$env/static/public';
  import { browser } from '$app/environment';
  import { Breadcrumbs } from '@ui';
  import { error } from '@sveltejs/kit';
  import { onMount } from 'svelte';
  import { Footer } from '@ui';
  import { fade } from 'svelte/transition';
  import '../app.css';
  import Banner from '$lib/components/Banner.svelte';
</script>

実行後

<script>
  import { onMount } from 'svelte';
  import { fade } from 'svelte/transition';
  import { error } from '@sveltejs/kit';
  import { Breadcrumbs, Footer } from '@ui';
  import { browser } from '$app/environment';
  import { PUBLIC_URL } from '$env/static/public';
  import Banner from '$lib/components/Banner.svelte';
  import '../app.css';
</script>

ソートかつ、未使用のものは削除したい場合

.vscode/settings.jsonを編集する

.vscode/settings.json

{
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode",
    "editor.codeActionsOnSave": ["source.organizeImports"]
  }
}

フォーマットしたい.svelteファイルを保存する

実行前

<script>
  import { onMount } from 'svelte';
  import { fade } from 'svelte/transition'; // 未使用
  import { error } from '@sveltejs/kit';
  import { Breadcrumbs, Footer } from '@ui'; // Breadcrumbsは未使用
  import { browser } from '$app/environment';
  import { PUBLIC_URL } from '$env/static/public';
  import Banner from '$lib/components/Banner.svelte'; // 未使用
  import '../app.css';
</script>

実行後

<script>
  import { onMount } from 'svelte';
  import { error } from '@sveltejs/kit';
  import { Footer } from '@ui';
  import { browser } from '$app/environment';
  import { PUBLIC_URL } from '$env/static/public';
  import '../app.css';
</script>