关于Vetur、Prettier、ESLint插件配置冲突问题

  网上关于Vetur、Prettier、ESLint插件的配置问题，零零散散，基本都是各种……，你懂的😒，都模棱两可，讲不到核心，所以今天在这里做一个汇总。

一、基础认知

1、代码格式化

  通过查看 Vetur 的官方文档，我们可以发现，它不仅仅只有对.vue 文件的特供代码高亮的功能，还有：代码高亮、代码片段、Emmet 语法支持、语法错误校验检查、格式化代码、代码提醒、对三方 UI 框架的支持。

  通过查看格式化代码功能部分的文档，可以发现Vetur 绑定了一些格式化程序（prettier、sass-formatter、stylus-supremacy等）。所以我们要认识到：

  vetur 默认的格式化配置会覆盖在 vscode 的 setting.json 配置的 prettier 格式化配置上，所以要对 prettier 进行配置，直接在 Vetur👏 中配置就可以了。

2、代码规范

  首先要明白使用 eslint 插件能够达到什么样的效果？ —— 编写代码时，若不符合 eslint 语法规范会有 ﹏ 警告、﹏ 报错提示 🤙。

  其次我们要知道：

对于配置文件来说：项目中 npm 的 ESLint规则 优先级是要高于 vscode 的 eslint规则

二、配置汇总

1、本地

• settings.json

{
  // 1、Vetur配置
  // 指定 *.vue 文件的格式化工具为vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // vetur格式化配置
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "tabWidth": 2,
      "printWidth": 300,
      "trailingComma": "none",
      "semi": false,
      "singleQuote": true,
      "bracketSpacing": true
    }
  },

  // 3、Prettier配置
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  // "prettier.configPath": "C:\\Users\\<用户名>\\.prettierrc",

  // 3、ESLint配置
  //eslint 代码自动检查相关配置
  "files.autoSave": "off",
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true, // 输出日志
  "eslint.trace.server": "verbose", // 终端提示
  "eslint.validate": [
    "javascriptreact",
    "javascript",
    // 新增其他校验文件
    "vue",
    "html"
  ]
}

2、开发

• .eslintignore

build/*.js
src/assets
public
dist

• .eslintrc.js

// 个性化代码风格配置
module.exports = {
  rules: {
    // 默认的规则
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",

    // 自定义的规则
    // "prettier/prettier": "off", // 若选用的是prettier代码规范，代码格式化可以交给Prettier插件，不用eslint-config-prettier
    // 强制第一个属性的位置(属性换行)
    "vue/first-attribute-linebreak": [
      2,
      {
        // 单行时，第一属性前不允许使用换行符
        singleline: "beside",
        // 多行时，第一属性前必须使用换行符
        multiline: "below",
      },
    ],
    // 强制每行的最大属性数
    "vue/max-attributes-per-line": [
      2,
      {
        // 单行时可以接收最大数量
        singleline: 10,
        // 多行时可以接收最大数量
        multiline: {
          max: 1,
        },
      },
    ],
    "space-before-function-paren": [2, "never"],
    "comma-dangle": [2, "never"],
    "comma-spacing": [
      2,
      {
        before: false,
        after: true,
      },
    ],
    "comma-style": [2, "last"],
    semi: [2, "never"],
    "semi-spacing": [
      2,
      {
        before: false,
        after: true,
      },
    ],
  },
};

三、总结

  其实，关于上面的一些配置，去看看官方文档、看看大佬的项目配置就可以比较快的得到自己满意的答案。