前言
在前端开发中，我们经常会使用fis3这样的构建工具来辅助我们完成项目构建和打包工作。而在项目中，我们也经常会使用一些类似于csslinthtml这样的工具来检测和修复我们的css代码，提高我们的代码质量。今天，就让我们来了解一下如何使用npm包fis3-postprocessor-csslinthtml来辅助我们完成这个工作。
fis3-postprocessor-csslinthtml使用说明
1. 安装npm包
我们可以通过npm安装fis3-postprocessor-csslinthtml这个npm包。在终端中输入如下命令：
npm install fis3-postprocessor-csslinthtml --save-dev
2. 配置fis3
将fis-conf.js文件中postprocessor中配置csslinthtml即可。
//fis-conf.js
fis.match('*.css', {
postprocessor: fis.plugin('csslinthtml')
});3. 常用参数
- format：指定输出的格式，可以是 css, json, html 或者 compact。默认是 html格式。
- save: 指定报告存储的路径。
- toConsole: 是否输出到控制台，默认为true。
同时我们也可以在项目中，直接使用一些已经定义好的规则来为我们的代码进行检测。
-- -------------------- ---- -------
-------------
------------------ -
-------------- ------------------------- -
------ -
------------------- --
------------- --
------------- -
-
--
---4. 使用示例
为了更好的理解和掌握fis3-postprocessor-csslinthtml这个npm包的使用，下面就给大家提供一些使用示例：
.mydiv{
width: 10px;
heigth: 20px;
}上面这段css代码中，我们可以看到有一个写错的属性：heigth。而使用fis3-postprocessor-csslinthtml来检测我们的代码，可以得到如下的结果：
-- -------------------- ---- -------
------
------
-------------- ---------------
----- ------------------------- ----------------------------------
-------
------
----------- ------------
----
----
-----------------
----
----
----------
---- ------------------ ------------------- ---------- ------------
------ -------- -------- -- --- ---------- -- --- -------- --- ------ --- -- ---------
-----
-----
-----
-----
-------
-------上面的结果中，我们可以看到提示了我们有一个不被浏览器接受的属性。
总结
fis3-postprocessor-csslinthtml是一个非常好用的npm包，通过其我们可以快速检测和修复我们的css代码，提高我们的代码质量。希望本篇文章可以帮助到大家掌握这个npm包的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005588481e8991b448d5c6d