背景：

团队开发中每个人都会有自己的编码习惯，在多人协同开发时为了避免一些低级bug以及保障整个团队代码风格的统一，eslint显得尤其重要。

接下来我们一起聊一聊在团队开发中eslint的配置，一解大家的疑惑。

一、 Vetur

是开发Vue项目时VSCode下必装的一个开发工具。主要功能如下：

语法高亮
Snippet
Emmet
代码格式化
错误检查等等等，更多详细介绍可以查看Vetur官网

可自行在VSCode的扩展中进行下载：

二、eslint

是JS代码检查工具，用来对代码的规范进行检查约束。

在VSCode的扩展中进行安装的eslint，用来自动检测代码中的不规范。
通过npm/yarn命令安装的eslint，通过手动配置eslint命令来检测代码中的不规范，更多命令见eslint官网。以下是本人在日常开发中的一些编码习惯配置：

注：默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果发现配置文件中有 “root”: true，它就会停止在父级目录中寻找。

// .eslintrc.js
module.exports = {
  root: true, 
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow space before function paren
    'space-before-function-paren': 0,
    'one-var': 0,
    'accessor-pairs': 0,
    'camelcase': 0,
    'no-unused-vars': 0,
    'prefer-const': 0,
    'object-curly-spacing': ['error', 'always'],
    'indent': ['error', 2, { 'SwitchCase': 1 }],
    'brace-style': 'error',
    'multiline-comment-style': ['error', 'bare-block'],
    'quotes': ['error', 'single'],
    'comma-dangle': ['error', 'never'],
    'no-empty': 2,
    'semi': ['error', 'always'],
    'object-property-newline': 'error',
    'no-mixed-spaces-and-tabs': 2,
    'wrap-iife': ['error', 'inside'],
    'valid-typeof': 'error',
    'wrap-iife': ['error', 'inside'],
    'array-bracket-newline': ['error', 'consistent'],
    'keyword-spacing': ['error', {
      'overrides': {
        'if': { 'after': true },
        'else': { 'before': true },
        'else': { 'after': true },
        'for': { 'after': true },
        'while': { 'after': true },
        'do': { 'after': true },
        'switch': { 'after': true },
        'case': { 'after': true },
        'try': { 'after': true },
        'catch': { 'before': true },
        'catch': { 'after': true },
        'finally': { 'before': true },
        'finally': { 'after': true },
        'with': { 'after': true },
        'return': { 'after': true },
        'typeof': { 'after': true },
      }
    }],
    /* break等语句之后允许不可达代码 */
    'no-unreachable': 0,
    'no-console': 0,
    'no-redeclare': 0,
    'no-case-declarations': 0,
    'no-array-constructor': 0,
    'no-undef': 0,
    'no-extend-native': 2,
    'vue/no-use-v-if-with-v-for': ['error', {
      'allowUsingIterationVar': true
    }]
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

三、VSCode配置

VSCode的settings.json配置是针对自身以及eslint插件的一些配置，本人常用配置如下：

{
  "workbench.colorTheme": "Monokai",
  "files.autoSave": "off",
  "editor.fontSize": 18,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xhtml",
    "php",
    "javascript"
  ],
  "eslint.autoFixOnSave": true,
  "gitlens.advanced.messages": {
    "suppressFileNotUnderSourceControlWarning": true,
    "suppressShowKeyBindingsNotice": true
  },
  "gitlens.historyExplorer.enabled": true,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "files.associations": {
    "vue": "html"
  },
  "workbench.activityBar.visible": true,
  "files.trimTrailingWhitespace": true,
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "vetur.format.defaultFormatter.js": "none",
  "editor.wordWrap": "on",
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.nodeEnv": "",
  "qp.dockyardAccessToken": "a785a842-7949-4a18-a6f5-e626150a3203",
  "editor.formatOnSave": true,
  "cSpell.userWords": [
    "wordcounter"
  ],
  "[json]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "sync.gist": "2d81e79e658a23386102eec5be6bfd32"
}

四、项目根目录下settings.json （.vscode/settings.json）

即通过eslint.options配置eslint规则，配置成功后可实现VSCode的eslint插件也遵循指定的规范。

// 项目根目录下settings.json
{
  "files.eol": "\n" ,
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "stylelint.configOverrides": {
    "extends": "自己定好的stylint规范文件路径"
  },
  "eslint.options": {
    "configFile": "自己定好的eslint规范文件路径"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

总结

通过以上认识，团队可以通过在项目根目录下配置eslint.options达到团队代码规范更友好的统一。

此处附本人在日常开发中提效工作用到的一些VSCode扩展插件：

团队开发eslint那点事

背景：

一、 Vetur

二、eslint

三、VSCode配置

四、项目根目录下settings.json （.vscode/settings.json）

总结