ESLint 工作原理探讨

wuyangchun 发布于2019-05-23 14:33 / 3566人阅读

摘要： 彻底理解ESLint。

原文：ESLint 工作原理探讨

作者：zhangwang

Fundebug经授权转载，版权归原作者所有。

ESLint 可谓是现代前端开发过程中必备的工具了。其用法简单，作用却很大，使用过程中不知曾帮我减少过多少次可能的 bug。其实仔细想想前端开发过程中的必备工具似乎也没有那么多，ESLint 做为必备之一，值得深挖，理解其工作原理。

在正式讨论原理之前，我们还是先来聊聊为什么要使用 ESLint。

为什么要使用 ESLint

ESLint 其实早在 2013年 7月就发布了，不过我首次使用，是不到三年前的一个下午（清楚的记得那时候使用的编辑器主要还是 sublime text3 ）。我在一个项目中尝试了 ESLint ，输入 eslint init 后按照提示最终选择了非常出名的 airbnb 的代码风格，结果整个项目几乎所有文件都被标红，尝试使用 --fix 却无法全部修复，内心十分沮丧。

现在想想，那时候的我对 ESLint 的认知是不完整的，在那时候的我看来 ESLint 就是辅助我们保持代码风格一致的工具，airbnb 的 js 风格备受大家推崇。

那时候的我知道保持代码风格的一致性能增加可读性，更便于团队合作。不过一致没有去深想，为什么大家会推崇某特定的风格，这背后肯定是有着特殊的意义。

保持一致就意味着要对我们编写的代码增加一定的约束，ESLint 就是这么一个通过各种规则（rule）对我们的代码添加约束的工具。JS 做为一种动态语言，写起来可以随心所欲，bug 遍野，但是通过合适的规则来约束，能让我们的代码更健壮，工程更可靠。

在官方文档 ESLint - rules 一节中，我们可以看到官方提供的了大量的规则，有推荐使用的（"eslint:recommended"），也有默认不启用的，还有一些废弃的。

这和现实生活是一致的，现实生活中，我们也在不自觉中遵守和构建着各种不同的规则。新的规则被构建是因为我们在某方面有了更多的经验总结，将其转变为规则可能是希望以后少踩坑，也能共享一套最佳实践，提高我们的工作效率。就像我们提交代码时，把希望大家共同遵守的约定转变为 MR 模板，希望所有人都能遵守。

在我看来 ESLint 的核心可能就是其中包含的各种规则，这些规则大多为众多开发者经验的结晶：

有的可以帮我们避免错误；

有的可以帮我们写出最佳实践的代码；

有的可以帮我们规范变量的使用方式；

有的可以帮我们规范代码格式；

用的可以帮我们更合适的使用新的语法；

…

之前看过一张图能很好的描述 ESLint 的作用：

如果你不使用 ESLint ，你的代码只能靠人工来检查，格式乱七八糟，运行起来 bug 丛生，你的合作者或用户会怒气冲冲

专线服务云服务器工作原理网络工作原理爬虫工作原理 cdn工作原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7019.html

十分钟了解eslint配置 && 编写自定义eslint规则

摘要：的初衷是为了让程序员可以创建自己的检测规则。为了便于人们使用，内置了一些规则，当然，你可以在使用过程中自定义规则。所有的规则默认都是禁用的。在文件里的字段进行配置。如何编写一个知道了的原理，接下来可以自定义一个。 eslint介绍 ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用...

zqhxuyuan 2019-08-26 10:36 评论0 收藏0
前端模块化和构建工具

摘要：以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。强大的设计使得它更像是一个构建平台，而不只是一个打包工具。以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。如今，网页不再...

ad6623 2019-08-20 18:37 评论0 收藏0
用 husky 和 lint-staged 构建超溜的代码检查工作流

摘要：官方出品的工具列表也是个非常不错的参考。很多同学选择在持续集成阶段后文用代称做，比如使用远程的来触发。常见做法是使用或者在本地提交之前做。本文作者王仕军，商业转载请联系作者获得授权，非商业转载请注明出处。 showImg(https://segmentfault.com/img/remote/1460000009546916?w=1195&h=705); 具备基本工程素养的同学都会注重...

twohappy 2019-06-24 17:54 评论0 收藏0
webpack工程化集成React技术栈（一）

项目开始前，我们先聊一聊关于项目的一些说明。该项目起始于2017年初，当时公司主要技术栈为gulp+angular，鉴于react的火热的生态，在公司决定研发bss管理系统时选用react开发，目的也是为react native打下基础，以解决后期公司大前端技术栈的逐步成熟。（当时没有选择vue开发的主要原因是weex生态还不够特别成熟），既然决定换新，项目的构建也跟着一起换，从gulp转向火热的...

tianhang 2019-08-22 14:47 评论0 收藏0
前端代码质量进阶：自定义 eslint 规则校验业务逻辑

摘要：自定义规则校验代码业务逻辑是社区中主流的工具，提供的大量规则有效的保障了许多项目的代码质量。本文将介绍如何通过自定义检查规则，校验项目中特有的一些业务逻辑，如特殊作用域特殊使用规范性等。自定义 eslint 规则校验代码业务逻辑 eslint 是 JavaScript 社区中主流的 lint 工具，提供的大量规则有效的保障了许多项目的代码质量。本文将介绍如何通过自定义 eslint ...

Coly 2019-08-26 11:52 评论0 收藏0