VSCode 代码格式化，我的格式化总和别人冲突怎么办😭

60rzvvbj
12,293 阅读1分钟

建议阅读时间：10 分钟

前言

本篇文章适用于 VSCode 用户

正文

什么是代码格式化

在我们写代码的过程中，我们会希望我们的代码保持整洁
例如，相比起这样的代码

const len =10;
 let count = 0
 for(let i = 0;i<len;i++ ){
       count+= i;}
console.log(count);

我们更希望代码是这样的

const len = 10;
let count = 0;
for (let i = 0; i < len; i++) {
    count += i;
}
console.log(count);

如果对于每一处不整洁的地方，我们都要手动去调整的话，会消耗我们很多精力
而我们又很难一次性直接写出很整洁的代码

我们称这种将代码变整洁的行为叫做代码格式化
很显然这种代码格式化是一种简单的重复的操作，那么代码格式化就可以交给程序来完成
对于像 VSCode、Idea 这些主流代码编辑器，他们都会有内置的代码格式化功能

VSCode 中的代码格式化

在 VSCode 中，我们只需要在文件中点击右键，选择格式化文档，就可以实现这个文件中代码的格式化

格式化前格式化后
1.png2.png

VSCode 默认给我们提供了很多种常用语言的格式化程序，例如 HTML、JS 等
而对于一些其它语言，也可以通过在 VSCode 插件市场中安装该语言相关的格式化程序插件来解决
例如，Markdown 文件 可以使用 Markdown All in One 插件实现格式化；Vue 文件可以通过 Vetur 或 Volar 插件实现格式化；JS 文件虽然有 VSCode 默认提供了格式化程序，但是也可以通过安装其它插件使用其它格式化程序，例如使用 Beautify、Prettier 等插件也可以实现 JS 的格式化。

在 VSCode 中，当 VSCode 发现当前打开的文件找不到没有对应的格式化程序，右键的时候就不会看到格式化文档的选项。
而当 VSCode 发现当前文件类型具有多个格式化程序时，就会显示使用...格式化文档选项，点这个之后就可以选择你想用哪个格式化程序，还可以设置默认使用的格式化程序。

格式化规则

对于一些格式化程序格式化出来的结果，我们可能并不喜欢，例如我喜欢代码缩进用 2 个空格，但是格式化程序格式化出来的缩进是 4 个空格；例如我喜欢代码行末加分号，但是格式化出来的没有分号。
这个时候，我们就要配置一下格式化规则，通过它告诉格式化程序，我需要 2 个空格的缩进，我需要行末加分号。
对于一些比较热门的插件提供的格式化程序一般都是支持格式化规则的配置的，在插件上一般会有说明如何配置，VSCode 自带的格式化程序也是可以配置的，具体配置方式大家有兴趣的话可以去查一下，这并不是本文的主角。

团队协作中代码格式化经常和其他人冲突怎么办

因为每个人使用的格式化程序不同，每个人的喜好不同，所以每个人最后的格式化方案也会多种多样，这就导致随便找两个人，这两个人的格式化方案就是不一样的
但是在团队写作中，如果每个人的格式化方案不同，就会导致大家的代码经常产生大量因格式化的代码变更，还很容易导致代码冲突
于是，为了避免发生这样的问题，在团队协作中，一般会实现规定好一个统一的格式化方案，团队中所有人都使用相同的格式化方案就不会有上面这种问题了
不过想把团队中每个人的格式化程序与格式化配置保持一致，是一件成本很高的事情

Prettier

对于上面成本高的问题，Prettier 给出了解决方案
Prettier 也是一款 VSCode 上的插件，也和其它插件一样，可以进行格式化方案的配置，也支持大量主流语言，并且支持 Idea 等其它代码编辑器
但是它与其它插件不同的是，它的格式化方案配置写在项目中
只需要在项目根目录中增加一个名为 .prettierrc 的文件，然后在其中写下代码格式化的规则
3.png
当 Prettier 执行格式化时，就会去读取项目中的 .prettierrc 文件，然后进行格式化
这样只要团队中的所有人都统一使用 Prettier 插件，大家的格式化方案就会完全一样了

.prettierrc 文件配置项

.prettierrc 文件常用配置项如下

{
  "printWidth": 120, // 单行最大长度
  "tabWidth": 2, // 缩进长度
  "useTabs": false, // 缩进使用空格还是使用 tab 制表符
  "semi": true, // 行尾是否加分号
  "singleQuote": true, // 是否使用单引号
  "arrowParens": "always", // 单参数箭头函数参数周围使用圆括号
  "bracketSpacing": true, // 在对象前后添加空格 
  "endOfLine": "lf", // 结束行形式
  "trailingComma": "all" // 多行时尽可能打印尾随逗号 
}

更多详细配置可以去网上查找，或者去看官方文档，这里就不一一列举了

结语

若文章中存在错误、缺漏、不足或讲的不清晰的地方，可以帮忙指出，提供一些意见或建议，帮助作者在掘金中一起构建更好的生态环境\

希望这篇文章对你能够有所帮助，感谢你的喜欢

avatar
文章
阅读
粉丝