VSCode中Vue项目自动格式化

发表于 | 分类于
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"
    }
}