是否有工具可强制less文件中的css类名遵循指定命名规范？

针对你需要校验less文件类名符合kebab-case命名规范的需求，最成熟的方案是使用stylelint，这是和ESLint对应的样式代码校验工具，完美适配你的React+Yarn技术栈。

第一步：安装依赖 #

执行以下命令安装所需的开发依赖：

yarn add stylelint stylelint-config-standard stylelint-less -D

第二步：添加配置文件 #

在项目根目录新建.stylelintrc.js，写入以下配置，你可以根据需求调整selector-class-pattern的正则规则，示例正则要求类名必须为小写字母、数字、中划线组成的kebab-case格式，不能以中划线开头或结尾：

module.exports = {
  extends: ['stylelint-config-standard'],
  customSyntax: 'postcss-less',
  rules: {
    'selector-class-pattern': '^[a-z][a-z0-9-]*[a-z0-9]$',
    // 如果需要忽略第三方类名（比如antd的ant-开头类、全局公共类）可以用下面的写法
    // 'selector-class-pattern': [
    //   '^[a-z][a-z0-9-]*[a-z0-9]$',
    //   {
    //     ignorePatterns: ['^ant-', '^global-']
    //   }
    // ]
  }
}

第三步：配置校验脚本 #

在package.json的scripts字段中添加校验命令：

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

执行yarn lint:style即可全量校验项目中的less文件，--fix参数可以自动修正部分不符合规范的类名，无法自动修复的会抛出明确的错误位置和提示。

可选：集成到开发工作流 #

• 可以在IDE中安装stylelint插件，实现保存文件时实时提示不符合规范的类名
• 搭配husky配置pre-commit钩子，提交代码时自动校验样式文件，不符合规范的代码无法提交，和你现有的ESLint校验逻辑对齐

内容的提问来源于stack exchange，提问作者Meesta