Stylelint
一个强大的现代 linter,可帮助您避免错误并在您的样式中强制执行约定。
Linting CSS files
- 安装Stylelint的标准配置
npm install --save-dev stylelint stylelint-config-standard
- 在项目的根目录下创建一个配置文件
.stylelintrc.json
,并添加以下内容
// .stylelintrc.json
{
"extends": "stylelint-config-standard"
}
- 对整个项目的css 文件运行stylelint
npx stylelint "**/*.css"
如果你附带使用格式化插件,你应该关闭任何冲突的规则。 例如,您可以使用 Prettier 的共享配置来做到这一点:
npm install --save-dev stylelint-config-prettier
// .stylelintrc.json
{
"extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}
配置scss
我们建议扩展一个共享配置,其中包含适合您首选语言或库的语法。 例如,您可以将 stylelint-config-standard-scss 共享配置扩展为 lint SCSS。
- 安装依赖
npm install --save-dev stylelint stylelint-config-standard-scss
- 在项目的根目录下创建一个配置文件
.stylelintrc.json
,并添加以下内容
// .stylelintrc.json
{
"extends": "stylelint-config-standard-scss"
}
- 对整个项目的css 文件运行stylelint
npx stylelint "**/*.scss"
此配置包括 postcss-scss 语法,配置 SCSS 的内置规则,并包括 stylelint-scss 插件(特定于 SCSS 的规则集合)。
如果你使用 Prettier 和 Stylelint,你应该使用他们的 SCSS 共享配置:
npm install --save-dev stylelint-config-prettier
// .stylelintrc.json
{
"extends": [
"stylelint-config-standard-scss",
"stylelint-config-prettier-scss"
]
}
其他共享配置:
stylelint-config-html
stylelint-config-recommended-vue
stylelint-order的顺序说明
stylelint常用插件
stylelint官网