Next.js13.4から正式実装になったApp Routerを使うためのメモ。
第二回は開発環境の構築。
エディターはVSCode。
各種linterを追加し、VSCodeの設定をする。
Tailwind CSSとEslint
Next.js13.4をインストールしたときにインストールしていれば、Tailwind CSSとEslintはインストールされている。
以下は公式サイト。
Sassのインストール
#sassインストール npm install -D sass
Tailwind CSSは便利だけど、全てのCSSをかけるわけではないというのが導入の理由の一つ。
もう一つの理由は、プレーンのCSSはかなり書きやすくなったけど、それでもまだScssの記法のほうが便利だからというもの。
別に無くても問題はないが、ブログ機能などで、マークダウンファイルを使う時に、Tailwind CSSだけではキツイので使うことが多い。
prettierのインストール
コードを規則にそって整形してくれるコードフォーマッターにprettierを使う。
VSCodeでも設定をして、ファイルを保存すると自動で整形されるようにする（後述）。
# prettier => 本体 # prettier-plugin-tailwindcss => クラス名を規定のルールで並び変えてくれる # eslint-config-prettier => eslintとprettierで競合するルールはprettierを優先するためのeslint設定 npm install -D prettier prettier-plugin-tailwindcss eslint-config-prettier
Tailwind CSSの並びを人力に頼るとすぐにめちゃくちゃになるので、ここでもツールの力を借りる。
prettier-plugin-tailwindcssはTailwind公式が出している。
対応はTailwind CSS v3.0+ 用の Prettier v3+。
v0.5.xからはPrettier v3が必要で、ESM対応のみになる。
prettier.config.jsを作り以下を記述。
// prettier.config.js
module.exports = {
plugins: ["prettier-plugin-tailwindcss"],
};
eslint-config-prettierはeslintとprettierで競合するルールの場合、prettierを優先したいので、それをしてくれるプラグイン。
以下のように、.eslintrc.jsonに設定を追加する。
//.eslintrc.json
{
"extends": ["next/core-web-vitals", "prettier"]
}
VSCodeの設定はeslintなども合わせて後述する。
stylelintのインストール
# stylelint => 本体 # stylelint-config-standard-scss => 基本ルールのscss拡張バージョン # stylelint-config-prettier-scss => 競合するルールはprettierを優先する # stylelint-config-recess-order => Scssのプロパティを自動的に並び変えする npm install -D stylelint stylelint-config-prettier-scss stylelint-config-standard-scss stylelint-config-recess-order
stylelintはルールの拡張がたくさんあるので、どれを使うのか迷うが、ここでは基本的なものだけインストールしている。
Scssを使うため、基本ルールのscss拡張バージョンを採用している。さらに競合ルールのprettier優先、自動並び変えを追加している。
各種設定を有効にするために、.stylelintrc.jsonを作り設定を追加する。
extendのルールは後ろのものが優先なので、stylelint-config-prettier-scssは最後。
また、Tailwind CSSの@applyに警告が出ないように除外ルールも記載する。
//.stylelintrc.json
{
"extends": [
"stylelint-config-standard-scss",
"stylelint-config-recess-order",
"stylelint-config-prettier-scss"
],
"rules": {
"scss/at-rule-no-unknown": [
true,
{
"ignoreAtRules": ["apply", "layer", "responsive", "screen", "tailwind"]
}
]
}
}
VSCodeの拡張機能を追加
Tailwind CSS IntelliSense
オートコンプリートとかしてくれる。
マウスオーバーするとTailwindのクラスがプレーンのCSSで何を設定しているのかもわかる。
Prettier
VSCode上でprettierを使うための拡張機能。
settings.jsonでprettierをデフォルトに設定し、保存したときに整形が実行されるようにすると便利。
eslint
VSCodeでeslintを使うための拡張機能。
stylelint
VSCode上でstylelintを使うための拡張機能。
settings.jsonに追加
複数の言語を使う場合、各ワークスペースごとに追加の設定ができる。
VSCodeの左下の歯車（管理）⇒ 設定 ⇒ タブのワークスペースを選択 ⇒ 右上アイコン（設定jsonを開く）とすると、プロジェクト直下に.vscodeフォルダができて、その中にワークスペース用のsettings.jsonができる。ここに追加することで、メインの設定にワークスペース専用の設定を追加できる。
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"eslint.validate": [
"html",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"css.validate": false,
"scss.validate": false,
"stylelint.enable": true,
"stylelint.validate": ["css", "scss"]
}
デフォルトのフォーマッターをprettierにし、保存したときに自動で整形が実行されるようにしている。
v2までのprettierはマークダウンファイルを整形すると、全角日本語と半角英数字の間に不自然にスペースが入る謎の仕様だったのでマークダウンファイルは自動整形から外していたのだけど、v3で解消されていた。嬉しい。
eslintとstylelintの整形もファイル保存時に実行される。
VSCodeのデフォルトチェック機能はfalseにして、eslintではhtml、js、ts、jsx、tsxを、stylelintではcssとscssを対象範囲にしている。
これでファイルを保存したときにルール通りに整形される。
scssとか、プロパティの順番を適当に書いても、ファイルを保存すれば自動で並び変えられるの、ほんと便利。
まとめ
linterは便利なので、もうこれがないとVSCode使えないぐらいにはお世話になっている。
複数の人間が関わる場合、いくらルールを決めたって手動ではどこかで限界がくるので、linterは本当に素晴らしいと思う。
linterのめんどくささは設定。
とりあえず満足する環境を作るのに時間がかかるのが辛いところ。
ある程度テンプレートみたいなのを作っておくと楽だけど、各種linterはどんどんアップグレードされていくので、それはそれで難しい。
適宜アップデートしていくしかないかと。
