Vue项目配置Stylelint实现SCSS选择器按类型及字母顺序排序

依赖安装 #

首先安装所需依赖包：

npm install stylelint stylelint-order postcss-scss stylelint-config-standard-scss --save-dev

Stylelint配置 #

在项目根目录创建.stylelintrc.js文件，添加以下配置：

module.exports = {
  // 解析SCSS语法
  customSyntax: 'postcss-scss',
  // 继承标准SCSS规则集
  extends: ['stylelint-config-standard-scss'],
  // 启用排序插件
  plugins: ['stylelint-order'],
  rules: {
    // 配置选择器类型排序顺序，及组内排序规则
    'order/selector-order': [
      {
        type: 'element', // 优先排列元素选择器（如input、div）
      },
      {
        type: 'class', // 其次排列类选择器
        order: 'alphabetical' // 类选择器组内按字母升序排序
      }
    ],
    // 可选：如需支持更多选择器类型，可添加以下示例项
    // {
    //   type: 'id',
    //   order: 'alphabetical'
    // },
    // {
    //   type: 'attribute',
    //   order: 'alphabetical'
    // }
  }
};

校验与修复脚本 #

在package.json中添加脚本，方便快速运行校验和自动修复：

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

运行npm run lint:css:fix即可自动将你提供的示例代码：

<style lang="scss">
.b {}
.c {}
.a {}
input {}
</style>

修复为：

<style lang="scss">
input {}
.a {}
.b {}
.c {}
</style>

补充说明 #

• 如果Vue或Stylelint版本存在文件识别问题，可额外安装stylelint-plugin-vue，并在extends数组中添加'stylelint-plugin-vue/recommended'。
• order/selector-order支持的选择器类型包括element、class、id、attribute、pseudo-class等，可根据需求自由调整排序顺序和组内规则。

内容的提问来源于stack exchange，提问作者Szőke Attila