前言
你是否对代码风格不满意、难以维护？是否有来自各种框架的 CSS 样式表不够干净？不用担心，今天我们来介绍一个非常棒的 npm 包，styled-components-stylefmt，可以帮助我们轻松格式化 CSS 样式。
styled-components-stylefmt 是什么？
styled-components-stylefmt 是一个基于 stylefmt 的插件，专门用于通过在 styled-components 中使用 CSS 内联样式优雅地格式化样式。
这意味着我们可以使用一个方法来处理所有 styled-components 中的样式组件。它提供了一种相对简单，灵活且可配置的方式来跟踪样式的规范。
安装和使用
使用 styled-components-stylefmt 很简单。你可以使用 npm 或 yarn 安装它：
npm install styled-components-stylefmt --save-dev
在安装完成后，你可以在项目根目录下创建一个 .stylelintrc 文件：
{
"plugins": [
"styled-components-stylefmt"
],
"rules": {
"styled-components-stylefmt/css-fmt": true
}
}现在你就可以运行命令 stylefmt --stylelint-config .stylelintrc path/to/your/file.js 来实际处理样式包了。
而且，如果你正在使用 JavaScript 或 TypeScript 来编写您的 styled-components，那么您可以将此插件运用到您的 .eslintrc.js 文件中：
module.exports = {
rules: {
'styled-components-stylefmt/css-fmt': ['error', { syntax: 'styled-components' }]
},
}样式自动格式化
让我们从一个简单的示例开始。考虑下面这个以 styled-components 方式编写的 CSS 样式：
-- -------------------- ---- -------
----- --------- - -----------
-------- -----
------------ -------
---------------- -------
------ ------
------- ------
----------------- --------
------- ----- --- --------
------- -
------------- --------
-
-
----- ----- - ----------
---------- -----
------------ -----
------ --------
-在以上代码中，我们通过 styled-components 的方式定义了两个样式组件 Container 和 Title。然而，这两个组件的样式表都非常难看，而且很难被维护。
我们可以保存以上 css 样式到 styles.js 文件中，然后在控制台中运行以下命令，这将自动格式化您的样式：
stylefmt --stylelint-config .stylelintrc styles.js
这个样式就变成了：
-- -------------------- ---- -------
----- --------- - -----------
-------- -----
------------ -------
---------------- -------
------ ------
------- ------
----------------- --------
------- ----- --- --------
------- -
------------- --------
-
--
----- ----- - ----------
---------- -----
------------ -----
------ --------
--虽然有小小的格式差异，但是它比以前的版本更加易于阅读，这也是一个重要的考虑因素。
自定义格式配置
现在我们已经知道了如何使用 styled-components-stylefmt 格式化我们的代码，但是怎么确保它符合我们的项目规范呢？
我们可以使用 .stylelintrc 配置文件。通过配置我们可以使得修改、添加、删除规则、自定义样式格式化的方式灵活多变。
例如：我们将所有 CSS 样式的缩进改为 4 个空格以及排序的方式：
-- -------------------- ---- -------
-
---------- -
----------------------------
--
-------- -
------------------------------------- -
-----
-
--------- -------
-------------- --
------- ----
-
-
-
-此时，在运行命令时，styled-components-stylefmt 将遵循传递给它的指令。
结论
通过使用 styled-components-stylefmt，我们可以快速格式化 styled-component 的样式，使其更加可读，并减少样式的错误和难以维护的可能性。
仔细阅读这篇文章，并按照我们的说明行动。祝你格式化好看的 css 样式！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005727181e8991b448e8a79