eslint9.0 css格式化插件

29 阅读1分钟

eslint9.0 + stylistic 已经实现对代码检查+格式化的全面支持,对于大部分开发团队来说可以扔掉 prettier 等插件实现 eslint 一把梭了

但目前官方库 @eslint/css 开发进度缓慢,对 css 的格式化支持还不完善,对于不愿意使用 unocss、tailwind 等黑魔法的团队来说非常需要 css 的格式化插件,闲暇时间开发了这样一款 eslint 小插件,实现了基本的 css 属性排序和空格、空行检查

微信图片_20251118172047_32_9.png

微信图片_20251118172118_33_9.png

微信图片_20251118172200_34_9.png

配合编辑器可实现自动格式化

安装

npm i eslint-plugin-css-order --save-dev

使用

import cssOrder from "eslint-plugin-css-order";

export default [
  {
    plugins: {
      'css-order': cssOrder
    },
    rules: {
      'css-order/css-order': 'warn'
    }
  }
];

配置文件示例

支持自定义排序配置 css-order.config.json,如无此文件则使用默认排序规则

[
  "content",
  "position",
  "top",
  "bottom",
  "right",
  "left",
  ...
]

github.com/yangthen/es…

好用的话欢迎给个✨✨