vscode 代码格式化认知与实践

vscode 代码格式化

Visual Studio Code官网

🎈前言

对于开源协同来说，前期的问题主要是环境配置和代码格式化。环境配置可以让你将项目跑起来，代码格式化可以让你在提交代码的时候避免不必要的因不统一的格式化配置程序所带来的内容差异

也即，做好这两点，你就能专注于代码逻辑本身。本文要讲的即是vscode编辑器中代码格式化的相关实践

🎁🎀正文

那么首先开始的是代码格式化配置文件。

一般地，项目中都会有 *.editorconfig*文件，该文件简单地规定了一些代码格式化风格。示例文件：

# http://editorconfig.org
root = true

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

[*.md]
trim_trailing_whitespace = false

可以看到，可配置的内容确实寥寥无几。

接下来是 .prettierrc文件，该配置文件主要对Prettier起作用，这是一个非常主流的代码格式化工具，官网对其描述：

*一个“有态度”的代码格式化工具
*支持大量编程语言
*已集成到大多数编辑器中
*几乎不需要设置参数

该工具主要用于支持javascript相关语言的代码格式化操作，但通过社区插件的方式也支持了更多编程语言的代码格式化，具体详情，查看这里

prettier的主张是：use Prettier for formatting and linters for catching bugs!

prettier的配置文件按照cosmiconfig的规则来加载。

值得注意的是，如果你的项目中存在 .editorconfig 配置文件，Prettier将解析它并将其属性转换为相应的Prettier配置，.editorconfig配置文件中的规则优先级很低，是可以被 .prettierrc所复写的。

对于web开发者来说 eslint可能概念更广泛些，严格的说，eslint是一个Linter类工具，按照pretter的一贯主张：“让美化的归于美化，linter的归于linter”。因此我们更乐意使用prettier-eslint这样的工具，来全局统筹代码风格问题。甚至可以说，这就是社区的最佳实践了。

由此，作为web开发者的我们得到一份配置方案，使用 .prettierrc来规定代码的美化规则，使用 .eslintrc.js来规定代码的linter规则

❓疑症

可是，很多时候，我们接触到的项目，代码格式化方案是另类的

比如，项目工程中只有 .eslintrc.js和 .editorconfig文件，当vscode设置当前的文档使用prettier来进行代码格式化时，糟糕的事情出现了，prettier没有找到可用的prettier配置文件，则只能将 .editorconfig配置文件的规则解析为对应的prettier规则来使用。然而,在这份配置文件中，并没有集成eslint的校验规则。也就是说，项目工程中的 .eslintrc.js并没有起作用。更遭的是，因为 .editorconfig配置文件的存在，vscode本身的prettier插件所配置的默认规则也不再起效了。

对于代码字符串使用的单引号还是双引号，有这么一条规则quoute_type =
single，但这条规则并不是通用的，因为editorconfig中的某些规则并不由Editorconfig来实现，而是交给依赖EditorConfig文件的工具支持。

解决方案是什么呢？

对于vscode而言，项目中的 .vscode文件夹下的 settings.json配置文件其实是可以修改当前环境下是使用哪种代码格式化工具的。因此，对于配置了代码格式化的工程而言，有必要显式的声明当前是要使用哪个代码格式化程序。

这样做，可以有效避免下列问题的产生：

• cannot format doubleQuotes to singleQuote in single javascript file
• VSCode single to double quote automatic replace

以上面提到的最佳实践为例，我们可以这样配置 .vscode/settings.json

{
  "[typescript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[json]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  }
}

综上所述，一份好的项目工程，除了必要的代码格式化配置文件外，还需要在 .vscode/settings.json中配置各种类型文档的默认代码格式化工具程序: editor.defaultFormatter，可参看vscode项目工程中的settings.json配置

🔗参考链接

1. https://prettier.io/docs/en/configuration.html
2. https://editorconfig.org/#overview
3. https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties#ideas-for-domain-specific-properties
4. https://github.com/editorconfig/editorconfig-vscode

更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥

转载：https://blog.csdn.net/m0_68539124/article/details/128404979