使用 EditorConfig 和 Prettier 优雅地配置 VSCode 代码格式化

技术琐事 Node EditorConfig Prettier VSCode

字数统计: 510阅读时长: 1 min

 2021/08/07 

编写代码时使用 EditorConfig

EditorConfig 能够帮助跨各种 IDE 开发同一项目的不同开发人员保持一致的编码风格。

VSCode 没有内置对 EditorConfig 的支持，需要在插件市场中手动下载插件。

EditorConfig 会自动读取工作区中的 .editorconfig 文件，更详细的配置说明可以参考官方介绍。下面是笔者常用的配置：

root = true

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

推送仓库前使用 Prettier

为了进一步确保代码风格符合编码规范，可以在上库前使用 Prettier 修复代码格式。

将 Prettier 安装为项目开发依赖：

1	yarn add -D prettier

在 package.json 中添加 Prettier 运行脚本：

{
  "scripts": {
    "prettier": "prettier --ignore-path .gitignore --write **/* --ignore-unknown"
  }
}

现在，执行 yarn prettier 命令，工具将按照 Prettier 预置的规则自动格式化所有支持的后缀格式的文件了。

在项目根目录创建 .prettierrc.json 文件，可以进一步配置 Prettier 格式化规则，可参考官方文档。例如：

{
  // JSON 文件中不应添加注释，需去除
  "semi": true, // 句末是否添加分号
  "singleQuote": true // 是否使用单引号
}

假如我们的项目中会包含 PHP 以及 Java 等语言的代码，要让 Prettier 处理它们的格式，该怎么做呢？

在默认情况下，Prettier 并不支持 PHP 或 Java 代码的格式化，这就需要我们单独添加支持其它编程语言的 Prettier 插件作为项目的依赖。其中，以 @prettier 开头的插件为官方维护插件，例如 @prettier/plugin-php；其它命名插件为社区开发插件，例如 prettier-plugin-java。