Nuxt3環境でのコードチェック及び、コードフォーマットの設定

初めに

Vue3 + Nuxt3 + TypeScript の環境でコードチェッカー&フォーマッターを導入しようとして、vue3 コードフォーマット的な形でVue3上でのコードフォーマットのやり方を調べていたら、ESLint 実行時にエラーが発生したりとハマってしまったのですが、nuxt/eslint-configを使用してコードチェック及び、コードフォーマットの設定ができましたので、その方法をまとめてみました。

とはいえ、ほぼNuxt3用のeslint-configの手順通りに進めているだけではありますが...。

環境

Nuxt3公式のインストール手順に沿って構築した環境で実施しました。

ESLintのインストール

# ESLintインストール
yarn add -D @nuxt/eslint-config eslint

# TypeScriptを使用するのでこちらもインストール
yarn add -D @nuxtjs/eslint-config-typescript

プロジェクトのルートに以下の内容の.eslintrc.ymlを作成する。

root: 
  true
extends: 
  - "@nuxtjs/eslint-config-typescript"

ESLint実行スクリプトの設定

package.jsonに以下を追加する。

{
  "scripts": {
    "lint": "eslint ."
  }
}

例 app.vueの<NuxtWelcome />を<NuxtWelcome/>で保存していて、yarn lintを実行した場合

$ yarn lint
yarn run v1.22.19
$ eslint .

/nuxt3-eslint/app.vue
  3:17  warning  Expected a space before '/>', but not found  vue/html-closing-bracket-spacing

✖ 1 problem (0 errors, 1 warning)
  0 errors and 1 warning potentially fixable with the `--fix` option.

yarn lint実行時に警告箇所を自動修正したい場合はeslintに--fixオプションを付けて実行する。

{
  "scripts": {
    "lint": "eslint --fix ."
  }
}

チェック対象のディレクトリとファイル形式(ts,vueの場合)を指定する場合の設定は以下

{
  "scripts": {
    "lint": "eslint 'src/**/*.{ts,vue}'"
  }
}

/src/pages/index.vue, /src/pages/sample/index.vue及び、src/utils/hoge.tsを作成(違反しているコードで)した場合の実行結果

$ yarn lint
yarn run v1.22.19
$ eslint 'src/**/*.{ts,vue}'

/nuxt3-eslint/src/pages/index.vue
  2:21  error  Strings must use singlequote  quotes

/nuxt3-eslint/src/pages/sample/index.vue
  2:21  error  Strings must use singlequote  quotes

/nuxt3-eslint/src/utils/hoge.ts
  2:9  error  'hoge' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 3 problems (3 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

VSCodeでコード保存時に自動修正を行う設定

1. VSCodeのマーケットプレースで拡張機能のESLintをインストールする。
2. VSCodeのsettings.jsonに以下内容を追加する

# settings.json
{
    ...,
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true
    }
}

これで、コード保存時にチェックに引っかかる箇所があれば自動修正されて保存されるようになります。(const hoge = "hoge" が const hoge = 'hoge'で修正される)
ただし、一部の違反に関しては自動修正されないので自分で修正する必要があります。(参照されていない変数の違反等)

最後に

いかがでしたでしょうか。

この手の設定は何度も行わなかったり、他の方が設定してくれる等で触る機会も少ないので勉強になりました。