ESLint 代码检测工具篇 | React + Webpack3 后台管理项目搭建（2）

ESLint简介

ESLint是一种检测和报告JavaScript代码错误的工具，以使代码更加一致和避免Bug。ESLint可以让前端程序猿创建自己的检测规则。

 

ESLiint安装

ESLint 有两种安装方式：全局和局部。建议使用全局安装，局部安装意义不大（后面说明原因）。

（1）全局安装：

npm install eslint -g

在项目根目录下，初始化配置文件：

eslint --init

接下来需要回答一系列问题，可根据自己实际需求进行回答。

回答完问题，初始化一个eslintrc.js文件，内容如下：

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

（2）局部安装

npm install eslint --save-dev

初始化配置文件eslintrc.js，一定要找到项目路径下的 ./node_modules/.bin 目录，执行eslint --init命令

eslint --init

执行完命令之后，在 ./node_modules/.bin 目录下自动生成一个 eslintrc.js 文件

 

在 React 项目中使用 ESLint

ESLint允许指定要支持的 JavaScript 语言选项。默认情况下，ESLint支持ECMAScript5语法。也可以通过parserOptions重新指定其他 ECMAScript 版本以及对JSX的支持。

请注意，支持 JSX 语法并不等同于支持 React 。ESLint无法识别 React 中支持的特殊JSX语法，因此建议使用 eslint-plugin-react 插件。

如果ESLint 是采用全局安装的方式，那么 eslint-plugin-react 也必须全局安装：

npm install eslint-plugin-react -g

          如果ESLint 是才用局部安装的方式，那么 eslint-plugin-react 也使用局部安装：

npm install eslint-plugin-react --save-dev

 

ESLint使用方法

（1）使用ESLint检测代码：

eslint ./app/index.js

生成检测报告， Missing semicolon提示缺少分号：

（2）使用ESLint检测并修复代码

eslint ./app/index.js --fix

 使用修复之后，自动为js文件缺少分号的代码行添加分号，生成的报告便不再提示Missing semicolon。

           更多检测规则可以参考官方文档：https://eslint.org/docs/user-guide/configuring

 

局部安装ESLint的特别使用说明

局部安装 ESLint 的情况下，我们使用 ESLint 检测及修复代码时，务必在 eslintrc.js 的目录下执行命令，局部安装的配置文件 eslintrc.js 必须是在你项目的 ./node_modules/.bin 目录下。只有在这个目录下执行eslint命令才有效。

这也是为什么建议采用全局安装ESLint的原因，配置文件 eslintrc.js 生成在 eslint 在node_modules目录下，会造成迁移麻烦，不能同步svn，书写冗长等困扰，实际使用意义并不大。

---

          关于 React + Webpack3项目搭建之 webpack3配置篇：https://blog.csdn.net/m0_37128507/article/details/82683546