Next.js に Stylelint を導入する方法。VS Code の設定方法も紹介!

Next.js に Stylelint を導入する方法。VS Code の設定方法も紹介!

はじめに

どーも、入田 / ぐるたか @guru_taka です!
本記事では Next.js (TypeScript) に Stylelint(読み方:スタイルリント)を導入する方法を紹介します。前回の記事で Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保つ方法を紹介しましたが、CSS などのスタイルファイルは構文解析の対象外でした。
Stylelint を導入することで、CSS などのスタイルファイルのコードを構文解析できます。さらに、有名企業の CSS ガイドラインに沿ったコード整形も行えます
▼ 成果物
stylelint-auto-format
Next.js (TypeScript) の開発環境を整えている方の参考になれば幸いです!
Next.js (TypeScript) の環境構築や ESLint と Prettier の導入や設定については、以下の記事を御覧ください。
参考:Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保つ方法

バージョン情報

  • node:15.11.0
  • stylelint:13.13.1
  • stylelint-config-standard:22.0.0
  • stylelint-order:4.1.0
  • typescript:4.3.5
  • react: 17.0.2
  • react-dom: 17.0.2

Stylelint とは?

Stylelint とは、スタイルファイルのコードが正しいかどうか、検証するためのツールです。コードの問題を発見したり、記述方法を統一できるようになり、コードの品質を保つことができますESLint のスタイルバージョンと思って頂ければ大丈夫です。

Next.js (TypeScript) に Stylelint を導入する方法

  1. Stylelint の導入
  2. Stylelint のルール設定
  3. ファイル保存時、Stylelint で自動フォーマットするよう VS Code で設定
  4. 一括で構文解析 / コード整形するコマンドを設定

1. Stylelint の導入

まず、Stylelint を導入するため、Next.js (TypeScript) の既存プロジェクトに、以下 3 つのパッケージをインストールします。
fwywd では、基本的に stylelint-config-standardのスタイルガイドラインを適用。加えて、CSS プロパティをアルファベット順にしています。
stylelint-prettierstylelint-config-prettier など、Prettier と Stylelint が共存するためのパッケージもありますが、Stylelint の方がルールが厳しいため、スタイルファイルでは Prettier を適用しないように設定します(後述)
上記パッケージをインストールするコマンドは以下の通りです。
# npm の場合 npm install -D stylelint stylelint-config-standard stylelint-order # yarn の場合 yarn add -D stylelint stylelint-config-standard stylelint-order

2. Stylelint のルール設定

続いて、Stylelint のルールを設定します。Styellint のルールを記述する方法は以下の通りです。詳細は公式の Configuration ページをご覧ください。
  • .stylelintrc.stylelintrc.json などのファイルを作成し、ルールを記述
  • package.json にルールを記述
  • etc...
package.json にルールを記述することで省ファイルにできますが、適用されているルールが直感的に理解することが難しいため、fwywd では、.stylelintrc.json にルールを記述しています.stylelintrc ではなく、拡張子に json を入れている理由は、VS Code でシンタックスハイライトを効くようにするためです。
.stylelintrc.json のコードは以下のようになります。
// .stylelintrc.json { "plugins": ["stylelint-order"], // stylelint-order 適用 "extends": ["stylelint-config-standard"], // stylelint-config-standard のルール適用 "rules": { // @~~~ ルール適用外 "at-rule-no-unknown": [ true, { "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] } ], "string-quotes": "single", // シングルクォーテーションに統一 "order/properties-alphabetical-order": true // CSS プロパティ、アルファベット順 }, "ignoreFiles": ["**/node_modules/**"] // node_modules 内のスタイルファイルは対象外 }
続いて、開発しながら Stylelint で構文解析できるように、VS Code の Stylelint の拡張機能をインストールしましょう。
next-stylelint-1
下図のように、Next.js のプロジェクト作成時に格納されているスタイルファイルを開いた時に、Stylelint による構文解析のエラーが出力されていれば成功です!
next-stylelint-2

3. ファイル保存時、Stylelint で自動フォーマットするよう VS Code で設定

次に、ファイル保存時、Stylelint で自動フォーマットするように、VS Code で設定を行います。Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保つ方法 で紹介した設定ファイルに追記しています。
// .vscode/settings.json { // デフォルトのフォーマッタを prettier に設定 "editor.defaultFormatter": "esbenp.prettier-vscode", // ファイル保存時、prettier による自動フォーマット "editor.formatOnSave": true, // ファイル保存時、ESLint, Stylelint による自動フォーマット "editor.codeActionsOnSave": { "source.fixAll": true }, // 追記 // css, scss ファイルは Stylelint でフォーマットするため、Pretteir によるフォーマットを回避 "[css]": { "editor.formatOnSave": false }, "[scss]": { "editor.formatOnSave": false }, // VS Code の CSS, SCSS の Lint オフ // Stylelint とのバッティング回避 "css.validate": false, "scss.validate": false }
以下のように、スタイルファイルを保存した時に Prettier とも競合することなく、コード整形できれば成功です!
stylelint-auto-format

4. 一括で構文解析 / コード整形するコマンドを設定

今のままでは、ファイル保存時でしかコード整形ができません。ファイル数が多い時や husky などで pre-commit 時に構文解析したい場合、一括で構文解析やコード整形できるコマンドがあると、便利です。
package.json に、以下のコマンドを追記しましょう。
// package.json ... "scripts": { // prettier から、スタイル関連の拡張子を除外 "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'", // 追記 "lint:style": "stylelint '**/*.{css,scss,sass}'", "lint:style:fix": "stylelint --fix '**/*.{css,scss,sass}'" }, ...
lint:style コマンドを実行した時、エラーがあるファイル、そしてエラーの内容が出力されていれば成功です。
# npm の場合 npm run lint:style # yarn の場合 yarn lint:style # 実行結果 $ stylelint '**/*.{css,scss,sass}' src/styles/Home.module.css 4:3 ✖ Expected display to come before padding order/properties-alphabetical-order 7:3 ✖ Expected align-items to come before justify-content order/properties-alphabetical-order 13:3 ✖ Expected flex to come before padding order/properties-alphabetical-order 14:3 ✖ Expected display to come before flex order/properties-alphabetical-order 17:3 ✖ Expected align-items to come before justify-content order/properties-alphabetical-order 22:3 ✖ Expected height to come before width order/properties-alphabetical-order 23:3 ✖ Expected border-top to come before height order/properties-alphabetical-order 26:3 ✖ Expected align-items to come before justify-content order/properties-alphabetical-order 32:3 ✖ Expected align-items to come before justify-content order/properties-alphabetical-order 49:3 ✖ Expected line-height to come before margin order/properties-alphabetical-order
stylelint-command-stylelint
また、lint:style:fix コマンドを実行した時、以下のようにコード整形されれば成功です!
stylelint-command-fix.gif

最後に

以上になります。Next.js に ESLint と Prettier だけでなく、Stylelint も導入すると、より厳密にスタイルファイルを整えることができます!
Next.js (TypeScript) に Stylelint の導入を検討している方、Prettier との競合で悩まれている方の参考になれば幸いです!
ここまでご覧いただき、ありがとうございました!

株式会社キカガク コンテンツマーケティング責任者
入田 / ぐるたか
twitter: @guru_taka

参考文献

RSS フィードで fwywd の技術記事を購読しよう

fwywd(フュード) のシェアボタンにある RSS フィードを利用すれば、新しい記事が出るたびに自動的に通知を無料で受け取ることができます。
Slack への連携はたったの5分で行うことができ、以下の記事でその手順を具体的に紹介しています。
ぜひ、fwywd(フュード) が日々更新する技術記事をキャッチアップしていただけると嬉しいです。
subscribe-rss-feed

fwywd では開発メンバーを募集しています

recruitment
fwywd では採用試験を無料で公開しています。
採用への応募の有無を問わず、Web アプリケーションの開発を学びたい多くの方にとって有益な試験内容となるように設計しています。 ぜひ、fwywd の面白い採用試験を覗いてみてください。