【九月打卡】第16天 初步认识ESLint

第一模块 学习课程

名称: 六大场景 梳理开发痛点 解锁前端进阶路

章节名称: 7-5 ESLint是如何使用和实现的

讲师: Brian

第二模块 课程内容

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

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

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

Espree has a modular architecture that allows extension of core functionality. The goal of Espree is to produce output that is similar to Esprima with a similar API so that it can be used in place of Esprima.

Espree 是Esprima v1.2.2的一个fork，是一个code解析器，它允许扩展核心功能的模块化架构，对标Esprima。

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

ESLint 使用 Espree解析JavaScript

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

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

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

第三模块 课程收获

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

//一条rule就是一个node模块，其主要由meta和create两部分组成
module.exports = {
    //meta这条规则的元数据，如其类别，文档，可接收的参数的schema等等。
    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表达了这条rule具体怎么分析代码
    create(context) {

        return {
            DebuggerStatement(node) {
                context.report({
                    node,
                    messageId: "unexpected"
                });
            }
        };

    }};

Create返回的是一个对象，其中最常见的键的名字可以是上面我们提到的AST选择器，在该选择器中，我们可以获取对应选中的内容，随后我们可以针对选中的内容作一定的判断，看是否满足我们的规则，如果不满足，可用context.report()抛出问题，ESLint会利用我们的配置对抛出的内容做不同的展示。

在React中使用ESLint推荐eslint-plugin-react

第四模块 学习打卡截图