2024年03月17日
.jpg)
はじめに
この記事は次のような方向けの記事となります。
・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 環境周りの設定をしようと思います。
次の記事（執筆中。。。）