不要像这个人一样——不要成为一个笨蛋。
格式化有助于构建您编写的代码行，使其更易于阅读和理解。当与多个开发人员一起开发代码库时，这一点至关重要，所有开发人员都有自己的风格和对代码结构的偏好。拥有统一格式的代码库有助于防止合并时的麻烦，并创建您和您的团队可以在此基础上构建的标准。
有多种方法可以为您自己和您的团队设置格式模板。在本文中，我们将探讨更流行的选项之一：Prettier。
根据 State of JS 2021 调查，83% 的受访者经常使用 Prettier 作为他们选择的格式化程序，比上一年的调查增加了 13%。许多著名的团队（例如 Facebook、Webflow、Jest、Dropbox、Spotify 和 PayPal 的团队）都使用 Prettier 来确保其代码库中的格式一致。
Prettier 可以通过多种方式配置和运行。在此示例中，我将演示如何使用 Git 挂钩设置 Prettier，以在 VS Code 中实现自动化。更多示例和配置，请访问 Prettier 的文档。
虽然不是必需的，但了解您将配置的选项及其用途很有帮助。您需要创建两个文件并将它们放置在项目的根级别。请记住，这些格式选项是特定于项目的，因此您需要为每个新项目重复此过程。这些文件将包含您可以选择的选项，您可以修改或删除不适合您项目需求的选项。
此文件位于项目的根级别，定义 Prettier 的基本格式规则。它使用 JSON 结构，可以根据您团队的标准进行定制。这是一个例子：
即使在 Prettier 运行之前，该文件也可确保编辑器设置的一致性。它还涵盖了 .prettierrc 没有的选项。这是一个例子：
为了方便使用，两个文件都可以复制到文末。创建并配置 .prettierrc 和 .editorconfig 文件后，您就可以继续。安装这三个 npm 包以简化格式化过程：
npm install --save-dev prettier lint-staged husky
然后初始化Husky
npx 哈士奇初始化
这些步骤可完成以下任务：
另外两个文件需要配置：pre-commit 和 .lintstagedrc
该文件由 Husky 自动创建，用于指导自动化过程。它位于初始化期间创建的 Husky 文件夹内。配置如下图：
在根项目文件夹中创建此文件（没有类似于 .editorconfig 和 .prettierrc 的扩展名）。它通过 Git hook 缩小了 Prettier 格式文件的范围。以下是一个示例，但您可以根据项目的文件类型进行调整：
所有四个文件就位（.prettierrc、.editorconfig、.lintstagedrc 和预提交）后，您就可以测试工作流程。
如果一切设置正确，您的终端应该显示一条成功消息，并且格式更改将自动应用。
您现在有了一种简单而有效的方法来利用 Prettier 和 git hooks 来自动格式化代码。
我很想听听你的想法！如果这有帮助或者您遇到任何问题，请在评论中告诉我 - 我随时为您提供帮助！
.prettierrc
{
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": false
}
.editorconfig
# Top-most EditorConfig file root = true # Global settings [*] indent_style = space indent_size = 2 tab_width = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true # Overrides [*.md] trim_trailing_whitespace = false max_line_length = off [*.yml] indent_style = space indent_size = 2 [*.ts] indent_style = space indent_size = 4 [Makefile] indent_style = tab [*.html] indent_size = 2 [*.json] indent_size = 2
以上是使用 Prettier Like a Pro 格式化您的代码的详细内容。更多信息请关注PHP中文网其他相关文章！
