Stylelint

通常在项目用了 SCSS 或 Less 可以考虑 Stylelint。

SCSS

安装依赖

pnpm add -D stylelint stylelint-config-standard-scss postcss-scss

配置文件

创建 stylelint.config.js，内容如下：

export default {
  extends: ['stylelint-config-standard-scss'],
  ignoreFiles: ['dist/**', 'coverage/**', 'node_modules/**'],
  overrides: [
    {
      files: ['**/*.scss'],
      customSyntax: 'postcss-scss',
    },
  ],
  rules: {
    'selector-class-pattern': null,
    'no-descending-specificity': null,
  },
}

脚本

在 package.json 中补充：

{
  "scripts": {
    "lint:style": "stylelint \"src/**/*.{scss,css}\"",
    "lint:style:fix": "stylelint \"src/**/*.{scss,css}\" --fix"
  }
}

运行

pnpm lint:style
pnpm lint:style:fix

Vue + SCSS

如果项目是 Vue，并且样式写在 <style lang="scss"> 里，再安装：

pnpm add -D stylelint-config-recommended-vue postcss-html

把 stylelint.config.js 改成：

export default {
  extends: ['stylelint-config-standard-scss', 'stylelint-config-recommended-vue/scss'],
  ignoreFiles: ['dist/**', 'coverage/**', 'node_modules/**'],
  overrides: [
    {
      files: ['**/*.scss'],
      customSyntax: 'postcss-scss',
    },
    {
      files: ['**/*.{vue,html}'],
      customSyntax: 'postcss-html',
    },
  ],
  rules: {
    'selector-class-pattern': null,
    'no-descending-specificity': null,
  },
}

同时把脚本改成：

{
  "scripts": {
    "lint:style": "stylelint \"src/**/*.{scss,css,vue}\"",
    "lint:style:fix": "stylelint \"src/**/*.{scss,css,vue}\" --fix"
  }
}

Less

如果项目主要写 Less，再安装：

pnpm add -D stylelint stylelint-config-standard-less postcss-less

把 stylelint.config.js 改成：

export default {
  extends: ['stylelint-config-standard-less'],
  ignoreFiles: ['dist/**', 'coverage/**', 'node_modules/**'],
  overrides: [
    {
      files: ['**/*.less'],
      customSyntax: 'postcss-less',
    },
  ],
  rules: {
    'selector-class-pattern': null,
    'no-descending-specificity': null,
  },
}

脚本改成：

{
  "scripts": {
    "lint:style": "stylelint \"src/**/*.{less,css}\"",
    "lint:style:fix": "stylelint \"src/**/*.{less,css}\" --fix"
  }
}

补充

忽略局部规则

/* stylelint-disable-next-line color-hex-length */
.demo {
  color: #ffffff;
}