stylelint
Stylelint是一个用于检查和强制执行CSS代码风格规范的工具。 它可以帮助开发人员和团队保持一致的CSS编码风格,并发现和修复潜在的代码问题。
Stylelint与ESLint的作用类似,但针对的是CSS和预处理器(如Sass、Less)代码,而不是JavaScript代码。 它可以检查CSS文件中的语法错误、不一致的命名约定、未使用的样式规则、不推荐使用的CSS属性等。
使用
- 安装依赖
npm i stylelint stylelint-config-standard-scss postcss-html postcss-scss -D
- 新建配置文件,在项目根目录下创建
.stylelintrc.cjs
文件,并写入以下内容:
// https://stylelint.io/user-guide/configure
/** @type{import('stylelint').Config}*/
module.exports = {
extends: [
'stylelint-config-standard-scss',
],
customSyntax: 'postcss-html',
ignoreFiles: [ "**/*.{js,jsx,ts,tsx,json}" ],
overrides: [
{
files: ["**/*.{scss,css,sass}"],
customSyntax: "postcss-scss",
}
],
rules: {
'selector-pseudo-class-no-unknown': [
true,
{
"ignorePseudoClasses": ["global"]
}
]
}
};
- 如果你是vscode用户,可以安装插件
stylelint
来提高开发效率,具体配置可以复用eslint章节中的相关配置,参考: eslint