本文最终目标是实现使用vscode开发vue-cli4生成项目时，具有保存时自动格式化功能。 网上相关文章很多，但大多数或过时，或杂乱，使用起来效果并不理想，我也是几经周折，一点点摸索出来一套有效果的配置。
一、vue-cli4生成项目
相关教程网上有，不再啰嗦，直接上图：
-
格式化方式选择ESlint+Prettier
-
按需选择，我选择保存时格式化
-
配置保存在单独文件里
-
生成后的项目目录如下：
二、vscode 插件及相关配置
- 安装插件，如图：
除了eslint和vetur两个其他看个人习惯
- 相关配置
打开首选项 -> setting, 搜索setting，然后点击Edit in setting.json可以打开配置文件
添加配置如下：
{
"editor.renderWhitespace": "boundary", //显示空格符号
"editor.formatOnSave": false, //关闭默认的格式化方式
"editor.codeActionsOnSave": { //保存时自动使用项目中配置的eslint配置进行配置
"source.fixAll.eslint": true
}
}
这时候保存时自动格式化已经生效，格式化规则使用的官方推荐的默认规则。
三、个性化配置
就拿我自己的需求举例来说吧，默认配置里缩进是2个空格，我想改为4个空格，在网上查了很多资料，各种说法配置都有，杂乱且无效，坑啊。我自己摸索了一套可以用的配置，可以参考使用。
- 配置.eslintrc.js
到了这一步4个空格确实有效果，你可以测试一下，但有两个问题，一是这个配置对vue文件中的html和style里的代码无效。二是你会发现JavaScript代码在两个空格和四个空格之间不停摇摆，因为官方给的配置里@vue/prettier默认是两个空格，和我们的配置起了冲突。 解决办法一就是删除.eslintrc.js文件里的@vue/prettire（不推荐）。方法二就是在根目录里添加.prettierrc配置文件。然后添加配置：
{
"tabWidth": 4
}
这样可以完美的使用保存时自动格式化功能了。
