使用ESLint来启动和运行—可插接的JavaScript Linter

最新推荐文章于 2024-05-16 15:47:26 发布

dingshi7798

最新推荐文章于 2024-05-16 15:47:26 发布

阅读量822

点赞数

文章标签： json javascript 开发工具 ViewUI

净照耀火炬在bug上的男人

本文由Tim Severien进行同行评审。感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

您是否熟悉“棉绒”一词？这是使用工具自动检查代码中是否存在潜在问题的过程。您可以从使用这种工具中获得几个主要好处。

保持代码风格一致。 Linters允许您检查代码样式是否存在间距，缩进和大括号放置等问题。一旦您的团队同意编码风格，就可以将其记录在配置文件中并自动进行检查。
发现潜在的错误和不良模式。 Linters还可以用于执行更高级的检查，以发现可能的错误，例如重复的变量，无法访问的代码或无效的正则表达式。 linter发出的警告将使您可以在错误甚至未达到运行时之前对其进行修复。
加强质量。 当您在项目中遵循某个样式指南时，使用工具强制实施该指南很重要，否则，总会有人想偷工减料。如果将衬棉工具连接到构建过程中，则在存在未修复的错误时，您可以简单地阻止项目启动或提交到存储库中。
节约时间。 从前三个中获得的主要好处是，棉绒可以节省您在开发过程中的工作量。您将不再需要花费宝贵的时间与同事争论支架放置不正确的情况，并且可以在早期发现一两个bug。

已经有一篇关于JavaScript可用的linter的文章，但是今天我们将重点介绍作者提到的工具之一-ESLint。

ESLint

ESLint是Nicholas C. Zakas于2013年创建的整理工具，目前是可用于JavaScript的功能最强大，可扩展性最强的lint 。它提供了丰富的功能，使其成为您下一个掉毛工具的理想选择。这些功能包括：

可以根据您的喜好另外配置许多规则。
用于创建自己的规则的API。
带有特定库，框架和实践规则的众多插件。
对ES6，ES7和JSX的内置支持。
一组推荐的规则以及第三方配置可帮助您快速入门。
可以与Sublime，Vim，JetBrains产品和Visual Studio Code等多个编辑器和IDE集成。

设置项目

在您自己的现有项目中实施ESLint之前，明智的做法是先在简单的项目上进行试用。让我们建立一个测试项目，将其用作游乐场进行进一步的探索。它只有一个JavaScript文件，必需的npm模块和几个npm命令来运行linter。

首先，我们将生成一个npm项目（如果不确定如何安装或使用npm，请参阅本教程）。创建一个新文件夹，在终端中打开它，然后运行npm init 。系统将提示您输入有关项目的一些信息，并回答所有问题后，npm将在同一文件夹中生成一个新的package.json文件。

一旦完成了npm，我们还需要一个JavaScript文件来处理。让我们创建一个名为scripts.js然后在其中保存一些代码：

function doGood() {
    var message = "doing good!";
    var message = 'or am i?';

    console.log("doing something");;

    var toDoList = ["List",,'things',"to do"];
}

您不需要linter就可以发现代码中的某些问题。但是，嘿，我们不想听到您或我的声音，而是希望听到ESLint本身的声音。

安装与配置

要安装ESLint，您需要做的就是从项目文件夹的内部运行npm i eslint --save-dev 。我们可以在全球范围内安装ESLint，但我坚信每个项目都应捆绑自己的依赖项，以确保每个从事该项目的开发人员都使用相同的工具。

一旦安装了ESLint，我们需要在首次运行它之前对其进行配置。可以通过使用--init标志运行ESLint来方便地完成此操作。由于我们没有全局安装ESLint，因此命令如下所示：

./node_modules/.bin/eslint --init

此命令将启动配置向导。该向导将为您提供三种创建配置的方式：

您想如何配置ESLint？

选择有关样式的答案问题将需要您回答有关项目设置的一些问题，例如目标环境，ECMAScript版本，模块，CommonJS或JSX的用法以及一些样式首选项。这是使用最少建议规则集设置项目的快速方法。
选择“ 使用流行样式指南”将使您可以根据Google，Airbnb等提供的流行样式指南之一进行配置。此选项非常适合您已经遵循或计划以其中一种样式指南为基础的方法
检查您的JavaScript文件将尝试从现有代码库中得出插入规则。当您已经有不想更改的现有代码库时，效果很好。

由于我们刚开始一个新项目，因此，我们选择第一个选项并注册最新的ECMAScript功能：

成功创建.eslintrc.json文件

最后一个问题将允许您选择配置文件的格式。选项包括JSON，YAML和JavaScript，但我们将使用JSON，因为它可能是每个人最熟悉的。

回答完所有问题后，ESLint将生成一个具有以下内容的.eslint.json文件：

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

如您所见，它包含一些环境配置以及它询问您的规则。 extends属性设置为eslint:recommended ，这意味着ESLint将使用其自己的推荐规则集作为基础，以后可以覆盖。我们将其留作演示，但以后您可以删除它，或将其替换为其他第三方规则集。

运行ESLint

现在我们已经有了一个基本的配置，让我们尝试运行它，看看它是否有效。

要运行ESLint，我们可以使用以下命令来对项目根文件夹中的所有.js文件进行整理：

./node_modules/.bin/eslint *.js

为了避免在终端中重复键入此命令，我们可以将其另存为npm脚本。打开package.json并在test旁边添加另一个脚本。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint *.js"
},

请注意，我们不需要将完整路径写入./node_modules/.bin因为在运行npm脚本时，该文件夹会自动添加到PATH。

我们现在可以使用运行它

npm run lint

继续尝试。您应该看到错误报告，警告我们关于scripts.js各种问题：

11个问题（11个错误，0个警告）

当节点脚本本身报告错误时，请不要担心，因为ESLint返回了非零的退出代码，这应该发生。如果需要，可以通过在脚本中添加exit 0来抑制这种情况（如此处所述）。

建议集中仅启用了某些规则。有很多可用的。

规则概述

ESLint的武器库中有一百多条规则。由于清单确实很多，因此我们将不进行所有介绍。我们将引导您完成一些更常见的操作，以使您了解ESLint的功能。

您可以通过在配置文件中的rules属性下列出任何规则来启用这些规则。可以将每个规则设置为特定的严重性： 0 （或off ）以禁用规则， 1或（ warn ）以发出警告，而2 （或error ）以触发错误。某些规则（例如配置文件中的规则）可以接受具有严重性的数组作为第一个元素，后跟其他选项。如果不确定特定规则支持哪些值，请查阅文档。0

造型规则

其中一些规则非常简单，仅用于强制执行特定的代码样式：

块间距 –在代码块{ ... }内强制使用空格；
逗号分隔–要求或禁止在数组或对象中悬挂逗号。
eol-last –在每个文件的末尾强制换行。

只要整个团队都同意这些规则，那么如何配置这些规则就几乎没有关系。

最佳实践

有许多规则涵盖了准则，这些准则被认为可以改进源代码，并且在开发人员社区中广受好评。一些有趣的提及是：

复杂度 –您的源中允许的最大圈复杂度阈值；
default-case –在switch语句中始终需要一个default块；
eqeqeq –需要使用严格的比较运算符： ===和!== ;
no-implicit-coercion –禁止使用隐式类型转换方法，例如!!false或+'2' ;
无魔术数字 –禁止使用“魔术数字”：出现在代码中但没有关联标识符的数字；
yoda –要求或禁止“ yoda”条件声明；
无阴影 –不允许“阴影”变量：在父作用域中声明与现有变量同名的变量。

尽管其中某些规则在某些情况下可能会有例外，但它们通常被认为是有益的，因此建议予以考虑。

潜在错误

另一套规则可帮助您避免编写过于复杂或可能导致错误的代码。当然，它不能保证您的应用程序没有错误或逻辑缺陷，但是至少可以帮助您避免常见的陷阱。一些示例是：

无条件分配 –禁止在条件语句中进行分配；
no-dupe-args –在函数声明中不允许重复的参数；
no-inner-declarations –禁止在嵌套块中声明函数ar；
no-invalid-regexp –检查您的正则表达式是否有效；
no-unreachable –检查return ， throw ， continue或break语句后是否存在任何无法访问的代码。

ECMAScript 6

还有另一组规则，由特定于ECMAScript 6标准的检查组成。如果您喜欢使用最新功能，则可能会发现这些有趣。一些示例是：

builder-super –需要在构造函数中调用super() ；
无重复班级成员 –检查重复的班级成员；
no-var –需要使用let或const而不是var 。

还有许多其他规则需要探索，因此建议您在完成本文后自行查看完整列表。

在不同的环境中运行

最初配置ESLint时，我们希望代码在浏览器中运行。但是假设我们也想在Node.js环境中使用它。例如，我们想通过在示例中添加以下代码段来使用Node的module.exports功能：

if (module && module.exports) {
    module.exports = doGood;
}

再次运行linter将导致出现新错误：

10:5   error  'module' is not defined               no-undef
10:15  error  'module' is not defined               no-undef
11:5   error  'module' is not defined               no-undef

发生这种情况是因为linter不希望特定于节点的变量出现在代码中。为了解决这个问题，我们可以指示它注意Node环境：

"env": {
    "browser": true,
    "es6": true,
    "node": true
},

如果再次运行lint，它会像魅力一样工作。还有一小部分特定于Node环境的规则。

配置注释

有时有必要从源代码内部覆盖配置。这可能在不同情况下发生。例如，如果您的代码包含不符合您的编码标准的第三方库的副本。或者，您有一段特定的代码必须是通用规则的例外。您可以使用源代码中的特殊注释来实现此目的。

想象一下，我们想禁用函数中的no-sparse-arrays规则。我们可以通过在该行中添加以下注释来做到这一点：

var toDoList = ["List",,"things","to do"]; // eslint-disable-line no-sparse-arrays

如果要抑制函数的所有错误，可以将其包装为eslint-disable/eslint-enable块。

/* eslint-disable */
function doGood() {
    var message = "doing good!";
    var message = "or am i?";

    console.log("doing something");

    var toDoList = ["List",,"things","to do"]; // eslint-disable-line no-sparse-arrays
}
/* eslint-enable */

或者，要禁用整个文件的/* eslint-disable */ ，我们只需在文件开头添加一个/* eslint-disable */注释即可。

尽管存在此类压倒性的有效案例，但不要让异常成为规范。您仍然应该致力于纠正错误，而不是排除错误。

自动纠错

ESLint具有一种有趣的功能，可以自动修复它发现的一些错误。可以自动修复代码的规则在整个规则列表中用扳手图标标记。目前，这些规则大多数都是纯风格的。让我们尝试通过自动校正来运行我们的初始示例。为此，将--fix标志添加到我们用于运行ESLint的命令中：

./node_modules/.bin/eslint *.js --fix

在修复了一些错误之后，我们的示例如下所示：

function doGood() {
    var message = 'doing good!';
    var message = 'or am i?';

    console.log('doing something');

    var toDoList = ['List',,'things','to do'];
}

如您所见，它已成功将所有引号更改为单引号，并删除了多余的分号。这是一个有用的功能，但是请小心使用。在某些情况下，已知会破坏代码的格式。在提交更改之前，请始终查看其执行的更改。

创建自定义规则

如果您认为可用的内置规则和第三方规则不能满足您的所有需求，则可以考虑编写自己的规则。 ESLint提供了一个API，可用于创建自定义规则。这个主题是技术性更高的，需要对JavaScript，Node有更深入的了解，对解析器有基本的了解，因此值得一读。一般的想法是，每个规则都包含两件事：元信息（例如名称和描述）以及实际的实现。该规则被实现为一个对象，其中包含一组回调，当ESLint遍历JavaScript代码的抽象语法树时，这些回调将提供对当前节点的访问。这实质上是“访客”模式的一种实现。 ESLint开发人员指南提供了更多详细信息以及有关如何实现自己的规则的示例。

结论

希望本文让您对在项目中设置ESLint多么简单，以及它可以在多大程度上改善您的工作流程有一个想法。如果您在项目中意识到需要这样做，建议您尽快尝试一下。您越早采用此工具，您将获得更大的收益。从建议的规则集开始缓慢，然后针对您的特定工作流程调整规则，从那里开始成长。在一段时间内，ESLint应该成为您值得信赖的合作伙伴，并且是任何项目的重要组成部分。

您在使用ESLint吗？如果没有，您会考虑尝试一下吗？在下面的评论中让我知道。

From: https://www.sitepoint.com/up-and-running-with-eslint-the-pluggable-javascript-linter/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用ESLint来启动和运行—可插接的JavaScript Linter

这篇文章是由同行评审添Severien 。感谢所有SitePoint的审稿作出SitePoint内容也可以是最好的！是否术语“掉毛”听起来很熟悉？这是使用工具来自动检查代码中的潜在问题的过程。还有，你可以使用这样的工具获得几个关键的好处。保持你的代码风格一致。棉短绒允许你检查你的代码风格像间距，缩进和大括号的放置问题。一旦你的团队的编码风格一致，它可以在配置文件中记录，并自动检...
复制链接

扫一扫