2018-11-14

关于ESLint的安装和使用

摘要：在项目中加入ESLint验证的方式和必要性

在现在前端的项目中有许多语法的规范啊还有一些方法的规范，如果通过人工的比对话在现在来说就太low了！！！

因为现在的项目大部分会通过构建化工具进行项目的管理、打包的，所以在写代码的时候会出现每个人写代码的方式不一样，而且就算你又编写代码规范，但是人的行为是各种各样的，不是说你有他就会这么去做，所以会在项目合并时出现代码编写不统一，还有就会出现代码不能进行共享，造成他看不懂他的代码，所以接下来说一下ESLint的作用以及必要性！！

ESLint的定义：ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。

必要性 的话根据ESLint的定义就可以看出来，代码的风格统一，因为在大型项目的开发中，不同开发人员会开发不同的模块，并且各模块开发完毕以后会进行汇总调用，这样代码统一就起到了至关重要的作用了，一是方便开发人员之间能够快速的熟悉对方的代码，从而更快的投入到使用中，提高工作的效率以及减少出现错误的频率。二是错误的检验，因为每个开发人员的水平参差不齐，所写的代码也参差不齐，所以避免不了在开发中出现各种各样的错误，也许一个会报一个很小的一个错误不耽误使用，但是多个人将代码合并以后就会出现致命错误，所以利用ESLint可以减少错误的产生，这样每个人都有了相同的规范，致命的错误就有可能会被降低。

以上都是关于ESLint的使用的必要性的为什么要使用它，接下来就为各位介绍使用方式和个性化ESLint！！👇👇👇

安装：以下安装都是在node环境下进行的，如果没有的话，自行安装

全局安装，适合你全部项目都需要eslint
$ npm install -g eslint

接下去安装配置文件
$ eslint --init

这个步骤会让你选择自己的风格

向你询问你的style

使用一些流行的style

通过你的文件来配置

基本配置：

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended”,//可以选择一些流行的style 比如google
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "ecmaVersion": 7, 你的javascript 版本
        "sourceType": "module"
    },
    "plugins": [
        “react” //插件，支持react
    ],
    "rules": {
        "indent": [ //缩进
            "error”, //可选项为 off warn error 对应的数字 0 1 2
            "space"
        ],
        "linebreak-style": [//换行的style
            "error",
            "unix"
        ],
        "quotes": [//引号 是单的还是双的
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
};