文档章节

在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

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

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

小欣妹妹
04/18
0
0
(转)Eslint 从入门到放弃

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

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

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

小红依
06/05
0
0
我是如何在公司项目中使用ESLint来提升代码质量的

ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具。 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/。 ESLint的版本问题 目前ESLint的稳...

闰土大叔
04/16
0
0
Vue项目使用eslint + prettier规范代码风格

写在前面 团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格。因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目...

FrankCheung
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

内存模型是怎么解决缓存一致性的?

在再有人问你Java内存模型是什么,就把这篇文章发给他。这篇文章中,我们介绍过关于Java内容模型的来龙去脉。 我们在文章中提到过,由于CPU和主存的处理速度上存在一定差别,为了匹配这种差距...

Java填坑之路
11分钟前
1
0
vue-cli 3.0 初体验

最近复习了下vue,突然发现vue-cli已经更新到3.0版本了,并且变化蛮大,看来要不停的学习,真是一入前端深似海。 安装步骤: 1、全局安装 npm install -g @vue/cli Vue CLI 的包名称由 vue-...

tianyawhl
12分钟前
0
0
Angular进阶之路

【初级】会写页面,能出东西。 给定环境和 rest API,不用第三方库,能在十分钟内完成一个 master/detail 结构的带路由的应用(可以不管美观)。 知识点:Angular CLI、组件、路由、HTTP 服务...

陆小七的主页
15分钟前
0
0
Redis缓存数据库安全加固指导(一)

背景 在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一位,但是原生...

中间件小哥
15分钟前
0
0
百万级数据mysql分区

1. 什么是表分区? 表分区,是指根据一定规则,将数据库中的一张表分解成多个更小的,容易管理的部分。从逻辑上看,只有一张表,但是底层却是由多个物理分区组成。 2. 表分区与分表的区别 分表...

罗文浩
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部