Sass（SCSS）& VSCode で Stylelint を使う

.some-rule {
    property: value; /* stylelint-disable-line */
    /* stylelint-disable-next-line */
    property: value;
    property: value;
}

CSS & Sass

stylelint

yarn

yarn add stylelint stylelint-config-sass-guidelines --dev
yarn add stylelint-config-recess-order --dev

npmインストール

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

.stylelintrc.js

-webkitを意図的に付けたい時は /* stylelint-disable-line */ を使用する

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,		
		'selector-class-pattern': null, //.aaa__bbb の使用NG
		'max-nesting-depth': null, //ネスト深さ制限
		'selector-max-id': null, //#の使用制限
		'selector-no-qualifying-type': null, //body.xxxの使用NG
		'selector-max-compound-selectors': null, //+, > の使用制限
	}
};

vscode/settings.json

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

Live Sass Compiler

Prepros使わない場合

VSCode右下の「Watch Sass」をクリックする。

settings.json

"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": [
	"> 1%",
	"last 1 version",
	"not dead"
],
"liveSassCompile.settings.formats": [
	{
	"format": "expanded",
	"extensionName": ".css",
	"savePath": "/assets/css"
	}
],
"liveSassCompile.settings.watchOnLaunch": true,