vscode 配合 eslint 自动格式化代码

前言

最近在主导开发一个新项目，公司要求用 vue 来开发，用 vue-cli 生成了项目，就着手开动了。

但是后来发现一个问题，挺令人恼火的。

因为我默认在项目中开启了 eslint 检测代码，来保证项目代码的规范性。

这个初衷是好的，但是坏就坏在，eslint 检测代码一开启，才发现自己代码中到处都是不符合规范的问题。

一般情况下，遇到问题，第一反应肯定是开始上网查找解决方案，但是找了很多博文，发现好像不太对啊，怎么大家都是推荐，将 eslint 关掉，不检测，这样固然是可以解决报错的问题，但是代码质量就无法保证了。

这显然违背了我的初衷。

于是我就只有开始自己研究解决方案了，索性功夫不负有心人，经过一段时间的摸索以后，终于找到了完美的解决方案。

当然，我的项目是基于 vue 的，但是其实所有的前端项目，甚至于后端的项目，只要你用的是 JavaScript 来写的代码，其实原理都是一样的。

下面我就详细的介绍一下，如何在项目中配置 eslint 检测，并且配合 vscode 实现自动格式化代码。

过程

1. vscode 装上 eslint 插件

装 vscode 插件的方式，我这里就不赘述了，如果您还不知道该如何安装，请参考官方文档：
https://code.visualstudio.com/docs/editor/extension-gallery

eslint 插件长这样：

安装好以后，打开 vscode 的配置文件—— settings.json ，加上下面这几行规则：

"eslint.autoFixOnSave": true,
"eslint.packageManager": "yarn",
"eslint.validate": [
  "javascript",  //  用eslint的规则检测js文件
  {
    "language": "vue",   // 检测vue文件
    "autoFix": true   //  为vue文件开启保存自动修复的功能
  },
  {
    "language": "html",
    "autoFix": true
  },
],

加上以后，相当于就开启了自动安装项目中的配置来格式化代码的功能。

2. 项目根目录加上 .eslintrc.js 文件

这个文件就是默认的 eslint 规则的配置文件，我在项目中使用了下面这些：

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    "sourceType": "module",
  },
  env: {
    browser: true,
    "es6": true
  },
  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  extends: ['plugin:vue/essential', 'airbnb-base'],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js'
      }
    }
  },
  "globals": {
    "twaver": "readonly",
    "mono": "readonly"
  },
  // add your custom rules here
  rules: {
    'linebreak-style': ["error", "unix"],
    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      js: 'never',
      vue: 'never'
    }],
    // disallow reassignment of function parameters
    // disallow parameter object manipulation except for specific exclusions
    'no-param-reassign': ['off', {
      props: true,
      ignorePropertyModificationsFor: [
        'state', // for vuex state
        'acc', // for reduce accumulators
        'e' // for e.returnvalue
      ]
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      optionalDependencies: ['test/unit/index.js']
    }],
    'no-underscore-dangle': 0,
    'global-require': 0,
    "import/no-dynamic-require": 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    "no-console": 0,
    "no-unused-vars": [
      "off",
      {
        "args": "none"
      }
    ],
    "no-mixed-operators": [
      "error",
      {
        "groups": [
          // ["+", "-", "*", "/", "%", "**"],
          // ["&", "|", "^", "~", "<<", ">>", ">>>"],
          // ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
          ["&&", "||"],
          ["in", "instanceof"]
        ],
        "allowSamePrecedence": true
      }
    ]
  },

}

当然，我是在 vue-cli 生成配置文件的基础上修改了一下，从而形成的这一份配置文件。

这个配置文件中的配置方式，其实都能在 eslint 的官网上找到详细的说明，我这里就简单的讲讲，一般情况下，我们该怎么改这份配置文件呢。

一旦你配置了规则以后，你打开编辑器在编码的过程中，就会出来编码不规范的提示，如下所示：

比如这个地方，我的 break 前面没加空格，于是编辑器会提示我——“Missing whitespace after semicolon.”，这个时候，如果你只是想按照这个规则改正这个错误，那么很简单，你有几种选择：

1. 直接手动加空格
2. 点开快速修复，会弹出一个面板

有四个选项，分别是：修复这个问题；给这一行加上跳过规则检测的代码；给整个文件加上跳过 semi-spacing 规则检测的代码；显示相关文档。

可以看出，我们选择第一项，工具就会将我们的问题自动修复了。

3. 由于之前安装了 eslint 插件，并且开启了保存自动修复的功能，因此直接按 ctrl+s 保存文件，会自动修复这个问题。

以上说的是几种简单的修复方式，但是如果我们想要配置哪些规则需要检测，哪些规则不需要检测，那么我们可以先上官网搜搜相关配置选项的说明：

比如这里，我搜索了 space-before-blocks 规则，然后详细的看了下简介，里面还有代码示例：

看完以后，我发现自己还是不喜欢这条规则，想要去掉它。

那么我就打开 .eslintrc.js 文件，在 rules 选项里加上下面配置：

{
	...
	"rules": {
    "space-before-blocks": 0,	// 适用于不想配置的情况
    // 适用于想要配置的规则
    "space-before-blocks": ["error", { "functions": "never", "keywords": "always", "classes": "never" }]
  }
  ...
}

一般情况下，如果不想开启这个规则，那么就直接将 value 设为 0，具体使用请参考这个页面：
http://eslint.cn/docs/user-guide/configuring

3. .eslintignore.js

通过加上这个文件，配置一些不想进行 eslint 检测的目录，用法跟 .gitignore 类似

后记

其实写了这么多，到最后会发现好像自己什么都没写。

因为这篇文章里面的内容，原理本来就很简单，并不是什么高深的东西。

而且作为一个开源的框架来说，eslint 的使用方式，我相信应该没有比官网介绍的更好了。

所以，学习什么新技术，不要害怕，不要有一种畏难的心理，去官网瞅瞅，耐心研究一下，可能一切的问题都可以迎刃而解呢。