Guidebook

# 使用Stylelint规范css

# 安装stylelint

$ yarn add stylelint
1

配置好.stylelintrc.js文件

# 命令行使用

$ npx stylelint "path/*.css"
1

# VSCode使用

安装stylelint (opens new window)插件，插件会自动读取本地配置

# 自动修复

插件提供自动修复功能，在setting.json中添加如下代码

"editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
},
1
2
3

# 配置

# stylelint order

https://github.com/hudochenkov/stylelint-order

in stlyelintrc.js

{
	"plugins": [
		"stylelint-order"
	],
	"rules": {
		"order/order": [
			"custom-properties",
			"declarations"
		],
		"order/properties-order": [
			"width",
			"height"
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

选择预设配置

$ yarn add stylelint-config-recess-order -D
1

至此，配置文件如下

module.exports = {
  extends: ['stylelint-config-recommended', 'stylelint-config-recess-order'],
  plugins: ['stylelint-order']
}
1
2
3
4

# 格式化sass

预处理器语言需要安装额外的插件，

https://github.com/stylelint-scss/stylelint-scss#readme

$ yarn add stylelint-scss -D
1

VSCode提供的Stylelint插件默认支持css、less、postcss语法。

为其添加scss的支持

"stylelint.validate": [
        "css",
        "less",
        "postcss",
        "scss"
    ],
1
2
3
4
5
6

# stylelintignore

# file
*.js
*.jsx
*.ts
*.tsx
*.jpg

# folder
node_modules
dist
config
1
2
3
4
5
6
7
8
9
10
11

# Umi项目使用@umijs/fabric

yarn add @umijs/fabric -D
1
const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.stylelint,
};
1
2
3
4
5

← ESlint Vue Rules →