Eslint相关知识和配置大全

ESLint最初是由Nicholas C. Zakas 于2013年6月建立的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

代码检查是一种静态的分析，经常使用于寻找有问题的模式或者代码，而且不依赖于具体的编码风格。

ESLint 可让程序员在编码的过程当中发现问题而不是在执行的过程当中。

ESLint 使用 Node.js 编写，这样既能够有一个快速的运行环境的同时也便于安装。

一. 环境配置

在npmjs.com内查询 eslint 能够发现

目前最新版Eslint@5.4.0，安装条件

Prerequisites: Node.js (>=6.14), npm version 3+.

 若是想检测vue组件的语法，须要  eslint-plugin-vue 

• ESLint >=3.18.0.
  • >=4.7.0 to use eslint --fix.
  • >=4.14.0 to use with babel-eslint.
• Node.js >=4.0.0

首先安装符合要求的node和npm版本，安装yarn（建议经过msi文件全局安装）

 

二. 配置校验规则

在根目录下新建 .eslintrc.js 文件, 亦能够 eslint --init 生成：

module.exports = {
    "root": true,
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended"
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {"indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "off"
        ],
        "semi": [
            2, "always"
        ],
        "no-console": [
            "off"
        ]
    }
};

咱们使用 eslint:recommended   plugin:vue/recommended   plugin:import  规则进行校验，并优先使用  standard style 规则。

 

须要注意如下几点：

1. 要校验vue组件，须要安装  eslint-plugin-vue  ，并在配置中增长 plugin:vue/recommended 
2.  eslint-plugin-import 用于校验es6的import规则，若是增长import plugin，在咱们使用webpack的时候，若是你配置了resove.config.js的alias，那么咱们但愿import plugin的校验规则会从这里取模块的路径，此时须要配置

   “rules”: {},
   "settings": {
           // 使用webpack中配置的resolve路径
           "import/resolver": "webpack" 
   }

3. 使用babel-eslint语法解析器代替Esprima。EsLint是创建在Esprima(ECMAScript解析架构)的基础上的。Esprima支持ES5.1,自己也是用ECMAScript编写的，用于多用途分析。

4. stanard style建议缩进用两个空格，咱们这里根据本身的使用习惯用4个空格规则进行覆盖。
5. 设置提示规则：

"rules": {
"semi": [2, "always"],
"quotes": [2, "double"]
}

　　规则有3种配置： 

• 0：禁止使用该规则(off)
• 1：将该规则定义为警告 (warn) 等级（不影响exit code）
• 2：将该规则定义为错误 (error) 等级（exit code为1） 

完整版配置见github。

 

三. 自动修复

eslint须要全局安装  yarn global add eslint  

eslint --fix 主动自动修复

eslint --ignore-pattern 'lib/*'  --fix **/*.js **/*.vue

 此命令能够修复大部分语法，剩下的须要手动修复。

注意：eslint须要全局安装，对应的eslint-plugin-vue, eslint-plugin-import等插件也须要全局安装才能使用fix。

对于webpack编译时的自动修复，能够以下配置：

{
    loader: 'eslint-loader',
    options: {
        fix: true
    }
}

 

 

四. 编辑器校验配置

用sublime作vue组件的校验时，虽然各类插件都安装了，但依然是没有效果的，最可能是用js语法校验.vue组件，这是不行的。不知道是否是个人配置有问题，致使不能用vue组件的语法进行校验，因此这里放弃了使用sublime。

本文推荐你们使用vscode做为本身的新IDE。功能丰富、强大，配置简单，会自动根据你打开的文件推荐安装有用的插件。还能够同步sublime等编辑器的操做习惯好比快捷键等。有着方便的语法库提示。

打开左下角设置，加入如下配置，将包安装方式改成yarn（默认是npm），增长保存即进行自动修复，修复文件报错vue文件。若是不加language：vue，则只对js文件修复，一样若是相对html进行修复，则再增长language: html

"eslint.packageManager": "yarn",
"eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
"eslint.autoFixOnSave": true, 

 

 在左侧栏扩展中安装 ESLint和 Vetur插件

 

重启IDE既能够看到校验效果

 

左侧会显示语法错误数和是否修改了此文件， 右侧会波浪线显示语法错误的地方。

 

有时会遇到保存一次修复不彻底的状况，多保存几回便可修复大部分语法。对于敲一会代码保存一下的能够不用担忧这个问题。 

 

 eslintrc.js 完整配置见github

 vscode user settings 推荐配置见github