Vue.jsで書かれたコードから未使用のimportを自動削除する

Vue.jsで書かれたコードから未使用のimportを自動削除する方法をまとめました。
下記の手順で実現できました。

1. ESLintをインストールする
2. ESLintのプラグインをインストールする
3. ESLintの設定を変更する
4. VSCodeでの自動修正の設定を追加する

1. ESLintをインストールする

npm install --save-dev eslint

2. ESLintのプラグインをインストールする

下記2つが必要です。

• eslint-plugin-vue
• eslint-plugin-unused-imports

2-1. eslint-plugin-vue

Vue.js用のプラグインです。

npm install --save-dev eslint-plugin-vue

2-2. eslint-plugin-unused-imports

未使用のimportを削除してくれるプラグインです。この記事の主人公です。

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

3. ESLintの設定を変更する

先ほどインストールしたプラグインを追加します。

.eslintrc.json

{
  "extends": [
    "plugin:vue/vue3-essential"
  ],
  "plugins": ["unused-imports"],
  "rules": {
    "unused-imports/no-unused-imports": "error"
  }
}

4. VSCodeでの自動修正の設定を追加する

ファイル保存時、ESLintによる修正を実行する設定を追加します。

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}