eslint如何规定样式表class name的命名风格？

Question

我记得以前vue2时代eslint规则是可以约束class name命名风格的 但是安装了vue3官方推荐的eslint组件并没有这项约束 我想请问如何定义规则来防止class name命名为大小驼峰(PascalCase和camelCase)？

Bad

<a class="camelCase PascalCase snake_case">foobar</a>

Good

<a class="kebab-case">foobar</a>

Answer 1

你想要在 ESLint 中检查样式表中类名的命名风格，你可以使用 stylelint。stylelint 是一个功能强大的样式检查工具，可以与 ESLint 配合使用。下面是如何配置 stylelint 以检查类名命名风格的示例。
首先你要安装一下 stylelint 和 stylelint-config-standard：

npm install stylelint stylelint-config-standard --save-dev

再在项目根目录创建一个名为 .stylelintrc.json 的配置文件：

json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "selector-class-pattern": "^[a-z]+(-[a-z]+)*$"
  }
}

在这个配置中，你可以使用了 stylelint-config-standard 的预设规则，并添加了一个自定义规则 selector-class-pattern，该规则会要求类名使用 kebab-case（短横线命名法）。

在项目根目录创建一个名为 .stylelintignore 的文件，以排除不需要检查的文件或目录：
`node_modules/
dist/`
为了方便起见，可以在 package.json 文件中添加一个运行 stylelint 的脚本：

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

现在好了，你可以通过运行 npm run lint:css 来检查项目中的样式文件，包括 Vue 单文件组件中的样式。stylelint 会根据你的配置来检查类名命名风格，并报告不符合规则的类名。对了你可能需要在你的代码编辑器中安装一个 stylelint 插件，方便在编辑器中实时显示错误和警告，你就可以观察到。