Skip to main content

stylelint

Stylelint是一个用于检查和强制执行CSS代码风格规范的工具。 它可以帮助开发人员和团队保持一致的CSS编码风格，并发现和修复潜在的代码问题。

Stylelint与ESLint的作用类似，但针对的是CSS和预处理器（如Sass、Less）代码，而不是JavaScript代码。 它可以检查CSS文件中的语法错误、不一致的命名约定、未使用的样式规则、不推荐使用的CSS属性等。

使用​

  1. 安装依赖
npm i stylelint stylelint-config-standard-scss postcss-html postcss-scss -D
  1. 新建配置文件，在项目根目录下创建.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"]
            }
        ]
    }
};
  1. 如果你是vscode用户，可以安装插件 stylelint 来提高开发效率，具体配置可以复用eslint章节中的相关配置，参考: eslint