vscode 配置保存后自动格式化【.vscode、volar、vue3】

问题背景

当前我的项目是通过vue-cli创建的vue3项目，大致配置如下

项目创建完默认就安装了volar，再加上统一代码风格一致性的需求，我想做到每次保存进行自动格式化

听说vue3和volar更配哦~

解决方法

1. 安装插件volar

2. 打开setting.json

首先点击左下角的齿轮，打开设置

或者直接使用ctrl+,打开设置

进入后，切换成Workspace，然后再点击左上角的文件图标

2.配置setting.json

点击后，左侧目录会出现.vscode目录

将下方代码输入即可

{
    "editor.formatOnSave": true
    "editor.defaultFormatter": "johnsoncodehk.volar"
}

接下来，重启我们的vscode，重新运行项目即可

注意：这种方法貌似在未运行项目的时候，是无法自动格式化的，所以还是可能eslint的报错

运行效果