本文详细介绍了与Eslint有关的一些知识,主要分为三个部分:
ESLINT是一种开源JavaScript代码检查工具,该工具由Nicholas C. Zakas于2013年6月创立。代码检查是静态分析。它通常用于查找问题或有问题的代码,并且不依赖特定的编码样式。对于大多数编程语言,将进行代码检查。一般而言,在检查工具中构建了汇编程序。
JavaScript是一种动态的弱语言类型,更可能在开发中犯错误。因为没有编译程序,要查找JavaScript代码错误,通常需要在执行过程中连续调试。ESLINT允许程序员允许程序员在编码过程中而不是在执行过程中找到问题。
ESLINT的最初意图是允许程序员创建自己的测试规则。ESLINT的所有规则都是可插入的。ESLINT的默认规则与其他插件没有什么不同。规则本身和测试可以取决于相同的模式。为了促进人们的使用,ESLINT有一些规则,当然,您可以在使用过程中自定义规则。
您可以使用NPM或纱线安装ESLINT,本文将使用Yarn.First创建目录,初始化文件,然后安装。
安装完成后,您需要设置一个配置文件,该文件可以直接通过命令行工具生成:
在此过程中,ESLINT将让您选择一些选项:
之后,您将收到一个文件,内容如下:
JSON和YAML配置文件支持注释。
现在,您可以在任何文件或目录上运行ESLINT。
让我们看一个简单的例子。首先,将规则添加到中部:,此规则要求必须使用语句后不偿还的变量必须使用,否则将报告错误。
ESLINT提供的所有规则都可以在此页面上找到:https://eslint.org/docs/rules/
项目根目录创建文件之后,并将以下内容写入文件:
然后,您可以运行Eslint:
执行命令后,将在控制台上看到以下错误:
您还可以将其添加到上面的命令中,以便ESLINT尝试修复错误。对于上图中的错误,ESLINT将自动用它替换它,而感兴趣的读者可以尝试自己。
ESLINT中有两个重要部分:规则和插件。
在上一个示例中,我们使用表单值对添加规则。关键是规则的名称和值的值。这种类型的规则没有属性,只需要打开或关闭。
规则的错误级别可以是以下值之一:
除了表单的钥匙值规则外,还有一些规则不仅要打开或关闭,而且还配置了属性。
尽管ESLINT有一些好的规则,但通常不足以满足项目的所有需求,尤其是在使用React,Vue,Angular和其他库和框架等库时。EslintPlug -In允许我们添加自定义规则根据项目的需求。插件-in以NPM模块的形式发布,名称格式为。
要使用插头-in,请首先通过NPM安装插头-in,然后将插头-in添加到配置文件中。例如,如果要使用插头-in,则可以将其添加到配置文件中像这样:
应当注意,添加此插头并不意味着将自动启用此插头的所有规则。仍然需要在配置文件中的规则对象上配置使用插件的每个规则。
但是,如果每个规则需要配置,则对于开发人员来说是非常不友好的,因此ESLINT提供了另一种方法:共享配置。
共享配置ESLINT使我们能够通过将配置发布到NPM来共享配置配置。类似于插件的名称,共享配置以格式发布。
要使用共享配置,请首先从NPM安装它,然后可以通过部分扩展ESLINT配置。
我们可以通过向数组添加多个配置来扩展它们。如果对配置进行了修改以修改相同的规则,则以后的配置将涵盖上一个配置的规则,因此在这些情况下,该顺序很重要。
应该注意的是,共享配置不仅可以用于共享规则,而且可以通过自己的插件,格式化程序等进行完整的配置,甚至可以从其他配置扩展。
认为当我们使用它时,实际上使用了此配置文件。
除了使用配置插头 - 除了使用共享配置外,插件本身还可以伴随着不同的共享配置集。我们可以根据项目需求选择使用哪个。如果您以前配置了ESLINT,则可能已经看到了这样的写作:
我们可以使用附加到插件的这些配置。例如,我们使用的是插头-in,该配置具有命名的配置。然后,我们可以在配置中添加零件以从共享配置扩展。
我们甚至不需要添加到配置文件中,因为配置已经包含。我们认为,如果您查看代码,您会发现此插件 - 在导出配置,内容如下:
通过,将打开“规则”页面上的所有规则。
在了解ESLINT的基本用途之后,让我们看一下ESLINT的工作原理,并准备下一次ESLINT插件的汇编。
在ESLINT中,使用ESPREY默认分析JavaScript,将代码转换为AST(抽象语法树),然后拦截是否遵守我们规定的写作方法,最后让它显示出错误,警告或正常通过。
ESLINT的核心是一系列规则,规则的核心是将AST用于验证。在ESLINT中,一切都是可插入的,每个规则都是彼此独立的。
这张照片是ESLINT官方网站给出的建筑图。
如果您想了解ESLINT的工作原理,那么AST无疑是一个极为重要的部分,是源代码语法结构的抽象表示。它以树状形式的形式表达了编程语言的语法结构。树上的每个节点代表源代码的结构。
AST如何生成JavaScript执行的第一步是读取文件中的字符流,然后通过短语分析生成令牌,然后通过语法分析(Parser)生成AST,然后最终生成机器代码执行。
整个分析过程主要分为以下两个步骤:
JS解析器是JavaScript语法解析器。它可以将JavaScript源代码转换为AST。普通解析器是Esprima和Acorn。
CI -METHOD的系统分析(也称为扫描仪)只是称为该方法。一个字母读取字符,然后与JavaScript的定义关键字符进行比较以生成相应的令牌。Token是一个不可分割的最小单位:
例如,这三个字符只能作为一个整体使用,不能再分解了,因此它是一个令牌。
在短语分析仪中,每个关键字都是令牌,每个标识符都是令牌,每个操作员都是令牌,每个标点符号也是一个令牌。等等。将填写。
最后,整个代码将分为令牌列表(或一个维数阵列)。
语法分析语法分析将将短语的令牌分析转换为具有语法含义的抽象语法结构。在同一时间,如果语法,语法是错误的,则会引发语法误差。
AST Explorer是一个工具网站,可以查看被解析为AST的代码。
在介绍了原则之后,下一步是我们的实际部分。有时,现有的棉绒规则不满足项目需求,我们可以根据需求创建自己的规则。
接下来,我们以简单的需求为示例来开发属于我们自己的Eslint插头。
需求:使用具有基本语句类型的变量时,变量名称无法显示小写字母。
如果要创建ESLINT规则,则首先需要创建eSlint插件-in。我们在插件部分中提到。插头是一个NPM模块,由ESLINT正式规定。
首先,内容如下:
然后在根目录中创建文件以存储规则的特定逻辑。
实际上,我们在此处创建了一个基本的插件-in,其中包括两个文件:Harmony.this插件仅提供一个规则:.LET详细介绍规则部分的特定内容。
插件中的每个规则必须包含两个属性:和。
回到我们的规则本身,为了找到合格的节点,我们需要观察到AST的代码分析结果。以下屏幕截图是AST Explorer中获得的AST:
通过观察AST,您可以发现可以过滤符合条件的节点。对于合格的节点,请致电发布警告或错误(取决于您使用的配置)。此方法仅接收一个参数,这是对象。
在理解规则的实施之后,让我们通过一个实际示例测试我们编写的规则。
首先在当前插头的根目录中执行,您将在下面看到类似的输出。
测试项目可以继续使用安装中创建的项目,并使用章节,第一次运行,将此模块链接到我们编写的本地插头-in。然后将插头运行到中间。
我们在上一个插件部分中提到,安装插件 - 我们需要在ESLINT的配置文件中进行配置。配置文件如下:
之后,我们将文件中的内容更改为以下内容:
运行命令:将在控制台上看到我们期望的输出:
在这一点上,创建了最简单的Eslint插头。
我们已经通过手动创建项目来编写插件 - 试图尽可能地简化示例,并且只专注于规则本身。但是,如果我们想将插件-in发布到NPM,我们建议您使用yeoman发电机。
Yeoman Generator是ESLINT提供的脚手架,用于开发Eslint插头,以生成包含指定框架结构的工程目录结构。
首先,整体安装和:
创建项目目录并使用命令行来初始化项目:
命令行将要求您输入一些插件信息,然后将生成一些必要的文件。
如果要创建自定义规则,则需要键入以下命令以添加一些文件以创建规则。
最终文件结构很长:
文件的内容如下(删除不必要的注释):
可以发现它与手动插件文件的内容非常相似。此文件是我们编写规则逻辑代码的地方。
使用创建规则时,有一个文件与文件夹中的规则相同。这是我们编写规则和测试的地方。如果我们想发布到NPM,则需要文档和完整测试。
本文在这里。我们逐步从浅层到深,引入了基本用途,工作原理,AST以及如何编写插头。我希望这篇文章能为您带来一些收据,并让您正确地做。Eslint有了更深入的了解!
原始:https://juejin.cn/post/7111575564015632397