简介
csscomb-core 是一款开源的 CSS 代码格式化工具，它可以帮助我们编写出更加规范、易读、易维护的 CSS 代码。csscomb-core 可以通过 npm 安装使用。
安装
你可以通过 npm 安装 csscomb-core：
npm install csscomb-core
安装完成之后，你可以在命令行上使用 csscomb-core 命令进行格式化。
配置
在使用 csscomb-core 进行格式化之前，我们需要先配置一下它的参数。你可以在 .csscomb.json 文件中进行配置，具体的参数可以查看官方文档。
-- -------------------- ---- ------- - ---------- - ------------------------ --------------------------- -- ---------- - ------------- - ------------ ------------- ------------ --------------- ------------- ------------ ----------- ------------ ----------- ------------------ --------------- ---------- --------- --------- --------------- -------------- --------------- ------------ ----------- ----------- ---------- -------------- -------------- --------------- --------------- ---------------- ---------- ---------- ------------- -------- ---------- ----------- -------- - - -展开代码
在上面的配置中，我们将 exclude 参数设置为了 ./node_modules/**/*.* 和 ./bower_components/**/*.*，表示在格式化的时候不对这两个目录下的文件进行操作。
sort-order 参数是 csscomb-core 中最常用的一个参数，在这里我们将 CSS 属性按照一定的顺序排列，以便于阅读和维护。
使用
我们可以在命令行中直接调用 csscomb-core 命令，比如格式化一个 CSS 文件：
csscomb-core style.css
也可以通过指定文件夹来格式化多个 CSS 文件：
csscomb-core styles/
如果我们只想格式化某些特定的文件，可以指定 glob 模式：
csscomb-core *.css
如果在命令行中使用 csscomb-core 命令不太方便，我们还可以将其配置为 npm script：
// package.json { "scripts": { "csscomb": "csscomb-core styles/" } }
然后可以直接执行：
npm run csscomb请注意，上面的命令只是格式化了 CSS 文件，但并没有对文件进行修改。如果我们想要自动修改文件，可以使用 -w 参数：
csscomb-core -w style.css
除了命令行外，我们还可以在 JavaScript 代码中使用 csscomb-core：
const fs = require('fs'); const csscomb = require('csscomb-core'); const css = fs.readFileSync('style.css', 'utf8'); const newCss = csscomb(css, { config: './.csscomb.json' }); fs.writeFileSync('style.css', newCss, 'utf8');
最后，我们来看一下格式化后的 style.css 文件：
-- -------------------- ---- ------- ---- - ----------------- -------- ------ ----- ---------- ----- ------------ ------ ----------- - -- - ------ ----- ---------- ----- ------- -- -------- ----- - - - ------------ ---- -------------- ---- -展开代码
可以看到，我们的 CSS 代码已经被格式化成了一种更易读、易维护的形式。
小结
在本文中，我们介绍了 csscomb-core 的安装和使用方法，并且详细讲解了如何在 .csscomb.json 文件中配置参数。同时，我们还提供了一些 CLI 和 API 的示例代码，帮助大家更好地理解 csscomb-core 在前端开发中的应用。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71419
