文档章节

在React+Babel+Webpack环境中使用ESLint

王福林
 王福林
发布于 2017/09/11 16:00
字数 1364
阅读 3
收藏 0

ESLint是js中目前比较流行的插件化的静态代码检测工具。通过使用它可以保证高质量的代码,尽量减少和提早发现一些错误。使用eslint可以在工程中保证一致的代码风格,特别是当工程变得越来越大、越来越多的人参与进来时,需要加强一些最佳实践。

本文假设您已经有一个react+babel+webpack的起始工程,可以参考react-webapp-startkit

首先,安装eslint包

在项目的跟目录下,运行

npm --save-dev install eslint

因为我们使用了webpack,所以必须要告诉webpack我们在构建时使用eslint,安装eslint-loader

npm --save-dev install eslint-loader

安装之后,我们可以再webpack配置中使用eslint加载器了。
webpack.config.js

...
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader'
    }
  ]
},
...

此外,我们既可以在webpack配置文件中指定检测规则,也可以遵循最佳实践在一个专门的文件中指定检测规则。我们就采用后面的方式。

在根目录下:

touch .eslintrc

.eslintrc

{
  "rules": {
  }
}

稍后我们可以在该文件中指定规则,但首先我们要在Webpack配置文件中引入该文件。

webpack.cofnig.js

...
devServer: {
  contentBase: './dist',
  hot: true,
  historyApiFallback: true
},
eslint: {
  configFile: './.eslintrc'
},
plugins: [
...

现在可以启动app了,在根目录下

npm run dev // 取决与package.json中的定义

你可能会看到The keyword ‘import’ is reserved的解析错误。这是因为eslint还不知道通过Babel使用的ES6特性(比如import)。

ESLint + Babel

之前,我们已经安装了babel-loader(在起步工程中)来转换我们的代码。现在我们可以将它和eslint-loader一同使用。

webpack.config.js

...
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel-loader', 'eslint-loader']
    }
  ]
},
...

或者,使用webpack的preLoaders

webpack.config.js

...
module: {
  preLoaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader'
    },
  ],
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    }
  ]
},
...

我们可以通过babel-eslint来检测ES6代码。

还是先安装

npm install --save-dev babel-eslint

修改.eslintrc

{
  parser: "babel-eslint",
  "rules": {
  }
}

现在应该可以启动app了,但是没有任何错误显示,不要高兴的太早,这只是因为我们还没有添加任何检测规则。

ESLint规则

我们来添加我们的第一条规则。

修改.eslintrc

...
"rules": {
  "max-len": [1, 70, 2, {ignoreComments: true}]
}
...

我们添加了一条规则来检查代码的单行长度,当单行代码长度大于70个字符时,检测会报错。

启动app,你可能会看到关于代码长度的错误,因为某些行多于70个字符了。我们可以修改规则来允许更多的字符。

.eslintrc

...
"rules": {
  "max-len": [1, 120, 2, {ignoreComments: true}]
}
...

如果还有错误,可能你就需要考虑修改代码了。

React的ESLint规则

现在来添加一些检测React的代码规则,使用eslint-plugin-react

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

安装之后,我们可以使用react插件来指定我们关于react的第一条代码规则。比如我们要求组件指定PropTypes

.eslintrc

{
  parser: "babel-eslint",
  "plugins": [
    "react"
  ],
  "rules": {
    "max-len": [1, 120, 2, {ignoreComments: true}],
    "prop-types": [2]
  }
}

当启动app后,你可能会看到PropTypes定义的错误,你可能想要修复这些错误。

另外,我们可以使用一些包含推荐规则的预设,但暂时我们先扩展自己的规则。

扩展ESLint规则

我们不想每次都指定这些规则,所幸已经有很多符合最佳实践的规则。其中之一就是Airbnb Style Guide,此外Airbnb还开源了他们自己的ESlint配置。

已经有一部分依赖包安装了,但还缺少一些:

npm --save-dev install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

Now we can add a one-liner to our ESLint configuration to use Airbnbs’ ESLint configuration. When you look back at the packages we installed, you can see that the configuration includes JSX and React rules.

接下来,通过一行代码的配置来让我们可以使用Airbnb的ESLint配置(你可以通过查看node_modules里面的包来查看,这个配置包含了jsx和React的规则)

.eslintrc

{
  parser: "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "max-len": [1, 120, 2, {ignoreComments: true}],
    "prop-types": [2]
  }
}

我们可以看到可以很简单的使用别人的配置规则来扩展ESLint规则。我们还可以使用其他的扩展,但目前Airbnb代码规范和ESlint配置非常的受欢迎并被大多数开发者所接受。

微调

有时候,为了迎合自己的项目需要,需要对某些特殊的规则微调。
比如我们不想看到no-unused-vars(为使用过的变量定义)的警告,可以

.eslintrc

{
  parser: "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "no-unused-vars": 0,
    "max-len": [1, 120, 2, {ignoreComments: true}],
    "prop-types": [2]
  }
}

上面这种是全局的配置,如果是只想在某些文件中禁止检测,可以如下修改(通过注释的方式)

src/index

/*eslint-disable no-unused-vars*/
import SC from 'soundcloud';
/*eslint-enable no-unused-vars*/
import React from 'react';
import ReactDOM from ‘react-dom';
...

pre-commit钩子

如果项目使用了git,可以通过使用pre-commit钩子在每次提交前检测,如果检测失败则禁止提交。可以在很大一定程度上保证代码质量。

这里我们使用了pre-commitgit包来帮助我们实现这一目标。

首先在package.json中添加script命令:

"scripts": {
  "eslint": "eslint --ext .js src"
}

其次,安装pre-commit

npm install pre-commit --save-dev

最后,在package.json中配置pre-commit需要运行的命令:

"pre-commit": [
  "eslint"
]

完成之后,在每次提交之前,都会运行eslint命令进行检测,如果检测到有违反代码规则的情况,则会返回1,导致git commit失败

本文转载自:http://www.cnblogs.com/le0zh/p/5619350.html

共有 人打赏支持
王福林
粉丝 10
博文 94
码字总数 37444
作品 0
徐汇
程序员
在项目中如何使用ESLint提高代码质量

关于ESLint的版本,目前ESLint的稳定版本是v4.19.1,如果你看过ESLint的官方文档,就会知道官网推出了ESLint v5.0.0-alpha.1,这是ESLint的一个主要版本升级。由于这是预发布版本,ESLint尚未...

小欣妹妹
04/18
0
0
深入浅出eslint——关于我学习eslint的心得

很多人在引入eslint后,发现项目中出现了很多错误提示,看着让人的强迫症都犯了,于是就放弃了使用。可小编在这却还是要说在项目中要用到eslint,尤其是在项目一开始构建搭建的时候,就约定好...

草履虫的思考
09/28
0
0
atom 配置 eslint 使用 Google 规范 格式化 js 文件

eslint官方提供了3种预安装包: eslint-config-google Google标准 执行安装: eslint-config-airbnb Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plu......

阿豪boy
01/25
0
0
(转)Eslint 从入门到放弃

前言 ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子,而是在实际需求得不到 JSHint 团队响应 的情况下做出的选择:以可...

davelet
05/10
0
0
写更漂亮的javascript

用更合理的方式写 JavaScript 目录 声明变量 对象 数组 字符串 函数 箭头函数 模块 迭代器和生成器 属性 变量 提升 比较运算符和等号 代码块 注释 空白 逗号 分号 类型转换 命名规则 声明变量...

小红依
06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【源码分析】面试问烂的equals和各种字符串、Integer比较

今天在空闲时间聊天时发现,面试题中的equals问题,以及String、Integer等的判等问题还是讨论的比较激烈而且混乱。。。(滑稽) 其实网上有非常多关于这种面试题的文章或者博客,其实多去看看就...

LinkedBear
3分钟前
0
0
jvm汇总

https://www.toutiao.com/i6490796229067276814/ https://tech.meituan.com/jvm_optimize.html

tantexian
3分钟前
0
0
限制MongoDB使用内存大小

限制MongoDB使用内存大小 0 收藏(6)因为MongoDB的内存是系统的虚拟内存管理的,MongoDB并不干涉内存管理工作,这样虽然可以简化Mongo的工作,但同时Mongo的内存使用是没法控制的。 真的没法控...

Airship
4分钟前
0
0
“赋能开发者”高峰论坛暨西安葡萄城30周年庆典隆重举办

 2018 年 10 月 18 日,“赋能开发者”高峰论坛暨西安葡萄城 30 周年庆典在古城西安隆重举办。   此次论坛由西安葡萄城信息技术有限公司(以下简称“西安葡萄城”)主办。作为软件开发行业...

葡萄城技术团队
6分钟前
0
0
聊聊storm的reportError

序 本文主要研究一下storm的reportError IErrorReporter storm-2.0.0/storm-client/src/jvm/org/apache/storm/task/IErrorReporter.java public interface IErrorReporter { void report......

go4it
6分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部