Lolipop's Studio.

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

字数统计: 510阅读时长: 1 min
2021/08/07
loading

编写代码时使用 EditorConfig

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

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

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

1
2
3
4
5
6
7
8
9
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 运行脚本:

1
2
3
4
5
{
"scripts": {
"prettier": "prettier --ignore-path .gitignore --write **/* --ignore-unknown"
}
}

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

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

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

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

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

1
yarn add --dev @prettier/plugin-php prettier-plugin-java

Prettier 将自动加载与它在同一 node_modules 文件夹中的 Prettier 插件,并自动识别新增的代码后缀(如 .php.java)。因此在最后,只需要再执行一遍 yarn prettier,就可以实现格式化项目中的 PHP 及 Java 代码了。

CATALOG
  1. 1. 编写代码时使用 EditorConfig
  2. 2. 推送仓库前使用 Prettier