是否存在可排序对象键以外内容(如CSS属性)的ESLint规则?
关于ESLint检测CSS模板字符串属性排序的规则说明
原生ESLint自带的sort-keys规则仅针对JS对象键排序,无法覆盖CSS模板字符串内的属性排序场景,但社区维护的ESLint插件可以实现这个需求:
- eslint-plugin-css-in-js:插件中的
sort-declarations-alphabetically规则,专门用于检测并强制CSS-in-JS(含模板字符串形式)里的CSS属性按字母排序,支持配置大小写敏感性、是否忽略注释等参数,可匹配你现有sort-keys规则的行为。 - eslint-plugin-styled-components:若你使用styled-components,该插件的
sort-declarations规则可针对其模板字符串进行CSS属性排序检查。
以eslint-plugin-css-in-js为例的配置步骤:
- 安装插件:
npm install eslint-plugin-css-in-js --save-dev
- 在ESLint配置文件中添加规则:
{ "plugins": ["css-in-js"], "rules": { "css-in-js/sort-declarations-alphabetically": [ "error", { "caseSensitive": true, "ignoreComments": true } ] } }
不同插件的配置细节略有差异,可根据插件文档调整参数,对齐你之前sort-keys规则的要求(如最小属性数量、自然排序等)。
内容的提问来源于stack exchange,提问作者Trevor
相关产品推荐
相关产品推荐

