VSCode で Stylelint 拡張をインストールする

npm インストール

下記3つのパッケージをプロジェクトフォルダにインストール

  • stylelint
  • stylelint-config-recess-order
  • stylelint-config-sass-guidelines

stylelintとstylelint-config-sass-guidelines をインストール

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

【必要に応じて】プロパティ並べ替え用に「stylelint-config-recess-order」をインストール

プロパティ並べ替えをしたいので下記インストール。

npm i -D --save-dev stylelint-config-recess-order

VSCode の settings.json

保存時にstylelintで自動フォーマットさせる。
現在のプロジェクトのみに適用させたいのでワークスペースの settings.json へ記述。

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

.stylelintrc.js を作成

設定例

  • プロパティのソートルール「アルファベット順」を rule で無効にして「stylelint-config-recess-order」を extends で有効に
  • プロパティの重複をNGに
  • インデントは4
module.exports = {
	extends: [
		'stylelint-config-sass-guidelines',
		'stylelint-config-recess-order',
	],
	ignoreFiles: ['**/node_modules/**'],
	rules: {
		'order/properties-alphabetical-order': null,
		'declaration-block-no-duplicate-properties': true,
		indentation: 4,
	}
};

除外

	rules: {
		'order/properties-alphabetical-order': null,
		'declaration-block-no-duplicate-properties': true,
		'selector-class-pattern': null, //クラス名にアンダーバー使用OKに
		'selector-id-pattern': null, //#の使用OKに
		'selector-max-id': null, //#の使用OKに
		'selector-no-qualifying-type': null, //body#tinymce.wp-editorの使用OKに
		'max-nesting-depth': null, //ネストの深さ
		'selector-max-compound-selectors': null, //+, > の使用リミット
		indentation: 4,
	}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です