vue2设置保存自动执行run lint配置步骤

一. ESlint介绍

ESLint的用途主要是：

1. 审查代码是否符合编码规范以统一代码风格；
2. 审查代码是否存在语法错误；

用法：
  通常在项目中安装了ESlint相关的包以后，可在.eslintrc.js文件的rule中手动添加代码校验规则，以保持一个项目的代码风格统一。eslint详细配置介绍见：ESLint在Vue中的使用详解

二. 保存自动执行run lint

设置保存自动执行分为run lint分为三步

1. 安装eslint插件；
2. 手动添加eslint规则rule；
3. 编辑器setting配置；

1、插件安装
  vscode插件扩展搜索里面安装eslint，如下图
在vue项目初始化时若选择安装eslint，则package.json的devDependencies中会出现以下配置：

"eslint":"^6.7.2","eslint-plugin-prettier":"^3.1.3","eslint-plugin-vue":"^6.2.2",

若没有则手动安装以上安装包；

2、手动添加eslint规则rule
  关于rule配置，主要配置的是eslint配置规则，通常在.eslintrc.js文件中配置，详细配置见文章ESLint在Vue中的使用详解。

3、编辑器setting配置；
打开setting设置，点击右上角打开setting（JSON)设置，

添加如下代码：

"editor.tabSize":2,"eslint.autoFixOnSave":true,"eslint.validate":["javascript",// 用eslint的规则检测js文件{"language":"js","autoFix":true},{"language":"vue","autoFix":true},],"eslint.options":{"extensions":[".js",".vue"]},"editor.codeActionsOnSave":{"source.fixAll.eslint":true},"eslint.run":"onSave",

配置完成后每次ctrl+s保存文件即可自动自行执行run lint。