Nuxt.jsで導入している@nuxtjs/eslint-config-typescriptでno-useless-constructorエラーが表示される。

NuxtTypeScriptの公式で紹介されている方法では、Eslintの設定に@nuxtjs/eslint-config-typescriptを利用しています。普段一緒に開発しているメンバーから、“no-useless-constructor”というエラーが表示されるんだけど、単純に“no-useless-constructor”のルールを無効にするでいいんですか？という感じの話題になったので、そのときに少し調べた内容をまとめておきたいと思います。

no-useless-constructorルールとは

Class 構文において、コンストラクタ省略時と同じ動作しかしないコンストラクタを警告するルールです。書いても書かなくても同じなため、無駄なコードは書かないでね！という警告です。

どんな状況で発生したのか？

今回は、下記のようなコードを記載していました。Chart.jsというライブラリのツールチップの情報を取るためのヘルパークラスです。

import { ChartData, ChartTooltipItem } from 'chart.js'

export type TooltipDispItem = {
  title: string
  data: number
}

export type TooltipDispModel = {
  title: string
  data: TooltipDispItem[]
}

export class TooltipHelper {
  constructor (private chartData: ChartData) {}

  public getTooltiDispModel (tooltipItem: ChartTooltipItem) {
    const tooltipDispItems = []

    const datasets = this.chartData.datasets!
    for (let index = 0; index < datasets.length; index++) {
      const dataset = datasets[index]
      const tooltipDispItem = {
        title: dataset.label!,
        data: dataset.data![tooltipItem.index!] as number
      }
      tooltipDispItems.push(tooltipDispItem)
    }

    return {
      title: tooltipItem.xLabel,
      data: tooltipDispItems
    }
  }
}

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended'
  ],
  // add your custom rules here
  rules: {
    'semi': [2, 'never'],
    'indent': ["error", 2],
    'no-undef': 'warn'
  }
}

このクラスでは、プライベートプロパティを初期化しているのですが、このコンストラクタが何もしていないため、エラーが吐かれています。実装を確認して見ると、基本的には、@typescript-eslintをベースにしているので、こちらも確認してみます。

@nuxtjs/eslint-config-typescriptって何者？

index.tsファイルを見ると下記のような感じで、@typescript-eslintをベースにしています。

--module.exports = {
    extends: [
      '@nuxtjs'
    ],
    plugins: ['@typescript-eslint'],
    parserOptions: {
      parser: '@typescript-eslint/parser'
    },
    rules: {
      '@typescript-eslint/no-unused-vars': ['error', { args: 'all', argsIgnorePattern: '^_' }]
    }
  }

@typescript-eslintは、ESLintのTypeScript固有のルールです。どうも挙動だけ見るとバグのように見えます。issuesも上がっているようなので、今回はここまで調べて、結局eslintのルールを下記のようにして、運用することとしました。

rules {
'no-useless-constructor': 'off'
}

おわりに

今回は、メンバーと一緒にデバッグしました。一緒にデバッグすると新たな発見やメンバーの癖などもあり面白いなと感じました。