Stylelintのインストールと設定

Biomejsで対応していないCSSの解析やコーディングガイドラインに沿ったプロパティの並び順を実現するためのStylelint設定方法。

インストール

Stylelint本体に加え、インラインCSSや<style>タグ内のCSSを解析し、プロパティの並び順を整理するパッケージをインストール。¹

pnpm install -D stylelint stylelint-config-html stylelint-config-recess-order

ルールの設定

プロジェクト直下に.stylelintrc.cjsを作成。

module.exports = {
  extends: ["stylelint-config-html", "stylelint-config-recess-order"],
  cache: true,
  fix: true,
  rules: {
    // 値が 0 のとき単位を省略する（例: `margin: 0px;` ❌ → `margin: 0;` ✅）
    "length-zero-no-unit": true,

    // 16進カラーコードは短縮形を使う（例: `#ffffff` ❌ → `#fff` ✅）
    "color-hex-length": "short",

    // CSS Color Module Level 4 のモダン記法を使う（例: `rgb(255, 0, 0)` ❌ → `rgb(255 0 0)` ✅）
    "color-function-notation": "modern",

    // フォントウェイトは数値で指定（例: `font-weight: bold;` ❌ → `font-weight: 700;` ✅）
    "font-weight-notation": "numeric",

    // 関数名は小文字（例: `RGB(0,0,0)` ❌ → `rgb(0,0,0)` ✅）
    "function-name-case": "lower",

    // セレクタの型（タグ名）は小文字（例: `DIV {}` ❌ → `div {}` ✅）
    "selector-type-case": "lower",

    // 値のキーワードは小文字（例: `display: BLOCK;` ❌ → `display: block;` ✅）
    "value-keyword-case": "lower",
  }
}

VSCodeの設定

注意: StylelintとVSCode拡張機能のStylelintには互換性の問題があり、以下の設定が効かない場合がある²。

.vscode/settings.jsonに以下を追加：

{
  "editor.codeActionsOnSave": {
    // ファイル保存時にStylelintの自動修正可能なルールを修正
    "source.fixAll.stylelint": "explicit"
  }
}

Stylelintのインストールと設定

インストール

ルールの設定

VSCodeの設定

Footnotes