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

はじめに

▼ 成果物

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 とは？

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

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

1. Stylelint の導入

• Styelint
  • スタイルファイルの構文解析エンジン
• stylelint-config-standard
  • Google's CSS Style Guide や Airbnb's Styleguide などを含むスタイルガイドラインのルール
• stylelint-order:
  • CSS プロパティをアルファベット順に並べるためのルール

stylelint-prettier や stylelint-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 のルール設定

• .stylelintrc や .stylelintrc.json などのファイルを作成し、ルールを記述
• package.json にルールを記述
• etc...

// .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 内のスタイルファイルは対象外
}

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

// .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
}

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

// 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}'"
  },
  ...

# 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

最後に

参考文献

• Styelint
• stylelint-config-standard
• stylelint-order