vscode eslint自动修复_vscode保存代码，自动按照eslint规范格式化代码设置

前言

编辑器代码风格一致，是前端代码规范的一部分。同一个项目，或者同一个小组，保持代码风格一致很必要。就拿vue项目来说，之前做的几个项目，很多小伙伴代码格式化用的是vue-beautify ,这个格式化工具有个明显的缺点，就是三元不等式明明可以一行显示，非得格式化成3行，import用{}引入多个变量或者函数，非得格式化成好几行，看起来很是别扭。因此，好的格式化工具和团队代码风格一致，显得格外重要。我建议我们整个小组运用同一个编辑器，同一种代码校验，同一个格式化方式。下面我来介绍一下使用vscode+eslint 自动保存，自动格式化的一种方式！

eslint 自动格式化

先说一个前提吧，你在中安装了eslint的依赖，不然配置无用。

例如如下依赖：

"eslint": "^",
"eslint-friendly-formatter": "^",
"eslint-loader": "^",
"eslint-plugin-html": "^",

上面说的是一个前提，下面来说一下具体的配置步骤：

首先，在我们项目跟目录添加. 文件，用于校验代码，编写eslint相关规则，关于eslint的一些具体规则，请查看eslint文档

下面列一下我们项目中常用的eslint规则：

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
  sourceType: 'module',
  "allowImportExportEverywhere": true  //ignore eslint error: 'import' and 'export' may only appear at the top level
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: 'eslint:recommended',
  // required to lint *.vue files
  plugins: [
    'html',
    'vue'
  ],
  // add your custom rules here
  //it is base on 
  'rules': {
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
      'before': true,
      'after': true
    }],
    'block-spacing': [2, 'always'],
    'brace-style': [2, '1tbs', {
      'allowSingleLine': true
    }],
    'camelcase': [0, {
      'properties': 'always'
    }],
    'comma-dangle': [2, 'never'],
    'comma-spacing': [2, {
      'before': false,
      'after': true
    }],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
    'curly': [2,