使用 EditorConfig 和 Prettier 来规范代码风格 AI

5月 16, 2024

写前端代码实践下来一段时间，如果是我自己的前端项目，缩进类型一定是空格，长度必须是 2，因为 4 还是太长了，对 HTML 类的模板以及 js 代码不友好。但是如何约束队友呢，不论是有意还是无意的差异，为了让大家保持风格统一，我发现下面工具可以解决问题。

EditorConfig #

https://editorconfig.org/

EditorConfig 插件使用 .editorconfig 文件用于定义和维护跨编辑器的一致编码风格。它主要关注的是基本的代码风格设置，如缩进、行尾符、字符集等。以下是一个简单的 .editorconfig 示例：

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[*.py]
indent_size = 4

Prettier #

https://prettier.io/

Prettier 是一个代码格式化工具，可以自动格式化代码以保持一致的代码风格。它支持多种编程语言，并且可以与多种编辑器和工具集成。以下是一个简单的 .prettierrc 配置文件示例：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "semi": true,
  "arrowParens": "avoid"
}

一起使用 EditorConfig 和 Prettier #

为了让 EditorConfig 和 Prettier 一起工作，你需要确保它们的配置一致。以下是一些步骤和注意事项：

1. 编辑器支持：

   • 确保你的编辑器或 IDE 安装了 EditorConfig 插件（大多数现代编辑器都内置支持）。
   • 安装 Prettier 插件。

2. 配置一致性：

   • 确保 .editorconfig 和 .prettierrc 文件中的配置一致。例如，如果你在 .editorconfig 中设置了 indent_size = 2，那么在 .prettierrc 中也应设置 "tabWidth": 2。

3. 在项目中使用：

   • 在项目根目录中创建 .editorconfig 和 .prettierrc 文件，并根据需要进行配置。
   • 你可以使用 Prettier 的 CLI 工具来自动格式化代码：

     npx prettier --write .
     

只是用 prettier 可以吗？ #

只用 Prettier 也可以实现 .editorconfig 很多（但不是全部）功能。例如，Prettier 可以设置代码缩进、行末符号、最大行宽等。但是，Prettier 不直接提供文件编码或插入文件末尾空行等功能。如果你的项目只需要 Prettier 提供的功能，那么你可以只使用 Prettier。

另外，我觉得还是显式声明比较好，因为都是广泛使用的插件，如果只声明一个 .prettierrc 配置，其他程序员恰好有另外的全局或自动化配置生成 .editorconfig，反而会容易造成配置文件的冲突。两个都在项目初始化的时候显式配置好，才可以达到互相补充的效果。

示例项目结构 #

以下是一个示例项目结构，展示了如何同时使用 EditorConfig 和 Prettier：

my-project/
├── .editorconfig
├── .prettierrc
├── package.json
└── src/
    └── index.js

官方文档 #

有关 EditorConfig 和 Prettier 的更多详细信息，你可以参考以下官方文档：

• EditorConfig Documentation
• Prettier Documentation

通过正确配置 EditorConfig 和 Prettier，你可以确保代码在不同编辑器和团队成员之间保持一致的风格，并且可以自动格式化代码以提高开发效率。