4-1 リンターの導入

今回は、リンターとしてESLintを使用する。
現状、フロントエンドのリンターとしては、このESLintが一強状態なので他のものを使うことはほぼないと考えて良い。

4-1-1 ESLintについて

ESLintは、コードの静的解析を行うためのものである。
静的解析とはコードを実行する前に

正しい構文で書かれているか？
規定のフォーマットに従っているか？
危ない構文を使用していないか？

などをチェックするためのものである。

ESLintでは、フロントエンドのコードが、色々な言語(JavaScript, HTML, CSS, TypeScriptなど)を介しているため、他の静的解析ツールをプラグインとして扱えるようにしている。

今回はこれを、コード変更時(ビルドサービスを立ち上げているときのみ)に実行し、継続的にコードが健全に保たれるような仕組みを作る。

4-1-2 パッケージのインストール

ESLintの導入のために以下のコマンドを実行し、パッケージのインストールを行う。

yarn add -D \
eslint \
prettier \
eslint-plugin-prettier \
eslint-plugin-typescript \
eslint-plugin-vue \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
@vue/cli-plugin-eslint@next \
@vue/eslint-config-typescript \
@vue/eslint-config-prettier

インストールするにあたって、ある程度の概要を以下にまとめる。

• eslint

静的解析ツール。今回、メインとして使用するもの。

• prettier

コードフォーマッタ。文字列の定義に'(シングルクォート)を使用する。だったり、文の最後の;(セミコロン)を省略するなどの、機能とあまりな関係ない部分の補正及び修正案を出してくれる解析ツール。

• eslint-plugin-**及び@typescript-eslint/**

ESLintのプラグイン。今回はVue・TypeScript・prettierのプラグインをインストールしている

• @typescript-eslint/**

ESLintのTypeScriptプラグインの設定ファイルパッケージ

• @vue/cli-plugin-eslint

vue-cliとESLintをつなげるためのプラグイン

4-2 ESLintの設定

4-2-1 vue.config.ts

今回、vue.config.tsを使用して、ビルドサービスを立ち上げている状態で、コードに変更があった時、リンターが実行されるようにする。

設定は以下の通り

import { ProjectOptions } from '@vue/cli-service'

/**
 * @type { ProjectOptions }
 */
const config: ProjectOptions = {
  lintOnSave: true
}

export default config

これで、コード変更時にESLintが実行される。

4-2-2 .eslintrc.js

この状態では、ESLintは起動されるが、リントの内容が決まっていないため、プロジェクトのルートに以下のファイルを配置することで、ESLintの設定を行う。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-unused-components': 'off'
  }
}

上記ファイルの細かい設定は、ドキュメントなどで把握してほしい。
また、Prettierに関しては別で設定を行わなければならないので、別途下記で設定ファイルを配置している。

4-2-3 .prettierrc.js

次にprettierの設定を行う。
プロジェクトのルートに以下のファイルをおいた。

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  singleQuote: true,
  semi: false,
  trailingComma: 'none',
  bracketSpacing: true,
  arrowParens: 'always'
}

4-3 作成済みのソースコードの修正について

この記事で使われているファイルと全く同じファイルを使用している場合、このリントによって、エラーが発生するはずである。

発生場所はsrc/vue-shims.d.tsである。

しかし、このファイルは型定義のファイルであるため、リントは必要がない。

以下のようにすることで、コードをリントの対象から外すことができる

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
/* eslint-enable */