vue/no-unused-propertiesとeslint-plugin-unused-importsで使っていないプロパティやimport文を自動で検出する

この記事は[Vue のカレンダー \| Advent Calendar 2021 \- Qiita](https://qiita.com/advent-calendar/2021/vue)の 25 日目です。

## 使っていないプロパティを検出してエラーにしたい

Vue の SFC で書いているコードをリファクタリングする際に、使っていないプロパティがあったということはないでしょうか。

```.vue
<template>
  <article>
    <h1>
      {{ title }}
    </h1>
    <div class="content">
      {{ content }}
    <div>
  </article>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import { useArticle } from '~/composable/articles'

export default defineComponent({
  setup() {
    const { title, subtitle, content, fetchArticle } = useArtilce()
    return {
      title,
      subtitle,
      content,
      fetchArticle
    }
  }
})
</script>
```

上記の例だと、setup で定義された`subtitle`と`fetchArticle`が return されているにも関わらず template 上で使われていません。

こういった「定義したけど実は使われていなかった」というコード、開発が進みプロダクトのコード量が増えていくと意外とあったりすると思います。

ただ、こういったコードを目視ですべて確認して消していくというのは骨が折れますよね。できれば自動でなんとかしたい。

そこで、eslint-plugin-vue の`vue/no-unused-properties`を使います。

[vue/no\-unused\-properties \| eslint\-plugin\-vue](https://eslint.vuejs.org/rules/no-unused-properties.html)

使う場合は`eslint-plugin-vue`(または`eslint-plugin-nuxt`)を事前にインストールしておきます。

そして手元の ESLint の設定を追加します。以下は`.eslintrc.js`の場合です。

```.eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/recommended'
    // eslint-plugin-nuxtを使ってる場合は↓
    // 'plugin:nuxt/recommended'
  ],
  rules: {
    'vue/no-unused-properties': [
      'error',
      {
        groups: ['props', 'data', 'computed', 'methods', 'setup'],
      }
    ]
  }
}
```

こうすることで、setup で return しても使っていないプロパティや、定義されているけど使われていない props、Options API で定義したけど使っていない data や computed や methods のプロパティを検知することができます。

![スクリーンショット 2021-12-25 17.33.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111478/2141fd97-fcb2-6cba-4b5f-df975e092f5c.png)

![スクリーンショット 2021-12-25 17.34.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111478/72df9719-0cd8-e9f0-333a-922daac5330e.png)

↑こんな感じになります

Composition API でも Options API でも利用できるのがいいですね。

`'error'`だと CI が落ちたりして直すまで大変なことになる、などの場合は、`'warn'`から導入して徐々に減らしていくというのもいいと思います。

## 使っていないimport文も検出してエラーにしたい

使っていないプロパティの他に、使っていない import も検知したいと思います。

これには、`eslint-plugin-unused-imports`を使います。

[sweepline/eslint\-plugin\-unused\-imports: Package to seperate no\-unused\-vars and no\-unused\-imports for eslint as well as providing an autofixer for the latter\.](https://github.com/sweepline/eslint-plugin-unused-imports)

まずはインストール。

```
// npm
npm i -D eslint-plugin-unused-imports

or

// yarn
yarn add -D eslint-plugin-unused-imports
```

@typescript-eslint で使う場合は、さらに以下のパッケージもインストールします。

```
// npm
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

or

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

そして、ESLint の設定に以下を追加します。

```.eslintrc.js
module.exports = {
  plugins: ['unused-imports']
}
```

これだけで、「import したけど使われていない」行に警告を出してくれます。

ただし、`no-unused-vars`と警告が被るため、これを避けたい場合は`no-unused-vars`を無効にします。

```.eslintrc.js
module.exports = {
  plugins: ['unused-imports'],
  rules: {
    'no-unused-vars': 'off',
    // @typescript-eslintの場合は↓
    // '@typescript-eslint/no-unused-vars': 'off',
    'unused-imports/no-unused-imports': 'error'
  }
}
```

こちらも、`'error'`か`'warn'`かを状況に応じて変更すると快適になると思います。

## 追加した設定まとめ

```.eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/recommended'
    // eslint-plugin-nuxtを使ってる場合は↓
    // 'plugin:nuxt/recommended'
  ],
  plugins: ['unused-imports'],
  rules: {
    'no-unused-vars': 'off',
    // @typescript-eslintの場合は↓
    // '@typescript-eslint/no-unused-vars': 'off',
    'unused-imports/no-unused-imports': 'error'
    'vue/no-unused-properties': [
      'error',
      {
        groups: ['props', 'data', 'computed', 'methods', 'setup'],
      }
    ]
  }
}
```

紹介した二つをまとめるとこのような感じになると思います。

比較的簡単に設定できるわりには開発体験が快適になる、いわゆる「コスパのいい」設定かなと思いますので、ぜひ試してみてください。