vscode配置prettier+eslint+vetur，导致启用eslint的代码检测一直报错，该如何解决？

Question

下面是我的vscode的settings.json

{
  "editor.wordWrap": "on", // 換行
  "editor.fontSize": 18,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  "editor.minimap.enabled": false, // 关闭缩略图
  "files.autoSave": "onFocusChange",
  "editor.tabCompletion": "on",
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "window.zoomLevel": 0,
  "workbench.startupEditor": "welcomePage",
  // "editor.renderWhitespace": "boundary", // 空白用圆点补足
  "editor.cursorBlinking": "smooth",
  "editor.minimap.renderCharacters": false,
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxml": "html",
    "*.wxss": "css",
    "*.wxs": "javascript",
    // "*.vue": "html"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  //在使用搜索功能时，将这些文件夹/文件排除在外
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/target": true,
    "**/logs": true,
  },
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  /************** ESlint *****************/
  "eslint.format.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
  "eslint.nodePath": "",
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "html",
    "vue",
  ],
  /************** Vetur *****************/
  //  #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  "prettier.printWidth": 120, // 超过最大值换行
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用单引号替代双引号
  "prettier.singleQuote": true,
  "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号
  "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto      
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier  
  "prettier.requirePragma": false, // 不需要写文件开头的 @prettier
  "prettier.useEditorConfig": false,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // #vue组件中html代码格式化样式
      "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
      "wrap_line_length": 100,
      "end_with_newline": false,
      "semi": true,
      "singleQuote": true
    },
    "prettier": {
      "printWidth": 100,
      "singleQuote": true, // 使用单引号
      "semi": false, // 末尾使用分号
      "arrowParens": "avoid",
      "bracketSpacing": true,
      "proseWrap": "preserve", // 代码超出是否要换行 preserve保留
      "trailingComma": "none"
    }
  },
  // vue格式器
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // javascript格式器
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // html格式器
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // json格式器
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // typescript格式器
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "git.confirmSync": false,
}

配置了上述规则之后，vscode保存即格式化代码，但是就是有一个问题，函数与圆括号之间的空格会被自动去掉，导致脚手架配置的eslint会报错。
查看配置发现有控制函数名与后面括号之间的空格这个规则，但就是不起作用。

//  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

在线求助。

Answer 1

如果你格式化 js 文件，除了上面 insertSpaceBeforeFunctionParenthesis 的设置外，再加上如下配置：

  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  }

如果是 vue 文件，请安装 vetur 插件，并对他设置格式化

  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  }

如果有帮助，关注下头条号 [前端雨爸]，让我们一同学习进步。