はじめに

この記事は次のような方向けの記事となります。
・Nuxt3 でブログを構築したい
・AWSを使ったサーバーレスでのサーバー構築を考えている
・nuxt/content じゃなくヘッドレス CMS を使ってブログ運用をしたい
今回は nuxt3 での開発環境構築になります。

この記事のそもそもの経緯などは以下の記事を読んでください。
Nuxt3 + ヘッドレス CMS のブログをサーバーレスで構築する話 1

概要

この記事ではNuxt3を使うための開発環境構築を行います。
主に、新規プロジェクトの作成、便利ライブラリのインストール設定、Linter、formatterの導入を行います。

プロジェクトの作成

nuxt3 は専用の npm ライブラリを実行すると自動でフォルダを生成してくれます。
project-name に指定した名前がフォルダ名となります。

npx nuxi init <project-name>

$ npx nuxi init <project-name>
Need to install the following packages:
nuxi@3.10.1
Ok to proceed? (y) y

❯ Which package manager would you like to use?
● npm  // npmを使うので選択、ご利用の環境に合わせてください。
○ pnpm
○ yarn
○ bun

npm
◐ Installing dependencies...                                                                                                                                                                               23:27:06

> postinstall
> nuxt prepare

ℹ Compiled plugins/server.mjs in 999.39ms                                                                                                                                                                 23:28:44
ℹ Compiled types/plugins.d.ts in 1032.24ms                                                                                                                                                                23:28:44
ℹ Compiled plugins/client.mjs in 1036.83ms                                                                                                                                                                23:28:44
✔ Types generated in .nuxt                                                                                                                                                                                23:28:44

added 734 packages, and audited 736 packages in 2m

122 packages are looking for funding
  run `npm fund` for details        

found 0 vulnerabilities
✔ Installation completed.                                                                                                                                                                                 23:28:44

❯ Initialize git repository?
○ Yes / ● No // 筆者はすでに作成しているリポジトリに後乗せで反映するためNoにしています。

No
                                                                                                                                                                                                           23:30:23  
✨ Nuxt project has been created with the v3 template. Next steps:
 › cd <project-name>                                                                                                                                                                                        23:30:23  
 › Start development server with npm run dev

処理が終わると「project-name」で指定した名前のフォルダが作成され中には初期状態のコード類が保存されています。
以前は「postinstall」と「nuxt prepare」を実行する必要がったんですがどこかのタイミングでインストール時に一緒にやってくれるようになったみたいです。

生成されたフォルダ内で以下のコマンドを実行すると初期状態でサーバーが起動します。
一度起動して確認してみましょう。

npm run dev

「localhost:3000」へアクセスすると画像のような表示になると思います。

便利ライブラリのインストール

Nuxt3を使う上で便利となるライブラリをインストールします。
以下がインストールするものの一覧です。
・sass：Nuxt3でscssを有効にするために利用

npm install --save-dev sass

拡張機能の設定

開発する際にあったほうがよい拡張機能をインストールします。

Nuxt3用の拡張機能

公式ドキュメントで紹介している拡張機能をインストールします。
以前は「Volar」という物だったのですが、以下に変わったようです。
https://marketplace.visualstudio.com/items?itemName=Vue.volar
※リンクはvolarを使ってる模様。。。

eslint用の拡張機能

以下の拡張機能をインストールします。
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

stylelint用の拡張機能

以下の拡張機能をインストールします。
https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

prettier、eslint、stylelint の設定

Nuxt3の公式でeslintの設定があったのでそちらを参考に進めていきます。
ドキュメント見る限り以下の順番の設定が良さそうなので以下で進めていきます。
また設定値は初期実装時の簡易なものにしているため、実装を進めながら都度設定を変えることになります。
１．eslint：Linterとして利用
２．prettier：formatterとして利用
３．stylelint：styleのLinterとして利用

eslintの設定

Nuxt3の公式ドキュメントに沿って実装を行います。
Code Style

ライブラリのインストール

npm install --save-dev eslint @nuxt/eslint-config

configファイルの作成

「.eslintrc.cjs」をNuxt アプリのルートフォルダーに新規作成します。

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

package.jsonを編集

scriptを追記し、lintがscriptで動くようにします。

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

vs code用のconfig設定

これも公式ドキュメントに沿って設定します。
windowsの場合は「ctl+shift+p」、macの場合は「cmd+shift+p」を押しコマンドパレットを開きます。
コマンドパレットに「open workdspace settings」と入力すると
「基本設定: ワークスペース設定を開く（JSON）」が出てくるので開いて以下を追記してください。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

この状態でapp.vueで実際に動くか試してみましょう。
以下のコードの通りにすると8行目の「lel test = "1"」の部分でエラーが発生するはずです。

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<script setup lang="ts">
let test = "1"
</script>

この状態で保存を実行し「const test = "1"」に書き換わったら設定はうまくできています。

prettier

ライブラリのインストール

npm install --save-dev eslint-plugin-prettier

eslintrc.cjsの編集

先ほど作成したconfigファイルに加筆することでprettierを有効にします。

module.exports = {
  root: true,
 + extends: ['@nuxt/eslint-config', 'plugin:prettier/recommended'],
};

.prettierrcの作成

筆者は文字列をダブルクォートではなくシングルクォートで囲うようにしたいので設定を変更するファイルを作成します。
「.prettierrc」をNuxt アプリのルートフォルダーに新規作成します。

{
  "semi": false, // セミコロンはいらない
  "singleQuote": true // 文字列はシングルクォートにする
}

これで設定は終わりです、この状態で先ほどの「app.vue」で実際に動くか試してみましょう。

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<script setup lang="ts">
const test = "1" // ここが直る
</script>

この状態で保存を実行し「const test = '1'」に書き換わったら設定はうまくできています。
※たまに設定の反映が出来ていない時があるので動かない場合はvs codeを再起動してみるよ良いです。

stylelint

Nuxt3の公式moduleにstylelintがあったのでこちらで設定してみます。

ライブラリのインストール

npm install --save-dev stylelint @nuxtjs/stylelint-module postcss-html stylelint-config-recess-order stylelint-config-recommended stylelint-config-recommended-scss

nuxt.config.jsにmodulesとして設定

export default {
+  modules: [
+     '@nuxtjs/stylelint-module'
+ ]
}

※この状態でサーバーを起動するとconfigファイルがないとエラーが発生しますが、次で作成するので大丈夫です。

stylelint用のconfigを作成

「.stylelintrc.json」をNuxt アプリのルートフォルダーに新規作成します。
Unknown word CssSyntaxErrorのエラーがでるのでoverridesを追加することで対応しています。

{
  "rules": {},
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-recommended-scss",
    "stylelint-config-recess-order" // cssの並び替えを行う
  ],
  "overrides": [
    {
      "files": ["**/*.vue"],
      "customSyntax": "postcss-html"
    }
  ]
}

vs code用のconfig設定

editorに警告を出すために設定を修正します。
修正まですることができるのですが、prettierの自動整形と干渉して重くなるためstylelintのほうは有効にしません。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
+  "stylelint.validate": ["css", "scss", "vue"]
}

これで設定は終わりです。
以下のようにapp.vueを変更し保存してみましょう
エラーが出ていれば正常に動いています。

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<script setup lang="ts">
const test = '1';
</script>

<style lang="scss" scoped>
.sample {
  color: #ffffff;
  background-color: #aaa;
}

.sample { // ここでエラーが出ているはず
  background-color: #aaa;
  color: #ffffff; // ここでエラーが出ているはず
  opacity: 0.5;
}
</style>

ついでにpackage.jsonにscriptを追加しておきます。

  "scripts": {
    ...
+    "lint:style": "stylelint '**/*.{vue,scss}'",
+    "lint:style:fix": "stylelint '**/*.{vue,scss}' --fix"
    ...
  },

これでlint、formatterの設定は終わりです。
細かい設定はコーディングしていきながら調整していきましょう

husky 、 lint-staged の設定

git commit時にlintでのチェックをするようにします。
チェックをすることで品質担保に使えます。

node_module のインストール
必要な node_module をインストールします。

npm install --save-dev husky lint-staged

script の追加
lintとhusky を利用する際に必要な script を定義します。
またhuskyについては定義後は一度 script を実行します。
※一度実行すると定義ファイルが作成されます。

  "scripts": {
    ...
+     "husky:init": "husky",
+     "lint-staged": "lint-staged"
    ...
  },

定義後に以下を実行
※git 管理をしていない場合エラーになります。

npm run husky:init

「.husky」のフォルダが表示されたら処理が成功しています。

「pre-commit」の作成
git commit 時に指定の処理を実行するようファイルを作成します。
今回は commit 直前に実行するため「pre-commit」となります。

ファイルは「.husky/pre-commit」で作成し以下を記述し保存します。

#!/usr/bin/env sh
npm run lint-staged

lint-staged の定義を追加
今の状態だと「git commit 時に lint-staged を実行する」までは出来る状態になりました。
ですが、「どのファイルを対象に」という定義がまだ出来ていないので追記します。
追記するファイルは「package.json」で、以下の内容を追記してください。
※commit 対象のファイルに対してどのファイルを対象にするか定義されます。

{
+  "lint-staged": {
+    "*.{js,ts,vue}": "eslint --cache", // 拡張子が「js,ts,vue」のファイルに対してeslintを実行
+    "*.{css,scss,sass,html,vue}": "stylelint", // 拡張子が「css,scss,sass,html,vue」のファイルに対してstylelintを実行
+    "*.**": "prettier --check --ignore-unknown" // 全てのファイルに対してprettierの実行
+  }
}

おわり

以上でローカル環境での開発環境構築は終わりです。
各種config情報は更新があった場合は追記するようにします。
これについてはブログ関係なくNuxt3のプロジェクトであれば使える設定かと思います。

次は実際に AWS 環境周りの設定をしようと思います。
次の記事（執筆中。。。）

お知らせ