记录一下 VSCode + Vue 代码格式化

背景

刚开始学习前端开发，从 iOS 和 C++ ，到现在的前端 VUE 开发，有些代码规范很不习惯，比如：字符串单引号（这个还可以接受）， 行尾不建议使用分号（这个很难接受）等，每次都习惯双引号+分号，然后删了重新来，太麻烦了。

插件

vscode 的生态系统很好，有很多优秀的代码格式化插件，令人眼花缭乱，应接不暇，对初学者来说，选择是一个头痛的问题。Ctrl + Alt + F 格式化后，又会有一堆警告。插件版本升级后，网上的很多又都用不了了。
目前大部分都在使用：
VSCode: 1.54.3
ESLint：2.1.19
Vetur：0.33.1
Prettier - Code formatter: 6.3.1

目前可以 Ctrl + S 保存 后自动格式化，单引号 + 行尾 分号。

代码

1. 由于过多设置，很容易导致插件间的冲突，所以尽量以ESLint 为准。

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // 每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 保留行末的分号
  "prettier.semi": true,
  // 使用单引号
  "prettier.singleQuote": true,
  // 不保留对象最后元素后面的逗号
  "prettier.trailingComma": "none",
  // 让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.zoomLevel": -1
}

2. 此时 Ctrl + S ,字符串仍使用双引号，需要添加文件 .prettierrc.json， 并在文件内编辑：

{
	"singleQuote": true,  
  	"trailingComma": "none"
}

至此，Ctrl + S 应该就可以正常格式化了。
如有不妥之处，还望大佬们指点一二。