参考地址:https://baijiahao.baidu.com/s?id=1704599223959464441

准备提要

配置前要安装下图所示的Prettier美化插件。
vscode 配置保存时自动格式化代码 - 图1

教程开始

第一步,先打开vscode软件,方便快捷的方式就直接使用快捷键ctrl+,(是ctrl加逗号)唤出快速搜索条界面。

vscode 配置保存时自动格式化代码 - 图2
第二步,接下来先设定自动保存文件,搜索框贴入files.autoSave筛出设置项,并把设置项属性选择为onFocuschange。
vscode 配置保存时自动格式化代码 - 图3
第三步,设定编辑器默认代码格式化(美化)的插件为Prettier,同理在搜索设置框贴入editor.defaultFormatter,将配置项选择为Prettier。
vscode 配置保存时自动格式化代码 - 图4
第四步,设定Prettier插件保存时自动格式化代码,搜索设置项贴入editor.formatOnSave,将如下图所示的选项框打钩即可。
vscode 配置保存时自动格式化代码 - 图5