一、基础配置
网上大多数有关vscode格式化的文章都会提到Prettier这个插件，而且确实非常好用。但在使用它之前，你需要先进行基础的格式化配置，否则除了英文单词之外，其他的一切都会在保存时一团糟。
在文件->首选项->设置中搜索“Format On Save”，勾选上这一选项即可。此时，保存时就会自动对代码进行格式化。不过注意，这个配置只对语言服务（如JavaScript、TypeScript等）生效，其他的格式化需要使用专属插件。
二、使用Prettier
如果你需要进行更为复杂的格式化，Prettier是一个不错的选择。这个插件可以支持大部分语言，还能自动检测你的文件类型并进行格式化。在使用Prettier之前，你还需要在终端中安装它，可以使用npm或yarn来安装。命令如下：
npm install --save-dev prettier
yarn add --dev prettier
安装完成后，在文件->首选项->设置中进行如下配置：
{
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"prettier.singleQuote": true,
"prettier.semi": false,
"files.eol": "\n",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true
}
其中，“prettier.singleQuote”代表是否使用单引号，“prettier.semi”代表是否使用分号，“files. eol”代表使用哪种行尾格式，这些都是可以自己根据情况进行调整的。
三、使用ESLint
ESLint是一款非常出色的代码检查工具，可以保证你的代码质量和规范性。在使用ESLint之前，你还需要在终端中安装它，可以使用npm或yarn来安装。命令如下：
npm install eslint --save-dev
yarn add eslint --dev
安装完成后，你需要创建一个 .eslintrc.json 或 eslintrc.js 文件，根据项目需求进行配置。配置后，你可以将其与Prettier一起使用，来实现更完美的代码格式化效果。
使用ESLint能够帮助我们识别代码中的问题并进行修复，而使用Prettier则能解放我们的双手，让我们不再需要一遍又一遍地手动调整代码格式。
四、使用EditorConfig
不同编辑器的默认字符编码、换行符类型等都不同，这会导致在不同编辑器中打开同一个文件时显示不一致，甚至会影响到代码的运行。而使用 EditorConfig 插件可以解决这个问题，它会创建一个 .editorconfig 文件，并根据其中的规则为文件做出相应的调整。
在使用EditorConfig之前，你需要先在终端中安装它，可以使用npm或yarn来安装。命令如下：
npm install --save-dev editorconfig
yarn add --dev editorconfig
安装完成后，在根目录下创建一个 .editorconfig 文件，然后在其中添加如下样例内容：
root = true
[*]
charset = utf-8
indent_style = tab
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
这样，你就可以为自己的代码配置一些基本规则，保证代码的整洁、一致性。
五、格式化JSON文件
在使用vscode编辑JSON文件时，可能会遇到格式化问题。你可能已经注意到，在JSON文件中缩进时，几个空格和一个tab键的缩进是不能通用的。要解决这个问题，你需要在.vscode/settings.json文件中添加如下代码：
{
"[json]": {
"editor.insertSpaces": true,
"editor.tabSize": 2
}
}
通过以上配置，你就可以愉快地进行JSON文件的编辑和格式化啦。
总结
vscode的格式化配置非常强大，通过合理的配置可以大大提高我们的代码编写效率。在开始使用前，你需要先进行基础的格式化配置，然后按照需求选择使用Prettier、ESLint和EditorConfig中的哪些工具。希望这篇文章能帮助你更好地了解与使用这些工具。
