vue项目整合eslint（使用vscode）

demo工程git地址：https://github.com/huangkaizh/vue-eslint-demo

1、安装node、vue-cli(2.*)等参考官网

2、cmd窗口中运行

vue init webpack eslint-demo

相关选项如下图所示：

脚手架初始化工程

3、vscode安装prettier、eslint等插件

4、vscode-文件-首选项-设置（点击右上角图标打开对象模式）

添加以下配置项：

{

  //根据文件后缀名定义vue文件类型

  "files.associations": {

    "*.vue": "vue"

  },

  "eslint.autoFixOnSave": true,

  "eslint.options": {

    "extensions": [".js", ".vue"]

  },

  "eslint.validate": [

    "javascript",

    {

      "language": "vue",

      "autoFix": true

    },

    "html",

    "vue"

  ],

  "[less]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[jsonc]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[json]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[html]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[css]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

}

为方便项目中其他成员，可以考虑在项目下新建.vscode文件夹，新建settings.json文件，将上述json复制进去。

5、项目安装以下依赖

复制以下代码到package.json中的devDependencies对象中：

    "@vue/eslint-config-standard": "^4.0.0", 

    "babel-eslint": "^10.0.2",

    "eslint": "^6.1.0",

    "eslint-config-prettier": "^6.1.0",

    "eslint-plugin-vue": "^5.2.3", 

    "prettier": "^1.18.2",

项目安装依赖

npm i

6、eslint的配置文件（.eslintrc.js）做如下修改

{

  "extends": ["prettier"]

}

整个文件如下所示：

module.exports = {

  env: {

    node: true

  },

  parserOptions: {

    parser: "babel-eslint",

    sourceType: "module",

    allowImportExportEverywhere: false,

    codeFrame: false

  },

  extends: ["@vue/standard", "plugin:vue/strongly-recommended", "prettier"],

  rules: {

    quotes: [1, "single", "avoid-escape"], //引号风格

    // allow async-await

    "generator-star-spacing": "off",

    // allow debugger during development

    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",

    // @fixable 结尾必须有分号

    semi: [

      "error",

      "always",

      {

        omitLastInOneLineBlock: true

      }

    ],

    // @fixable 一行有多个语句时，分号前面禁止有空格，分号后面必须有空格

    "semi-spacing": [

      "error",

      {

        before: false,

        after: true

      }

    ],

    // @fixable 分号必须写在行尾，禁止在行首出现

    "semi-style": ["error", "last"],

    //

    //

    // 可能的错误

    //

    // 禁止重复的二级键名

    // @off 没必要限制

    "vue/no-dupe-keys": "off",

    // 禁止