vscode 保存vue 格式化 ESLint 检查报错问题解决

1. 问题描述

在用vue 写项目的时候，照例开启了ESLint 语法检查，但是发现在使用 vscode 格式化格式化保存后各种报错，单双引号，函数空格各种问题。因为 vscode 它自身的那个格式化插件是不匹配 ESLint 的。所以需要修改一些配置达到配置的效果。这里有两种途径进行修改。

2. 解决方法一

既然vsdoe格式化不与ESlint匹配，那么我们就对vscode的规则进行修改。在当前工程下创建文件.prettierrc,并修改相关配置项，这里我们只对单双引号和分号做修改。

 {
     
   "semi": true,
   "singleQuote": true
 }

3.解决方法二

修改保存vue格式的样式位置：

3.1 打开配置项

3.2 找到相对应的配置项并修改相对应的值

"[vue]": {
     
        //"editor.defaultFormatter": "esbenp.prettier-vscode" //修改前，
        "editor.defaultFormatter": "octref.vetur" // 使用 vetur 格式化规则，修改后
    },

3.3 设置vetur 规则

"vetur.format.defaultFormatterOptions": {
     
        "js-beautify-html": {
     
            "wrap_attributes": "force-aligned" //属性强制折行对齐
        },
        "prettier": {
     
            "semi": true, // 保留分号
            "singleQuote": true, // true 为使用单引号
        },
    },