Next.js+Tailwind CSS+Sass+Eslint+Prettier+StylelintでVSCodeの環境構築
完成品はGitHubにあります。
エディターはVSCodeを使っています。
Next.jsのインストール
npx create-next-app@latest --ts
create-next-appをTypeScriptで作成します。
srcフォルダ作成
規模が小さいうちはあまり関係ありませんが、ファイルが増えてくるとソースコードが1つのフォルダにまとまっていたほうがわかりやすいので、srcフォルダを作ります。
djangoでプロジェクトを作る時など、他の言語でもsrcフォルダにすることが多いので、慣れているからというのもあります。
Eslintのコマンドなどを使う場合は、srcフォルダが動作対象になるように変更します。
├── src
│ ├── pages
│ │ ├── _app.tsx
│ │ ├── api
│ │ │ └── hello.ts
│ │ └── index.tsx
│ └── styles
│ ├── Home.module.scss
│ └── globals.scss
パスのaliasを作成
コンポーネントの階層が深くなっていくと、importする時のフォルダ指定が複雑になってくるので、パスのaliasの設定をしておきます。
//tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
},
}
以下のように書き換えることができて便利です。
+ import "@/styles/global.scss";
- import '../styles/globals.scss'
Sassをインストール
Scssを使いたいので、インストールします。
npm i sass -D
cssは基本はTailwind CSSで書きますが、外部ファイルでCSSを読み込みたい時もあります。プレーンのCSSでは書きづらい部分も多いので、Sassを入れておきます。
CSSは好みの問題も大きいので、各自で好きなものを選択するのが良いですね。
Next.jsにはデフォルトでCSSモジュールを使えるので、それらと組み合わせて使います。
Tailwind CSSのインストール
npm i -D tailwindcss postcss autoprefixer
tailwind.config.jsを作成
インストール後に設定をします。
設定はTailwind.config.js内に記述します。
npx tailwindcss init -p
Tailwind CSSのv3からはjitモードが普通に使えるようになったので、jitモードを設定します。
contentには対象になるフォルダと拡張子を設定します。以前はpurgeという設定名でしたが、動作と一致する名称に変わってますね。
//tailwind.config.js
module.exports = {
mode: 'jit',
content: [
'.src/pages/**/*.{js,ts,jsx,tsx}',
'.src/components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
create-next-appでプロジェクトを作成すると、globals.cssが最初からできていますが、その中にTailwind CSSの設定を加えます。
//globals.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
VSCode用のTailwind CSSプラグイン
Tailwind CSSのクラス名がサジェストされます。
Hover Previewなども出るので便利です。
クラス名の自動並び変えはPrettierとPrettier用の公式Tailwind CSSプラグインを使います。
Prettierのインストール
PrettierとTailwind CSS用のプラグインと、Eslintと被るルールに対して、Prettierを優先するプラグインを入れます。
何を優先するのかはお好みやプロジェクトのルールによって変わると思います。
npm install -D prettier prettier-plugin-tailwindcss eslint-config-prettier
VSCode用のプラグイン
VSCodeでファイルを保存したときに自動で整形したいので、Prettierのプラグインを入れておきます。
ついでに、Eslintのプラグインも入れておきます。
Prettierの設定
何も設定しなければ、以下のリンクにあるデフォルトのものが適用されます。
アップデートでデフォルト値が変わる時があるので、ここでは設定ファイルにできるだけ明示しておく形を取ります。
また、VSCode用のプラグインに関しても、.prettierrc.jsonの設定にて動くため、混乱を避けるためにも、.prettierrc.jsonを作っておきます。
//.prettierrc.json
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "always",
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "css",
"endOfLine": "lf",
"embeddedLanguageFormatting": "off"
}
.prettierignoreを作成
自動で整形を保存する際に、対象外とするファイルを設定します。
//.prettierignore
*.md
VSCodeでマークダウンを書くのが好きなのですが、全角文字と半角文字を混在しているマークダウンファイルを、Prettierで自動整形すると、半角文字の前後に半角スペースが挿入されます。
筆者としては望まない動作なので、マークダウンファイルを自動整形の対象から外します。
ただ、VSCodeのコマンド（ctrl + shift + pで出てくるもの）を手動で実行すると、この設定をしていても整形されます。
.eslintrc.jsonの設定
Next.jsではv11ぐらい?から自動でEslintがインストールされます。
その設定にPrettierを加えます。EslintとPrettierで被るルールがある場合、Prettier側のルールが優先される設定です。
//.eslintrc.json
{
"extends": ["next/core-web-vitals", "prettier"]
}
prettier-plugin-tailwindcss
このプラグインを入れることで、Prettierで整形するときに、Tailwind CSSのクラスを自動で並び変えてくれます。
ルールを独自に作ったり、人の目で見て修正するのはとても大変なので、このプラグインに頼るのが楽です。並び順にこだわりがある場合は難しいかもですが…。
prettier-plugin-tailwindcssはインストールしておけば自動で読み込まれるため何もしなくてもOKです。
ただ、環境によってはプラグインの記載をする必要があります。詳細は公式で。
Stylelintのインストール
いろんな記事があって戸惑いましたが、結局公式を参考に最低限だけの構成です。
この辺りはお好みやプロジェクトのルールに沿って設定することになります。
スタンダードルールのScss拡張版、Stylelintと被るルールに対して、Prettierを優先する設定、CSSのプロパティを自動で並び変える設定をインストールします。
ほぼ、公式のGetting startedのものです。並び変えだけ追加するような感じです。
npm i stylelint stylelint-config-prettier-scss stylelint-config-standard-scss stylelint-config-recess-order -D
.stylelintrc.jsonの設定
Stylelintは設定をしないと動かないため、設定ファイルを作ります。
先ほどインストールしたルールを記載します。
加えて、Tailwind CSSの除外設定を行います。Tailwind CSSと他のCSSを併用する場合でも、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の拡張機能と設定
Prettier、Eslint、Stylelintの3つを併用する形になっていますが、混乱しないようにルールを決めて設定します。
ここでのルールは「被る場合はPrettierを優先」「ファイルを保存したときに自動で成型される」「.mdは除外する」です。
また、VSCodeのデフォルトチェック機能があるので、対象となるCSSなどは外します。
//settings.json
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[markdown]": {
"editor.formatOnSave": false
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"eslint.validate": ["html", "javascriptreact", "typescriptreact"],
"css.validate": false,
"scss.validate": false,
"stylelint.enable": true,
"stylelint.validate": ["css", "scss"],
Prettierに関してはVSCode側の動きと設定ファイルが連動するため、Prettierのマークダウン除外設定は、.prettierignoreに設定しておけばVSCode側の保存時でも適用されます。こちらに入れているのは念のため、ぐらいです。
まとめ
構築した環境は以下。
結構前ですが、Next.jsがcreate-next-appにEslintを含めてきたのと、stylelintのバージョンアップでデフォルトでScssが外されていたことなどから、lint周りを整理しないとな～と思っていたのですが、その結果がこれです。
stylelintを動かすと、ネストだらけのScssを適当に書くとエラーまみれになるので、気が引き締まって良いですね～。
Discussion