安装`vscode`插件

首先我们需要安装eslint和vetur插件

eslint插件是为了编写代码时提示错误并且保存代码时自动给格式化
vetur插件是为了支持vue文件，比如语法高亮、代码格式化等

局部`eslint`配置

在项目根目录下创建.eslintrc.js，然后配置如下
```
module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: ['standard', 'plugin:vue/recommended']
}
```
这里我们使用业界流行的standard js规范，可以省去繁琐的配置。eslint-plugin-vue插件是为了对vue文件进行lint的，这里我们启用推荐的规则。

配置项目package.json如下

{
  "scripts": {
    "lint": "eslint --ext .js,.vue ./src"
  },
  "devDependencies": {
    "eslint": "^6.1.0",
    "eslint-config-standard": "^13.0.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.2.3",
    "husky": "^3.0.1"
  },
  "eslintIgnore": [
    // 这里配置想要eslint忽略的文件或目录
  ],
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  }
}

上述配置是利用husky在进行git commit时执行pre-commit钩子，从而进行eslint校验。

安装项目依赖

在项目根目录下执行npm i命令安装eslint等依赖包

配置vscode的工作区设置

{
  // 文件保存时自动格式化
  "editor.formatOnSave": true,
  // 关闭js、ts、jsx、tsx的自动格式化，因为与codeActionsOnSave冲突，导致不会按照eslint规则来修复
  "[javascript]": {
    "editor.formatOnSave": false,
  },
  "[typescript]": {
    "editor.formatOnSave": false,
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false,
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // 打开对html、vue的lint，并自动fix
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  // vetur取消js、ts默认格式器，因为会跟codeActionsOnSave冲突
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none"
}

这份配置要保存为工作区配置，然后将项目根目录下的.vscode/settings.json加入git管控，这样他人下载项目代码时也能使用同样的vscode配置。该配置可以保证保存文件时自动修复eslint问题。

上述只是针对单个项目的配置，且上述配置会导致非eslint规范的项目保存文件时无法自动修复js、ts、jsx、tsx代码。所以我们还需要全局配置下eslint，这样非eslint规范项目也能很好的自动修复

全局eslint配置

随便在哪个位置（这里为/Users/vivo/.vscode-eslint目录）新建.eslintrc.js文件，内容如下：
```
module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: ['standard', 'plugin:vue/recommended']
}
```
为什么不全局安装eslint及其插件等，是因为eslint6对全局安装不友好，详见Plugins and shareable configs are no longer affected by ESLint's location

在该目录下安装eslint及其插件

npm i eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue

配置vscode的用户设置如下

{
  // 文件保存时自动格式化
  "editor.formatOnSave": true,
  // 关闭js、ts、jsx、tsx的自动格式化，因为与codeActionsOnSave冲突，导致不会按照eslint规则来修复
  "[javascript]": {
    "editor.formatOnSave": false,
  },
  "[typescript]": {
    "editor.formatOnSave": false,
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false,
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // 打开对html、vue的lint，并自动fix
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  // 设置eslint包的位置
  "eslint.nodePath": "/Users/vivo/.vscode-eslint/node_modules",
  "eslint.options": {
    // 设置eslint插件的查找位置
    "resolvePluginsRelativeTo": "/Users/vivo/.vscode-eslint",
    "configFile": "/Users/vivo/.vscode-eslint/.eslintrc.js"
  },
  // vetur取消js、ts默认格式器，因为会跟codeActionsOnSave冲突
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none"
}

全局安装与局部安装会有冲突，全局安装的配置会导致采用eslint规范的项目使用全局安装的eslint库及插件。如果出现这种情况，请自行在采用eslint规范的项目的vscode工作区设置中使用初始值进行覆盖，如下

{
  "eslint.nodePath": "",
  "eslint.options": {
    // 每一项都要赋值
    "resolvePluginsRelativeTo": "",
    "configFile": ""
  }
}

利用vscode和eslint统一vue项目代码风格

安装vscode插件

局部eslint配置

全局eslint配置

安装`vscode`插件

局部`eslint`配置