在使用 JavaScript 进行前端开发时，保持代码风格的一致性是非常重要的。好的代码风格可以让代码更加易读、易维护，也可以帮助团队协作时更高效地沟通。而手动调整代码风格费时费力，容易出现失误。本文将为大家介绍一个前端自动格式化工具——npm包@idrinth/automatic-formatting的使用方法。
@idrinth/automatic-formatting 简介
@idrinth/automatic-formatting 是一个基于 Prettier 的自动格式化工具，它可以帮助我们快速调整代码风格，让代码一目了然。它具有以下优点：
- 简单易用：只需要在代码仓库中添加插件配置，即可自动进行代码格式化。
- 智能自适应：支持基本语法、格式、代码风格，通过 Prettier / plugins，支持自定义配置。
- 成熟灵活：早已用于 Vue / React / TypeScript 等许多项目中，持续有更新，活跃社区支持。
安装与配置
安装
使用 npm 快速安装 @idrinth/automatic-formatting：
npm i -D @idrinth/automatic-formatting
配置
在根目录下新建 .prettierrc.js 文件，填入以下内容：
module.exports = {
tabWidth: 2,
semi: true,
singleQuote: true,
trailingComma: 'es5',
}可自定义你想要的配置，常常包括 tab 缩进、分号、单引号或双引号、结尾逗号等，更多的配置请参考 Prettier 的 官方文档。
使用
我们可以将格式化命令添加到后端的构建脚本中，使用如下命令进行格式化：
./node_modules/.bin/idrinth --write .
上述命令将会格式化你的项目中的所有 javascript / vue / css / scss / html 文件。我们可以将命令写到 package.json 文件的 scripts 对象中，以便更加方便地运行格式化命令：
"scripts": {
"format": "idrinth --write ."
}使用 npm run format 即可自动进行格式化。
注意事项
- 格式化工具并没有能够替代自身的思考能力，建议自己理性思考，不要盲目套用代码风格规范。
- 在自定义 .prettierrc.js 中，务必确定自己的规范，并且保证公司内部的一致性。
- 在团队协作时，最好收集各成员的 vscode 配置，并做好团队统一构建脚本的配置。
使用@idrinth/automatic-formatting实现代码风格的自动化不仅能够显著提升代码的可读性、可维护性、可扩展性，还能提高各成员的coding效率。本文的阐述尽力让读者看懂npm包的安装与配置方法，不能掌握代码风格的规范化，深入的讨论每个具体配置项的原理的问题，欢迎大家针对本文提出任何问题。
示例代码
示例代码：
-- -------------------- ---- -------
-------------------- -------- ---------------
-- ------- -- - -- ------ -- ------------- -
------- - ---------
------ -- --------
-----
---------------------------------------------
--
--- ---- - ------- --------
------------------
---
-
-
-此时若运行 npm run format，该代码将会被格式化成：
-- -------------------- ---- -------
-------------------- -------- ---------------
-- ------- -- - -- ------ -- ------------- -
------- - ---------
------ -- --------
-
-- ---
---
- --------------------
- -------------------------
--
--- ---- - ------- --------
------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596581e8991b448d6e47