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

この記事はVue のカレンダー | Advent Calendar 2021 - Qiitaの 25 日目です。

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

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

<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

使う場合は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 のプロパティを検知することができます。

↑こんな感じになります

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.

まずはインストール。

// 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'],
      }
    ]
  }
}

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

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