Sass(SCSS) の stylelint ルールは stylelint-config-sass-guidelines に任せたい

こんにちは森田です。
Sass(SCSS) でスタイリングする場合、弊社では必ず stylelint を使いコードの一貫性を保ちます。

弊社には長年継ぎ足しで使われた秘伝のルールがあるのですが、Stylelintは更新性が高く使えなくなるルールが出てきたりとまれにメンテナンスが必要になります。

なので、今後は基本的なルールと更新性は stylelint-config-sass-guidelines に任せて使っていこうと考えています。

インストール方法

npm インストール

インストールは npm から stylelint 本体、postcss、stylelint-config-sass-guidelines を dev-dependency にインストールします。
postcss も必要になるみたいなのでインストールしましょう。

$ npm i -D stylelint postcss stylelint-config-sass-guidelines

VSCode のStylelint 拡張も拡張自体に stylelint を内包しなくなったので今後はプロジェクトごとに入れる形になるでしょう。

stylelint 設定ファイル

stylelintの設定ファイル .stylelintrc.js からstylelint-config-sass-guidelines を読み込みます。

module.exports = {
  'extends': 'stylelint-config-sass-guidelines',
}

エディタ設定

今回は VSCode で lint しつつ、保存時に修正(フォーマット)させたいのでVSCode に設定します。

VSCode に Stylelint 拡張をインストールし、settings.json か .code-workspaceファイルに以下を設定します。

"settings": {
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "stylelint.stylelintPath": "node_modules/stylelint",
  "stylelint.validate": ["scss"]
}

stylelint-config-sass-guidelines のルール一覧

ルール一覧をGoogle翻訳様協力のもと翻訳します。

構成されたlints

At-rule

Block

宣言

宣言ブロック

宣言プロパティ

  • declaration-property-value-disallowed-list:宣言内で許可されていないプロパティと値のペアのリストを指定します。
    • bordernone という単語を使用することを禁止し、代わりに 0 を使用します。 このルールの目的は、どちらが「より良い」かを定義するのではなく、一貫性を強制することです。

関数

全般的

  • indentation:インデントは常に2スペースである必要があります。
  • length-zero-no-unit:ゼロに単位は許可されません。
  • max-nesting-depth:許可されるネストの深さを 1 に制限します。
  • no-missing-eof-newline:空でないファイルでのファイルの終わりの改行の欠落を禁止します。

メディア機能

番号

プロパティ

ルール

  • rule-nested-empty-line-before:複数行のルールの前には、常に空の行が必要です。
    例外:親ルールの最初のネストされたルール。無視:コメントの後に続くルール。
  • rule-non-nested-empty-line-before:複数行のルールの前には、常に空の行が必要です。
    無視:コメントの後に続くルール。

SCSS

セレクタ

  • string-quotes:文字列は常にシングルクォートで囲む必要があります。

Stylelintコメントを無効にする

ルールを変更する

ルールを変更したい場合は .stylelintrc.js のルールで上書きすることができます。

{
  "extends": "stylelint-config-sass-guidelines",
  "rules": {
    "indentation": "tab",
    "number-leading-zero": null
  }
}

「アルファベット順にソート」ルールは変更する

declaration-block-properties-order:プロパティはアルファベット順にソートする必要があります。」

というルールは変えたいと思います。アルファベットではなく視覚順にソートさせます。

今回は、stylelint-config-recess-order を使いルールを上書きます。

.stylelintrc.js に stylelint-config-recess-orderプラグインを読み込み、アルファベット順にするルール order/properties-alphabetical-order を無効にします。

module.exports = {
  'extends': [
    'stylelint-config-recess-order',
    'stylelint-config-sass-guidelines'
  ],
  rules: {
    "order/properties-alphabetical-order": null
  },
}

並び順がRecssの並び順に変更できました。

stylelint-config-recess-order のルールは自分好みなので基本これでいこうかと思います。


投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングとMacの開発環境を快適にすることにいつも燃えています。