eslint是什么_ESLint进阶指南

前言

今天这篇文章，主要聊聊什么是ESLint，为什么要用它？它的实现原理是什么?工作中如何使用的ESLint，以及如何自定义ESLint规则。

本文整理自以下文章：

• 掘金：eslint工作原理探讨

• 手摸手教你写eslint插件

• 慕课网：《大前端》第七周「团队协作」

什么是ESLint & 为什么使用它

为什么要使用ESLint？

JavaScript是一个动态的弱类型语言，在代码编写的过程中，经常会出错，而因为其没有编译程序，为了寻找代码错误的地方，需要在执行的过程中不断的调试。

ESLint的作用就是让你在开发过程中发现自己的代码问题以及不规范的地方，提前发现问题所在，并且可以规范团队的代码风格保持一致。

什么是ESLint？

ESlint是一个开源的JS代码检查工具，它的目标是提供一个插件化的JavaScript代码检测工具。

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

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

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

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

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

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

• …

总的来说，ESLint是一套每一个人都应该了解的并且遵循的JS代码规范。它可以让我们的代码风格一致、更加健壮、减少错误并用上社区的最佳实践。

原理

在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：

• ESLint 使用 Espree 解析 JavaScript。

• ESLint 使用 AST 去分析代码中的模式

• ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

AST是Abstract Syntax Tree(抽象语法树)的缩写，如下图。

也就是说，eslint使用Espress把js语法转换成AST。然后通过 AST selectors找到静态代码中的内容，再根据rule的规则去判断这一段js是否符合eslint的规范。

安装和初始化ESlint

新建一个空的文件夹，执行以下的命令：

1、 npm init -y

2、 npm install eslint -D

3、 npx eslint --init

完成以上的步骤，我们将会得到以下的文件夹：

rule是如何工作的？

ESLint 的核心就是规则(rule)，每条规则都是独立的，且都可以被设置为禁止off，警告warn，或者报错error。

我们选择"no-debugger": "error" 来看看 rule 是如何工作的。源码如下：

module.exports = {

    meta: {

        type: "problem",

        docs: {

            description: "disallow the use of `debugger`",

            category: "Possible Errors",

            recommended: true,

            url: "https://eslint.org/docs/rules/no-debugger"

        },

        fixable: null,

        schema: [],

        messages: {

            unexpected: "Unexpected 'debugger' statement."

        }

    },

    create(context) {

        return {

            DebuggerStatement(node) {

                context.report({

                    node,

                    messageId: "unexpected"

                });

            }

        };

    }

};