eslint在日常项目中的实战应用

官网:
    https://eslint.org/

中文网址:
    http://eslint.cn/

基本概念:
    javascript代码检测工具，帮助我们统一团队的代码风格
    
优势:
    1、内置很多检查规则，同时支持自定义规则
    
    2、NodeJS开发的，方便安装
    
可配置的信息:
    Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
    Globals - 脚本在执行期间访问的额外的全局变量。
    Rules - 启用的规则及其各自的错误级别。
    ...
    
使用步骤:
    参考:http://eslint.cn/docs/user-guide/getting-started
    
    1、安装全局 eslint 包，或是本地安装
        npm i eslint -g
        注意：如果执行脚本写在package.json中，可以不用全局安装，本地安装即可
        但是如果要生成eslint的配置文件，必须安装全局包
    
    2、在项目根目录创建一个eslint的配置文件，并且进行配置
        使用 `eslint --init` 在项目根目录下创建一个 .eslintrc.js 的配置文件
        
        配置详见:http://eslint.cn/docs/user-guide/configuring
        
    3、在项目根目录创建.eslintignore 忽略掉不需要lint的目录
        
    4、安装项目依赖的包
        npm i eslint babel-eslint -D
        
    5、在package.json中配置scripts来验证
        "lint":"eslint src"
    
    6、在package.json中配置scripts来修复
        "fix":"eslint --fix src"
        注意:修复的只能是规则中，带有扳手标识的
        
    7、使用pre-commit第三方包，在提交git前，必须先验证通过
        

ESlint With Webpack【以Vue为例】

方式1：
    使用vue的脚手架，直接生成项目，即可完成eslint的配置
        vue init webpack vue_project
        
方式2：
    自己手工搭建Webpack + Vue的项目，然后自己手动的配置eslint
    
    步骤:
        1、切换到项目根目录，使用 `eslint --init` 生成eslint的配置文件
        
        2、安装依赖包，然后在.eslintrc.js配置文件中增加对vue的支持
            npm i eslint babel-eslint eslint-loader eslint-config-standard eslint-plugin-html -D
            
        3、在webpack开发阶段的配置文件中，进行配置
            参考:https://www.npmjs.com/package/eslint-loader
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
                options: {
                // eslint options (if necessary)
                }
            }
            
         4、在package.json中增加eslint的script 配置
             "lint":"eslint --fix src --ext .js,.vue"
             
         5、别忘加在项目根目录加上.eslintignore的忽略文件，并写好要忽略掉的目录（如果没有，会影响性能的）