eslint使用心得

一、简介

eslint是一个开源的JavaScript代码检查工具,其作者是大名鼎鼎的“红宝书”《JavaScript高级程序设计》作者 Nicholas C. Zakas。Nicholas C. Zakas 在他的多部著作中都有涉及到JavaScript的代码风格问题,而eslint正是用来统一JavaScript代码风格的工具。

二、使用的目的和原因

1. 统一代码风格,减少review成本和低级错误的出现

eslint可以配置在开发环境中,帮助我们找出项目中不符合规则的代码并给出提示。在我们的开发环境中,开发者每次修改代码,都会先用eslint检查代码,再进行babel和react的编译,一旦eslint发现error级别的错误,那么报错文件不会进行后续的编译。这样可以让eslint随时提醒开发者代码是否符合规范,从而减少了我们花费在review代码风格上的时间,降低了低级bug的出现。

2. 支持ES6

同类型的代码检查工具还有jslint和jshint,和它们相比,eslint对ES6语法支持更好,这是我们选择使用eslint的主要原因之一,可以通过eslint在团队内快速统一ES6的语法,精简产品代码,提高开发效率。

3. 插件丰富

eslint除了上面说的支持ES6语法之外,还支持各种插件,可以让我们添加自己需要的语法规则。比如项目引入了react,那么最好使用jsxreact 这两个插件来检查代码,使基于react的代码更符合规范。

三、使用方式

eslint的插件是多种多样的,可以使用npm全局安装eslint,通过命令行的方式来进行代码检查;如果构建工具是gulp,建议使用gulp-eslint;由于我们项目采用webpack作为构建工具,这里重点介绍在webpack中使用eslint的方式。

基础配置

首先引入eslint基础包,再加入webpack中对应的插件eslint-loader,然后在项目根目录下创建.eslintrc文件后进行eslint的配置。

通过.eslintrc文件,可以指定代码运行环境是node还是browser;有哪些全局变量,例如jQuery之类;支持的ECMAScript版本号等。其中,最重要的是规则配置,告诉eslint工具需要检查哪些语法规则,配置方式如下:

"rules": [
    "rule-name1": "0",
    "rule-name2": "1",
    "rule-name3": "2"
]

规则格式是"<规则名称>: <告警级别>",告警级别分为三种:

  • "0"表示忽略问题,等同于"off";
  • "1"表示给出警告,等同于"warn";
  • "2"表示直接报错,等同于"error"。

配置4个空格一个缩进,不符合配置时报错:

"indent": ["error", 4]

或者,switch下的case缩进4个空格,不符合配置时警告:

"indent": ["warn", 4, {
    "SwitchCase": 1
}]

引入并配置好eslint和eslint-loader后,就可以开始添加webpack的相关配置了:

preLoaders: [
    {
        test: /\.js$/,  // 检测所有的js文件
        loader: "eslint-loader", // 使用eslint插件
        exclude: [   // 排除第三方文件
            /node_modules/,
            /app\/lib/
        ]
    }
]

让webpack在打包文件之前,对除第三方外的js文件用eslint进行检查。

完成上述配置后,webpack在构建时就能自动对js代码用eslint进行检查了。

注:由于webpack在默认配置下遇到error并不会抛出错误终止代码打包,需要在webpack命令上添加bail参数让webpack抛出错误:

webpack --bail --progress --colors --config webpack.config.js

添加插件

如果需要react和jsx的语法检查,可以引入eslint-plugin-jsx-a11y和eslint-plugin-react这两个插件并在.eslintrc文件中添加入plugins的配置:

"plugins": [
    "react",
    "jsx-a11y"
]

规则格式是"<插件名称>/<规则名称>: <告警级别>":

{
    "rules": {
        "react/jsx-uses-react": "error",
        "jsx-a11y/no-static-element-interactions": "warn"
    }
}

添加扩展

除了支持插件外,eslint还支持通过扩展来快速的引入开源的JavaScript代码规则,减少了我们选择规则的时间,例如eslint官方推荐的规则:

"extends": "eslint:recommended"

或者是前端圈内很流行的airbnb 的规则:

"extends": "airbnb"

前提是要先引入airbnb 的插件。airbnb的规则不仅包含了官方推荐的大部分规则,还加入了jsx、react和import的相关规则,能帮助我们一键完成react应用的代码规则配置。
如果扩展引入的有些规则不符合所在团队的开发习惯,可在.eslintrc的rules中用自己的配置覆盖掉扩展中的默认值。

引入扩展的目的是减少我们挑选规则的时间,但这些规则不一定切合团队和项目的具体情况。如果一味地让团队去遵守别人制定的规则,很可能造成对现存代码的大范围修改,反而降低了开发效率。因此,建议先依据团队现有的良好的风格挑选出最符合现有开发习惯的规则,保证已有的好习惯不被破坏的基础上,再添加一些希望在团队中推广的规则。

四、规则节选

JavaScript是一种很灵活的语言,一些笔误或者多余的写法并不会引起代码编译打包报错,却会留下风格不良或实现错误的代码。我们选取了下面两条规则来自动定位这些问题代码:

消除不必要的类型转换no-extra-boolean-cast

JavaScript的判断语句会自动将一个任意类型的值转成Boolean类型,但我们有时会看到如下代码:

if (!!str) { // if (str)

}
var bar = Boolean(str) ? 'yes' : 'no'; // str ? 'yes' : 'no'

这种类型转换都是多余的,因为判断本身就会帮你做这步操作,所以我们选取了这个规则,并设置为error级别:

"no-extra-boolean-cast": "error"

在条件判断中不能出现赋值语句no-cond-assign

上面我们说过JavaScript在条件判断时,会把任何类型的值都转成Boolean,所以如果我们代码中出现了如下笔误:

if (a = 1) { // a === 1
    ...
}

这是一个bug, 但JavaScript引擎却不会报错,所以我们把这条规则也设置为error级别:

"no-cond-assign": "error"

代码可读性是团队开发中极为重要的一环,可读性高的代码能减少沟通成本并让代码更容易重构。我们选取了下面两条规则来提高代码可读性:

消除魔幻数字no-magic-numbers

magic number特指我们代码中出现的含义不明确的数字,如下面这段代码中的199,0.8和0.79:

let finalPrice = originalPrice;
if (originalPrice > 199) {
    finalPrice = 199 + (originalPrice - 199) * 0.8;
}
if (isVip) {
    finalPrice *= 0.79
}

上面代码的意思是,对于购物金额超过199的部分享8折优惠,vip用户可以对最终金额享受7.9折优惠。

但是这种写法的代码可读性差,在不了解业务需求的情况下很难理解其中涵义,我们为这种代码选择了直接报错的配置:

"no-magic-numbers": "error"

上面的代码需要改为下面的版本才能通过检查

const BASE_PRICE = 199;
const BASE_DISCOUNT = 0.8;
const VIP_DISCOUNT = 0.79;

let finalPrice = price;
if (originalPrice > BASE_PRICE) {
    finalPrice = BASE_PRICE + (price - BASE_PRICE) * BASE_DISCOUNT;
}
if (isVip) {
    finalPrice *= VIP_DISCOUNT;
}

将意义不明的数字声明为意义明确的常量,常量名称能让代码自注释,从而提高了代码的可读性,并且由于数字仅出现一次,修改也更容易。

但是,我们发现引入这条规则之后,多处代码报错no-magic-number:

var arr = ['a', 'b', 'c'];

var second = arr[1]; // 这里取下标1会报错

var last = arr[arr.length - 1]; // 这里的1没有赋值给一个变量也会报错

这明显是不符合我们期望的,但eslint中支持配置哪些数字不被视为magic number并忽略对数组下标的检查:

"no-magic-numbers": ["error", {
    "ignoreArrayIndexes": true,
    "ignore": [0, 1]
}]

0,1两个数字以及数组下标都不会被当成magic number。

最后,我们还规定这类数字必须使用ES6的const声明为常量:

"no-magic-numbers": ["error", {
    "enforceConst": true
}]

限制函数的最大参数个数max-params

在实际开发中,代码会随着需求的变化而变化,比如一个显示弹出框的方法:

function showDialog (title, content) {
  ...
}
showDialog('标题', '内容');

最初只需要控制弹出框的标题和内容,showDialog()方法也就只有两个参数,简单明了。后来需要控制弹出框的位置、大小以及遮罩的显示,代码变成了这样:

function showDialog (title, content, position, size, showShadow) {
  ...
}
showDialog('标题', '内容', [200, 400], [500, 500], true);

这时代码变得难以阅读,而且在调用的时候需要记住每个参数的位置,很不方便。通过max-params规则:

"max-params": ["error", 4]

要求创建的方法中参数不能超过4个后,上面的代码必须改写为下面的版本才能通过检查:

function showDialog (options) {
  ...
}
showDialog({
    title: '标题',
    content: '内容',
    position: [200, 400],
    size: [500, 300],
    showShadow: false
});

将所有的参数配置包含在一个object类型的参数中,增强了代码的灵活性和可读性。

尽管我们的项目中很早就引入了ES6,但是代码中依然存在大量ES5和ES6的语法混用。我们选取了下面几条规则来推广ES6的使用:

禁用var关键字no-var

ES6的let关键字解决了var关键字无法实现块作用域的问题;const关键字解决了var关键字无法定义常量的问题。通过规则:

"no-var": "error"

禁用var关键字后,代码必须根据不同场合选用let或const替代var。

箭头回调函数优先prefer-arrow-callback

JavaScript编程离不开回调函数,但回调函数常常会遇到this引用的指向问题。在ES5中,虽然可通过重新给this赋值:

var that = this;
$.get('a.php', function (res) {
    that.success(res.data);
});

或改变this绑定对象:


setTimeout(function () {
    this.tip('success')
}.bind(this), 500);

这两种方式来解决这个问题,但代码却显得不够简洁美观,而在ES6中则提供了箭头回调函数这一更简洁的方式:

$.get('a.php',  (res) => {
    this.success(res.data);
});

...

setTimeout( () => {
    this.tip('success')
}, 500);

ES6的箭头回调函数标记法"()=>{}"等同于ES5中的"function (){}.bind(this)"。因为项目的已有代码中这种用法过多,大范围修改工作量较大,对于这个用法我们只设置了警告规则提醒开发者注意,并不要求强制修改:

"prefer-arrow-callback": "warn"

模版优先prefer-template

早期的JavaScript项目中拼接html字符串的做法十分常见:

var person = {
    name: '小明',
    ...
};

var htmlStr =
    '<div>' +
        '<label>姓名:</label><span>' + person.name + '</span> +
        ...
    '</div>';

所以很多前端库都会提供模版方法,而ES6的语言特性内置了对模版的支持:

var person = {
    name: '小明',
    ...
};

var htmlStr = `
    <div>
        <label>姓名:</label><span>${ person.name }</span>
        ...
    </div>`;             

通过规则:

"prefer-template": "error"

将字符串的拼接操作统一为ES6的模板操作。

时间: 2024-09-09 03:55:18

eslint使用心得的相关文章

JavaScript 踩坑心得— 为了高速(上)

一.前言 很多情况下,产品的设计与开发人员一直想打造一套高品质的解决方案,从而快速.平稳地适应产品迭代.速度是衡量产品适应性的真正且唯一的标准,而且,这并不是笔者的一家之言. 「速度是衡量适应能力的真正指标.」 --艾瑞克·埃利奥特 许多公司选择 JavaScript,就是看中了它灵活.快速的优点.尽管此言非虚,但如果你在构建 JavaScript 系统时考虑得不够周全,灵活与高速的特性反而可能将你带入歧途. 一些值得特别关注的问题包括: 代码重复 样式或风格不一致 无法随意扩展 工具与模块选择

Java的Package与Import机制之我的理解(初学者的心得)

初学|心得    以下内容的测试条件是你的机器上,设置了path命令PATH= D:\JDK1.4\BIN;D:\JDK1.4\LIB;,可以正常执行java和javac命令,不用设置classpath路径的情况下.       从一个简单的例子谈谈package与import机制 基本原则:为什么需要将Java文件和类文件切实安置到其所归属之Package所对应的相对路径下. 为什么要这样做呢?如果你在程序中,用到打包命令package,并且直接编译和执行该程序.例如:以下面程序为例: pac

钉钉 ISV 应用开发的一些心得

1. 背景 前段时间从前到后完整地做完了一个简单的钉钉上的 ISV 应用 -- 猿活动. 最开始想做这么一个小工具,是想到,平时部门中经常会组织一些分享活动,但是这些分享活动却没有一个比较直观的"站点"来记录一次又一次的,很多人的努力的付出,这是很可惜的事.同时,在做这些活动的时候,也缺少一些互动的手段,比如现场签到,打赏什么的. 好吧,刚开始的时候是这样想的,当然,在做的过程中,也发现钉钉的基于"组织"的应用场景,在某些情况下限制挻大的(比如现场的交互,因为到现场

PPT色彩搭配的一些心得

一直有很多人问我PPT配色上的问题,其实说实在的,我PPT制作时也只是按自己的喜好去搭配认为舒服的色彩,俗话说跟着感觉走,在这里我将一点心得和一些见解和大家一起分享. 一.选取PPT主色和PPT辅助色 PPT设计中都存在主色和辅助色之分. PPT主色:视觉的冲击中心点,整个画面的重心点,它的明度.大小.饱和度都直接影响到辅助色的存在形式以及整体的视觉效果. PPT辅助色:在整体的画面中则应该起到平衡主色的冲击效果和减轻其对观看者产生的视觉疲劳度,起到一定量的视觉分散的效果. 值得强调的是:在PP

关于工作效率的心得分享

这是去年11月底在小组里分享过的工作效率心得,在这里也跟大家分享一下工作"快"感哈哈.我相信大家应该都有过工作效率的些许烦恼.而这个效率啊伴随我很长时间的痛苦.每每到PDI的时候领导必提效率有木有?自认为快是不算的,必须领导和客户方说了算,对于当年校招进来的毛驴,是一件泪崩漫长的提升过程.整天琢磨如何快,多快的速度才算快,恨不得快到连参照物都变得动感模糊.时间是把杀猪刀,不仅催人老还得与它赛跑,经过这几年的自残式磨练,也早该总结总结. 一. 懂得整理需求 效率是先把重要的事情优先排序来

XSL学习心得 - 制作图像超链接

链接|心得 这是我今天学习的时候遇到的另一个问题,做图像超链接要把链接地址放到<a>的href属性中去,可是这就是在标签中套标签,是不可以的,查了<Web编程实做教程>,才知道正确的解决方案,现在与大家分享. 此段代码运行需要两张图片:a.gif和b.gif. my.xml 以下内容为程序代码: <?xml version="1.0" encoding="GB2312"?><?xml-stylesheet type=&quo

XSL学习心得 - 调用属性值

心得 也许这个问题很简单吧,但是刚才查了好多篇入门教程都没有涉及,幸好hsower发的xsl语法介绍中有详细的说明.     <xsl:value-of select="元素名称/@属性名称"/>    比如一段XML代码是这样的:   <王朔 网址="www.wangshuo.com">知名作家加著名评论家王朔先生的地方</王朔>    我们可以用<xsl:value-of select="王朔/@网址"

ASP应用的四个心得分享

学好一门编程语言有两个条件是必不可少的,一是理论与实践结合,在实际例程去验证书本上的理论能加深你对理论的理解:二是学会总结,把学习.运用中的心得体会记下来,当成一种经验或者教训加以提炼并在日后的应用中加以改进,一定能提高你对这门编程语言的认识.以下是笔者在学习与运用ASP编程中的一点经验,希望能对大家有所帮助.          学好一门编程语言有两个条件是必不可少的,一是理论与实践结合,在实际例程去验证书本上的理论能加深你对理论的理解:二是学会总结,把学习.运用中的心得体会记下来,当成一种经验

FTP服务器的部署和维护心得

部署与维护FTP服务器是网络管理员的基本技能.虽然如此,但是笔者每次为企业部署完FTP服务器应用之后,总会有所收获.因为不同的企业需求不同,他们会提出形式各样的需求. 而笔者每次解决用户的一个需求之后,总会有一种成就感.这不前不久笔者刚文成一个FTP服务器的搭建.不过这个案例有点特殊,因为其FTP服务器采用的操作系统是Linux.为此感悟就更多了. 心得一:为用户分配组 FTP服务器常用来放置一些工作文件.为此网络管理员在部署FTP服务器的时候,必须要注意其权限的管理.也就是说,要做到用户只能够