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