VSCode中Vue项目自动格式化

背景

VSCode在开发Vue项目的时候,尽管我们安装了格式化插件,但是最终运行时还是会有一堆的警告,就是因为格式化代码的方式和eslint的规范不一样导致的。

解决方案

安装插件

  • ESlint:JS代码检测工具
  • Vetur:VUE项目基本插件,可以格式化html、标准css(有分号 、大括号的那种)、标准js(有分号 、双引号的那种)、vue文件,但是!格式化的标准js文件不符合ESlint规范,会给你加上双引号、分号等
  • Prettier - Code formatter:只关注格式化,并不具有eslint检查语法等能力,只关心格式化文件(最大长度、混合标签和空格、引用样式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

修改配置

在VSCode的文件-首选项-设置里,添加如下代码即可,从此直接 Ctrl+S 就能一键格式化了

代码如下:

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