Vue项目使用Vscode编辑，配置Eslint检查以及使用代码格式化工具之间的各种冲突、各种爱恨情仇的终极解决办法。

vscode来编码vue前端项目的时候，我们像用eslint来做代码规范检查，配合一些代码格式化工具，能够让我们编写代码爽歪歪。

但是，这其中的配置，搭配，是个坑，大坑。

搞了一大圈，各种说法都有，各种配置都有，整个人都不好了。

特此记录一下正确的解决办法。

方案一：Eslint + prettier + stylelint方案

大体可以参考：http://www.imooc.com/article/details/id/292407【vue项目整合Eslint和stylelint规范代码】

安装依赖：

npm install eslint eslint-plugin-vue --save-dev

根目录创建文件.eslintrc.js
内部内容，后面。

有些目录，忽略eslint校验的配置
建一个.eslintignore文件，内容：

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

stylelint配置累帮助格式化css的代码，统一风格

npm i -D stylelint stylelint-config-standard stylelint-webpack-plugin

在根目录新建.stylelintrc.js配置如下：

module.exports = {
  extends: "stylelint-config-standard",
  rules: {
    "color-no-invalid-hex": true,
    "rule-empty-line-before": null,
    "color-hex-length": "long",
    "color-hex-case": "lower",
    "unit-whitelist": ["em", "rem", "%", "s", "px"],
    "declaration-colon-newline-after": null,
  },
};

代码美化prettier配置：
npm i -D prettier @vue/eslint-config-prettier

这个时候，一起在.eslintrc.js写入内容：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ["eslint:recommended", "plugin:vue/essential", "@vue/prettier"],
  rules: {
    "generator-star-spacing": "off",
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/no-parsing-error": [
      2,
      {
        "unexpected-solidus-in-tag": false,
      },
    ],
    "prettier/prettier": "off", // 这一句是为了解决一个bug
  },
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 7,
    sourceType: "module",
    ecmaFeatures: {
      // 添加ES特性支持，使之能够识别ES6语法
      jsx: true,
    },
  },
};

在上面的依赖上，我还安装了babel-eslint以及eslint-plugin-prettier两个包，
"prettier/prettier": "off"这一句是解决一个报错，具体原因可看
http://www.a4z.cn/fe/tag/prettier/【在 vscode 中使用 eslint + eslint-config-prettier + eslint-plugin-prettier 报错问题】

装完后，全部的主要的相关的依赖包

"devDependencies": {
    "@vue/eslint-config-prettier": "^6.0.0",
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.0.2",
    "stylelint": "^13.2.1",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-webpack-plugin": "^1.2.3",
  },

然后vscode编辑器，安装Prettier-Code forematter插件，

然后在编辑器，首选项/设置或是工作区设置写入以下内容：

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    "vue"
  ],
  "editor.wordWrap": "wordWrapColumn",
  "editor.formatOnSave": true,
  "vetur.validation.template": false
}

配置好了，就可以使用双引号，末尾分行这种格式的代码风格，以及自动格式化等。有问题会红色波浪线提示错误。

方案二：eslint + Vetur

待补充。