Nuxt3入門 ~周辺環境を整える~ #Vue.js

はじめに

Nuxt3を触ろうと思い、その内容をまとめていきます。
今回は下記ツールのインストールの手順についてまとめます。

前回のNuxt3のインストールの方法についてまとめた記事はこちらです。

Nuxt3ではTypeScriptがデフォルトでサポートされています。
CLIで型チェックを行うことができます。

npx nuxi typecheck

しかし、デフォルトの設定では、nuxt devなどの開発環境を立ち上げている時には型チェックされません(buildの速度などを優先している)

開発中に型チェックを行いたい場合は、設定を変更することで実現できます。

pnpm install typescript vue-tsc --save-dev

nuxt.config.ts

export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})

これにより、開発環境を立ち上げ、buildされた時も型チェックがされるようになります。
(当然ながらbuildのスピードが落ちるので、offにして適宜CLIで実行するか、どっちかは好みで決めるのが良いと思います)

ESLintの設定については、パッケージをインストールすることで可能です。

pnpm i eslint @nuxtjs/eslint-config-typescript --save-dev

.eslintrc.cjs

module.exports = {
  root: true,
  extends: ['@nuxtjs/eslint-config-typescript']
}

VSCodeを利用している場合は、ESLintの拡張機能を使って、保存時に自動でフォーマットされるように設定しておくとよさそうです。

.vscode/settings.json

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

なお、Nuxt3では、Prettier との並行の利用は現時点では推奨していないようです。

ESLintの--fixオプションを使うようにして、プロジェクトではPrettierを無効にするように記載されています。
(Prettierを有効にするかどうかについても、議論中のようです。あまり動いていない気もしますが...)

段々周辺環境が整ってきました。
TailwindCSS、Storybookの導入部分を次は試して、次記事にまとめられたらと思います。