VS Code中如何配置Beautify插件实现保存时自动格式化代码？

刚接触VS Code的话确实会有点懵，别担心，我一步步教你完成配置：

第一步：打开VS Code的设置界面 #

你有几种快速打开设置的方式：

• 快捷键：Windows/Linux用 Ctrl+,，Mac用 Cmd+,
• 通过菜单操作：点击顶部菜单栏的「文件」→「首选项」→「设置」（英文界面是「File」→「Preferences」→「Settings」）

第二步：开启「保存时自动格式化」 #

方式一：图形界面配置 #

1. 在设置界面的搜索框里输入 editor.formatOnSave
2. 找到对应的选项，勾选它前面的复选框，这样就开启了保存时自动触发格式化的功能。

方式二：手动编辑settings.json配置 #

如果你更习惯直接编辑配置文件：

1. 在设置界面的右上角，点击那个长得像 {} 的图标，打开settings.json文件
2. 在文件中添加或修改这一行：

   "editor.formatOnSave": true
   

3. 保存settings.json，配置立即生效。

第三步：指定Beautify为默认格式化工具 #

因为VS Code可能同时安装了其他格式化扩展，你需要确保Beautify是当前文件类型的默认格式化工具：

1. 打开一个你想用Beautify处理的文件（比如.js、.html或.css文件）
2. 右键点击编辑器区域，选择「格式化文档」旁边的小箭头，然后点击「配置默认格式化程序」
3. 在弹出的列表中，选择Beautify对应的选项（比如「Beautify for JavaScript, JSON, CSS, HTML」）

可选：自定义Beautify的格式化规则 #

如果你想调整缩进、换行、引号风格等细节，可以在项目根目录或者你的用户目录下创建一个.jsbeautifyrc文件，写入自定义配置。举个例子：

{
  "indent_size": 2,
  "indent_char": " ",
  "max_preserve_newlines": 2,
  "preserve_newlines": true,
  "wrap_line_length": 80,
  "end_with_newline": true
}

Beautify会优先读取这个文件的配置，覆盖默认规则。

内容的提问来源于stack exchange，提问作者UC3D