每天一点小技巧:vscode 前端代码保存自动格式化

1,513 阅读1分钟

每次更改代码的时候,有时会希望可以自动格式化代码,下面就是使用 vscode+prettier配置保存自动格式化

一、安装prettier插件(应用商店中直接下载即可)

如图版本及以后均可 之前的版本不清楚可行否

image.png

二、开始配置

第一步,先打开vscode软件,左下角点击设置 》打开设置》唤出快速搜索条界面。

image.png

第二步,接下来先设定自动保存文件,搜索框贴入files.autoSave筛出设置项,并把设置项属性选择为onFocuschange。

image.png 第三步,设定编辑器默认代码格式化(美化)的插件为Prettier,同理在搜索设置框贴入editor.defaultFormatter,将配置项选择为Prettier。

image.png 第四步,设定Prettier插件保存时自动格式化代码,搜索设置项贴入editor.formatOnSave,将搜索到的项目打钩即可

image.png

接下来修改任意一个代码文件,然后保存即可看到效果😊