挖坑指南：ESLint + VS Code自动格式化代码

原文链接

前言

最近在整理公司的之前的项目，对整个产品线进行梳理重构。由于项目的编码人员换了好几拨，每个人编码又各有各的风格。现在在重新翻看，可读性很差。考虑到后期项目的扩展，以及对现有项目的优化，决定对代码进行整理，并统一使用ESLint进行规范约束。

开始

“编码一时爽，重构火葬场。”

 刚开始接触vue学习的时候，也都是自然而然地关闭了ESLint。以至于没有从头开始养成良好的习惯，现在也是从0开始，将ESLint正式引入到工作中。

如果你才刚刚起步，我建议你先了解下ESLint以及它在前端工作流和团队协作中的必要性。从开始上手时，就规范自己的 编码行为，好过走到半路又回过来重新开始。

实践

如何上手？首先还是官方文档。我觉得不论是学什么，你得先去了解它是什么，以及它为什么出现，然后才是衡量是否要在工作或生活中使用它。

官方文档：https://eslint.org/

中文文档：https://cn.eslint.org/

官方的描述

 ESLint它很灵活，所有的检查都是基于规则的。

ESLint规则：https://cn.eslint.org/docs/rules/

使用ESLint三部曲

1. 安装
   npm install -g eslint
2. 初始化
   npm init
3. 编写配置文件（由于ESLint配置文件支持多种文件扩展，此处以.eslintrc.js为例）

   module.exports = {
     /**
      * 默认情况下，ESLint会在所有父级目录里寻找配置文件，一直到根目录。
      * 为了将ESLint限制在一个特定的项目，设置root: true；
      * ESLint一旦发现配置文件中有 root: true，就会停止在父级目录中寻找。
      */
     root: true,
     // 指定解析器
     // babel-ESLint: 一个对Babel解析器的包装，使其能够与ESLint兼容。
     // parser: 'babel-eslint',
     // 设置解析器能帮助ESLint确定什么是解析错误。
     parserOptions: {
       parser: 'babel-eslint',
       // 指定js版本。语法上的支持
       ecmaVersion: 6
     },
     // 脚本在执行期间访问的额外的全局变量
     // globals: {},
     // env: 指定脚本的运行环境
     env: {
       // 一个环境定义了一组预定义的全局变量。
       browser: true,
       // 会自动开启es6语法支持。
       es6: true,
       node: true
     },
     // 使用第三方插件。全局安装的 ESLint 实例只能使用全局安装的ESLint插件。本地同理，不支持混用。
     plugins: [
       'html',
       'vue'
     ],
     // 配置文件从基础配置中继承已启用的规则。
     /**
      * eslint:recommended  启用核心规则，在规则页面中被标记为 √ 的。
      */
     extends: [
       // plugin:(此处不能有空格)包名/配置名称。解析时plugin是解析成 eslint-plugin-vue。如果有空格会解析失败，eslint-plugin- vue。
       // plugin可以省略包名的前缀 eslint-plugin-
       // 'plugin:vue/essential',
       // '@vue/standard',
       'eslint:recommended'
       // 也可以指定另一个基本配置文件的绝对路径或相对路径
     ],
     
   
     /**
      * 每个规则有【3】个错误级别。
      * off或0: 关闭该规则；
      * warn或1: 开启规则，使用警告级别的错误，不会导致程序退出；
      * error或2: 开启规则，使用错误级别的错误，当被触发的时候，程序会退出。
      */
     rules: {
       /**
        * 【================================================ Possible Errors ================================================】
        * 这些规则与JavaScript代码中可能的错误或逻辑错误有关。
        */
       // 强制"for"循环中更新子句的计算器朝着正确的方向移动
       'for-direction': 2,
       // 禁止function定义中出现重名参数
       'no-dupe-args': 2,
       // 禁止对象字面量中出现重复的key
       'no-dupe-keys': 2,
       // 禁止出现重复的case标签
       'no-duplicate-case': 2,
       // 禁止对catch子句的参数重新赋值
       'no-ex-assign': 2,
       // 禁止对关系运算符的左操作数使用否定操作符
       'no-unsafe-negation': 2,
       // 禁止出现令人困惑的多行表达式
       'no-unexpected-multiline': 2,
       // 禁止在return、throw、continue、break语句之后出现不可达代码
       'no-unreachable': 2,
       // 禁止在finally语句块中出现控制流语