为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第16天 初步认识ESLint

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

2022.09.20 23:53 65浏览

第一模块 学习课程

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

章节名称: 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



第四模块 学习打卡截图

https://img1.sycdn.imooc.com/6329e0b60001b85809900767.jpg

https://img2.sycdn.imooc.com/6329e10200015ab608040463.jpg

https://img2.sycdn.imooc.com/6329e1a900014d1a10060370.jpg

















点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
JAVA开发工程师
手记
粉丝
0
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消