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。