はじめに
本記事での関心事は、Nuxt × TypeScript環境でESLintとPrettierを使いたいときにどのように設定すべきかという点です。
自分はあれこれ調べて最終的にcreate nuxt-app でよいのでは・・・？という結論になってしまったのでこの記事を見て回り道をする人が少しでも減ってくれたら嬉しいです。
※注意書き
本記事はNuxt 2での設定を想定しています。Vue2とTypeScriptは型推論の問題などであまり相性がよくないのでそこまでメジャーな組み合わせではないと思っています。Vue3に対応したNuxt3のベータ版が最近出ているようですが、この記事はその文脈の記事ではありません。
抑えておきたいこと(eslint-plugin-prettierは使わない)
ESLintは静的解析とフォーマット機能を、Prettierはフォーマット機能を備えていますが、現推奨(2021/12現在)の手法では静的解析はESLint、フォーマッターはPrettierと明確にその役割を分担させる方法がPrettier公式で推奨されています。ESLint経由でPrettierを実行する方法だとエディタに赤い波線が大量に出てしまうなどの問題がありました。このあたりの詳細な解説はojisanさんの記事が非常に参考になると思うのでぜひ見てみてください。
そのため、eslint-config-prettierを用いることでESLint側でPrettierと重複したフォーマットルールを無効化し、Prettierでフォーマット → ESLintで静的解析 のようにそれぞれ別で実行するのが現状ベターかと思われます。
タイトルにあるeslint-plugin-prettierというプラグインはESLintでPrettierを実行できるようにするプラグインなんですが、現状非推奨なため注意が必要です。「eslint prettier」と検索すると少ないですがこのやり方を紹介しているサイトも出てきます。ちなみに「Nuxt TypeScript ESLint Prettier」のように検索するとpluginで併用するやり方を紹介するページが結構出てくるのでまだ広まりきっている情報ではないのかなと思っています。
Nuxt × TypeScript × ESLint × Prettier の環境を整える
2で踏まえたことを前提に環境を整えます。Nuxt公式のインストール方法であるcreate nuxt-appを用いてNuxt環境を作ります。今回はyarnでインストールします。
yarn create nuxt-app <project-name>
インストール時に聞かれる指定項目の要点は以下の二点です。それ以外は自由に設定して問題ありません。複数選択可能な場合はSpaceでチェックを入れられます。
# 実行時に指定する項目
? Programming language: TypeScript
? Linting tools: ESLint, Prettier
これで環境は完成です。
では、.eslintrcを見てみましょう。
// .eslintrc
extends: [
'@nuxtjs/eslint-config-typescript',
'plugin:nuxt/recommended',
'prettier'
],
ESLintのextendsの指定方法では、eslint-config-prettierをprettierと省略して記述することができます。というわけなのでeslint-config-prettierの設定は問題なし。
また、過去のcreate nuxt-appではeslint-plugin-prettierが記述されていた時代もあるようですが、現在は気にする必要もありません。
つまり、そのまま使えるんですね。
まとめ
Nuxt × TypeScriptのESLint, Prettier環境を作ろうとしてあれこれ試行錯誤しましたが結局create nuxt-appの機能で生成してくれる環境で十分という結論に自分は落ち着きました。これ以降の設定としてVSCodeでの動作設定やpackage.jsonに記述するscriptsの設定があると思いますが、そちらは以下のteppeisさんの記事(ESLint, Prettier, VS Code, npm scripts の設定: 2021春)が非常に参考になるのでそちらを見てもらえればと思います。
ここまでお読みいただきありがとうございます。少しでも誰かのお役に立てば幸いです！