关于整合eslint和prettier的副作用

Question

为了解决eslint与prettier的冲突，按照网上的教程，使用eslint-config-prettier禁用掉eslint中与prettier冲突的规则，然后用eslint-plugin-prettier覆盖掉eslint中的规则，这样是解决了冲突的问题，但是eslint-vsode插件的提示却有问题，牛头不对马嘴的错误提示。

正常的eslint会这样提示

Answer 1

看着像vscode编辑器。
vscode配置eslint+prettier的方法网上有很多。我也试过了很多。总结了出一部分经验，我目前在用。

首先分别安装eslint、prettier code formatter以及vetur这三个插件，其他的不需要。

安装好插件之后，打开设置（快捷键 ctrl+,）,然后点击右上角的“打开设置json”，打开setting.json。

{
  "editor.fontSize": 16,
  "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,  // 缩略图关闭
  "editor.wordWrap": "on", // 換行
  "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": "none", // 在对象或数组最后一个元素后面是否加逗号（在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": "vscode-typescript",
  "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]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // html格式器
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "git.confirmSync": false,
}

vue格式是通过vetur来格式化的，javascript是通过prettier来格式化的。vue需要满足eslint规范，需要让渡给prettier，通过prettier来规范vue格式。但是eslint有一些特殊要求，比如设置prettier来实现。
这样设置了之后，ctrl+s一键保存然后格式化vue、js和html、css等文件。