文档章节

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

王福林
 王福林
发布于 2017/09/11 16:00
字数 1364
阅读 2
收藏 0
点赞 0
评论 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

写更漂亮的javascript

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

小红依 ⋅ 06/05 ⋅ 0

我是如何在公司项目中使用ESLint来提升代码质量的

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

闰土大叔 ⋅ 04/16 ⋅ 0

了解ESlint和关闭ESlint语法检测

vue-cli脚手架创建的项目默认使用ESlint规则,启动项目的时候因为各种语法报错,不得不先停下了解一下什么是ESlint,然后储备一下如何关闭ESlint语法检测。 【使用vue-cli快速搭建项目】:h...

四小七 ⋅ 05/11 ⋅ 0

使用ESLint & Prettier美化Vue代码 | 晚晴幽草轩

Prettier 是一个有见识的代码格式化工具。它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式,并在必要时包装代码。如今,它已成为解决所有代码格式问题的优选...

⋅ 前天 ⋅ 0

从零开始React项目架构(二)

前言 这篇文档我们来配置 eslint,创建项目文件、目录架构 开发 一、配置eslint 配置eslint我需要安装一些依赖包: 修改文件 创建 文件 当然,也可以使用来创建 eslint 的配置规则有很多,可...

ZeroNoob ⋅ 06/07 ⋅ 0

用 TS + Vue 写了一个在 Chrome 中运行 Prettier 格式化的扩展程序

在介绍 prettier-chrome 之前请允许我先介绍一下什么是 Prettier 如果你已经知道这是什么了并且已经会配置了,那么你可以直接跳到 prettier-chrome 的介绍 什么是 Prettier ? 有见识的代码格...

u3u ⋅ 05/29 ⋅ 0

ESLint里的规则教会我,无规矩 不编程

编程风格要统一 编程风格这个东西,说实在的对于刚加入团队的新成员来说还是很难让人完全适应的。因为每人的编程风格都不同,完全是各有千秋的既视感啊 到了新公司后团队中的每个人也都有各自...

chenhongdong ⋅ 05/21 ⋅ 0

VS code中关闭eslint

最近在学习electron-vue,第一次使用难免出现一下大大小小的问题,谨以此记录历程吧。 在vs code中编译一个实例的时候总是提示语法有错误,怎么改都不行,真心烦人,后来一看网上大家都抱怨原...

bill800208 ⋅ 06/01 ⋅ 0

vscode 代码格式化,语法检查插件ESLint+Prettier

ESLint+Prettier prettier只关注格式化 ,插件prettier-vscode,编辑器的配置setting.json会出现prettier插件的相关配置节点,同时也能看到一些默认的配置信息。 安装成功后,编辑器默认的格式...

momo1987 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

AppDelegate 设置Root相关

self.window = UIWindow.init(frame: UIScreen.main.bounds) self.window?.backgroundColor = UIColor.white self.window?.makeKeyAndVisible() self.window?.rootViewController = RootTabB......

west_zll ⋅ 2分钟前 ⋅ 0

Java并发系列5--倒计时器CountDownLatch

今天讲一个倒计时器工具,叫CountDownLatch。需要这个工具的场景大概有:当所有的小任务都完成之后,再启动大任务。 先看代码: public class CountDownLatchDemo {static final CountDow...

大大枣 ⋅ 3分钟前 ⋅ 0

SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

前言 SpreadJS作为一款性能出众的纯前端电子表格控件,自2015年发布以来,已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM,作为管理Node.js库最有力的手段,解决了很多NodeJS代码部...

葡萄城控件技术团队 ⋅ 4分钟前 ⋅ 0

Mac下IntelliJ IDEA快捷键大全

https://blog.csdn.net/lisongjia123/article/details/54949364

细节探索者 ⋅ 7分钟前 ⋅ 0

建造者模式

1、工厂模式中创建的对象大都是简单的对象 复杂的产品类并且拥有不同的属性特点的管理就需要用到建造者模式 2、建造者模式: 将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以...

职业搬砖20年 ⋅ 8分钟前 ⋅ 0

Mysql数据库开发 怎么优化SQL语句?

 1) 现场抓出慢查询语句 show full processlist;   2) 配置参数:   slow_query_log_file = ON 慢查询开启开关   long_query_time =2 记录大于2秒的sql语句   log_queries_not_usi...

老男孩Linux培训 ⋅ 9分钟前 ⋅ 0

Laravel 安装执行php artisan migrate 出现字段过长错误

最近在自己研究Laravel Laravel版本:5.6 PHP版本:7.1.9 Mysql版本:5.7.19 Apache版本:2.4.27 系统版本:windows10 首先要保证电脑安装了composer,和node.js 执行命令 composer global ...

Marhal ⋅ 14分钟前 ⋅ 0

ELK6.0日志从收集到处理完整版教程(二)

ELK简介 Elasticsearch 开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风格接口,多数据源,自动搜索负载等。也可以认为ElasticSearch是一...

bz_z ⋅ 17分钟前 ⋅ 0

Spark项目之电商用户行为分析大数据平台之(七)数据调研--基本数据结构介绍

目录 一、user_visit_action(Hive表) 1.1 表的结构 1.2 表的说明 二、user_info(Hive表) 2.1 表的结构 2.2 表的说明 三、task(MySQL表) 3.1 表的结构 3.2 表的说明 四、工作流程...

xiaomin0322 ⋅ 22分钟前 ⋅ 0

评分卡模型剖析之一(woe、IV、ROC、信息熵)

信用评分卡模型在国外是一种成熟的预测方法,尤其在信用风险评估以及金融风险控制领域更是得到了比较广泛的使用,其原理是将模型变量WOE编码方式离散化之后运用logistic回归模型进行的一种二...

火力全開 ⋅ 22分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部