什么是 @significa/prettier-config？
@significa/prettier-config 是一个 Prettier 配置包，它提供了一套针对前端项目的 Prettier 配置规则。如果你的项目中使用了 Prettier，并且需要一个针对项目的配置文件，那么可以试试使用 @significa/prettier-config。
安装
使用 npm 安装：
npm install @significa/prettier-config --save-dev
使用
安装完 @significa/prettier-config 后，需要在项目根目录下创建 .prettierrc.js 文件，并在文件中引入 @significa/prettier-config。
module.exports = {
...require("@significa/prettier-config"),
// 配置项目特有的规则
};在上面的代码中，引入了 @significa/prettier-config 的所有配置，也可以针对项目做调整和配置。比如：
module.exports = {
...require("@significa/prettier-config"),
semi: false, // 不添加分号
singleQuote: true // 使用单引号
};注意，这里必须使用 ... 别名操作符来合并引入的 Prettier 配置。
配置规则
@significa/prettier-config 提供了一套符合前端项目实际情况的 Prettier 配置，包括以下规则：
- 结尾换行符（endOfLine）：
'lf' - 缩进（tabWidth）：
2 - 单引号或双引号（singleQuote）：
false - 分号（semi）：
true - 箭头函数（arrowParens）：
'avoid' - 括号空格（bracketSpacing）：
true - 对象大括号个数（braceStyle）：
'collapse' - 对象属性值缩进（objectPropertyNewline）：
'consistent' - 函数参数括号（jsxBracketSameLine）：
false
除此之外，@significa/prettier-config 还提供了针对 Vue、React 和 TypeScript 项目的 Prettier 配置。
示例代码
以下是一个使用 @significa/prettier-config 的 Vue 单文件组件示例：
-- -------------------- ---- -------
----------
-----
------ ----- -------
------- -------------------------------
----- ----- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ ------ --------
------ --
--
--
-------- -
----------- -
-------------
--
--
--
---------
-------
------ -
----------------- --------
------ ------
------- -----
-------- --- -----
----------- -------
---------------- -----
-------- -------------
---------- -----
------- --- ----
------- --------
-------------- ----
-
--------通过使用 @significa/prettier-config，以上代码将被自动格式化为：
-- -------------------- ---- -------
----------
-----
------ ----- -------
------- -------------------------------
----- ----- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ ------ --------
------ --
--
--
-------- -
----------- -
-------------
--
--
--
---------
-------
------ -
----------------- --------
------ ------
------- -----
-------- --- -----
----------- -------
---------------- -----
-------- -------------
---------- -----
------- --- ----
------- --------
-------------- ----
-
--------总结
使用 @significa/prettier-config 可以方便地为前端项目提供一套符合实际情况的 Prettier 配置，提高项目代码的可读性和可维护性。同时，也可以通过此包的使用和深入了解 Prettier 的相关知识，更好地提升前端代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedadb0b5cbfe1ea0610cf2