这篇文章主要介绍了2020最新版vscode格式化代码的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。

这篇关于vscode格式化配置研究初稿，具体内容如下所示：

前言

之前用vscode进行格式化的时候都是在百度和谷歌上搜“vscode格式化代码”然后直接copy别人。细节的配置一直没去看过。

但是最近一段时间开发项目的时候发现和同组的提交代码的时候格式总是不统一。于是这两天专门看了看插件的官方文档，研究研究。

今天初步有一点研究结果了。会配置一点点了。写此博客与大家共同参考。不足的地方欢迎大家补充，错误的地方欢迎大家纠错。

文章内容包括两个部分：一是理论，二是我的settings.json的配置。

代码格式化目的：

代码格式化的目的一是为了提高代码可读性，方便自己编码，方便团队开发;二是方便找出和修正因为格式导致的错误。

在团队开发。因为每个人的编码习惯不同，如

缩进是2还是4。

代码结尾是否加分号，用单引号还是用双引号。

函数和后面的括号之间是否加个空格。

等等

统一代码格式，让每个人开发更顺利。

为了完成第一个目的，格式化插件有vetur、prettier等针对文件进行格式化的插件;

为了完成第二个目的，格式化插件有ESlint等对文件进行代码检验的插件。

代码格式化的注意事项：

插件作用

首先明白格式化插件分别侧重格式化哪些文件，因为不同的文件有不同的格式规范。

prettyhtml格式化HTML；
prettier格式化css/less/scss/postcss/ts；
stylus-supremacy格式化stylus；
vscode自带格式化插件格式化js；
vetur格式化.vue文件；让不同块使用不同的格式化方案
ESlint：新版的ESlint支持了对.vue文件的校验。

符合代码检验

然后注意让格式化的代码符号ESlint代码检验。

格式化代码最重要的是两点，一点是用格式化插件格式化对应的文件;另一点是让格式化后的代码能通过代码检验工具。

举个例子。

Prettier插件不支持在函数名后面加上括号。这点和ESlint冲突了。所以js的格式化不能使用prettier插件格式化，而是使用vscode自带的js格式化功能来格式化。否则ESlint就是报错，简直烦死强迫症。

插件更新

最后要注意插件的是插件不断更新的，所以网上直接copy的格式化代码会各种不兼容。

如vscode 的 ESLint 插件在某个版本已经移除了 "eslint.validate" 这个配置选项，而网上很多教程都是使用的这个。

在新版的 ESLint 中已经支持了对 *.vue 文件的校验，所以无需再进行这项配置了，只需要添加一个保存时自动修复 ESLint 错误的功能就行了。