eslint 保存自动格式化_记为vue添加eslint过程，采用airbnb规范

添加eslint可以保证项目代码风格的一致性以及规范。校验代码风格有三种方式：

1. 借助vue-cli生成项目自动配置好eslint；
2. 自己配置，本文是确认使用airbnb风格的规则后，按照eslint官网步骤为vue项目添加eslint。
3. 借助vscode集成插件

vue-cli

如果是使用vue-cli生成的项目，则已经配置好如下的eslint配置项。可在package.json里增加配置项。

• eslint-plugin-vue：eslint官方为vue提供的插件
• babel-eslint: 自定义的eslint解析器
• @vue/cli-plugin-eslint：如果使用vue-cli构建项目时选择了eslint选项，则cli会安装@vue/cli-plugin-eslint这个包，这个包向vue-cli-service注入命令lint，可在vue.config.js中配置lintOnSave字段决定是否在保存修改时执行规则检测并修复部分检测不通过的代码；也可手动执行npm/yarn run lint执行eslint检测。

自己添加eslint

可按照如下步骤：首先安装eslint

$ npm install eslint --save-dev

使用eslint初始化一个配置文件(因为是局部安装，所以需要使用相对路径定位eslint)

$ ./node_modules/.bin/eslint --init

这时已经在项目目录中生成文件.eslintrc，包含一份默认的eslint配置，配置详解。也可以不采用eslint --init指令生成一下配置文件，自己创建.eslintrc文件，配置相关选项。

注：parseOptions不是指定解析器，是传给解析器的配置项，告诉解析器需要支持的规则， 如：es2018，和项目是使用ecmaScript模块编写

除eslint外还需要安装

• babel-eslint
• eslint-config-airbnb-base：airbnb风格的规则
• eslint-plugin-import：支持检测es6+的import/export语法，防止文件路径引入错误或拼写错误。
• eslint-plugin-vue：

不同框架或环境可添加的eslint插件列表：keywords:eslintplugin - npm search

配置完成后，在每次编译时不通过的warn和error信息会提示在终端里。

借助vscode的插件

• 搜索安装eslint和vetur插件
• 配置user settings首选项

参考：

vscode 中格式化代码[vue2支持，插件ESLint、Prettier、Vetur]

webpack引入eslint详解

https://www.jianshu.com/p/ea07cc2cf66b

https://www.jianshu.com/p/d848482ecf26