在前端开发中，样式的规范化是非常重要的一部分。stylelint 是一个流行的 CSS 代码规范工具，可以对 CSS 进行语法检查、格式化、优化等操作。而 stylelint-qmui-css 是基于 stylelint 的一个插件，用于规范 QMUI 样式库的 CSS 代码。本文将为大家介绍如何使用 stylelint-qmui-css 这个 npm 包。
安装
首先需要全局安装 stylelint：
npm install stylelint -g
接着，进入项目的根目录下，安装 stylelint-qmui-css：
npm install stylelint-qmui-css -D
-D 表示将该包安装为项目的开发依赖。
配置
创建一个 .stylelintrc.js 文件，在其中添加以下内容：
-- -------------------- ---- -------
-------------- - -
---------- -
------------------
--------------------
--
---------- -
----------------------------
------------------------------------
---------------------------
--
-------- -
-------------------------------------- -----
------------------------------------ ----
-
-plugins 中需要包含 stylelint-order 和 stylelint-qmui-css 插件才能使该规范生效。extends 中的三个配置是 stylelint 自带的通用和 SCSS 规范设置和 prettier 的规范设置。rules 中分别设置了属性的字母顺序以及 QMUI 样式库 classname 不应添加 qmui 前缀的规则。
使用
在终端中输入以下命令：
stylelint 'src/**/*.scss'
其中，src/**/*.scss 表示 src 目录下所有的 .scss 文件都会被检查。
我们也可以在 package.json 中新增如下 script，以便更快捷地使用：
{
...
"scripts": {
"lint:css": "stylelint 'src/**/*.scss'"
},
...
}指导意义
使用 stylelint-qmui-css 能够规范代码风格，避免一些常见的错误，提高代码的可读性和可维护性。同时，该插件对 QMUI 样式库的代码进行了特殊的规定，能够让团队成员更加统一地编写代码。不过，也需要注意在使用时匹配版本，否则可能会与项目中使用的样式库产生冲突。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e8381e8991b448dbdf4