AICon 上海站|90%日程已就绪,解锁Al未来! 了解详情
写点什么

自定义 ESLint 规则,让代码持续美丽

  • 2021-04-06
  • 本文字数:3676 字

    阅读完需:约 12 分钟

自定义 ESLint 规则,让代码持续美丽

背景


一段真实的代码发展历史


很久很久以前,有一个需求,然后产出了一段代码,代码优雅而简洁


export const getConfig = (param1, param2) => {  return ...};
复制代码


不久又来了个需求,加个参数扩展,so easy!


export const getConfig = (param1, param2, param3) => {  return ...};
复制代码


经过多次产品需求迭代后,现在的代码



export const getConfig = (param1, param2, param3, param4, param5, param6, param7……) => {  return ...};
复制代码


在产品迭代过程中,上面的 case 一个函数的参数从 2 个发展到了 7 个,优雅的代码逐渐变为不可维护。这是什么问题?这归咎于日益增长的需求,快速响应和代码质量之间的矛盾。


那如何避免呢?


  • 制定代码规范

  • 靠开发同学的自我修养

  • 进行 Code Review

  • 工具提示

  • 发版控制,不允许发版


制定代码规范肯定是需要的,那如何约束代码呢?规范文档宣讲,再凭借开发同学的自我修养?答案是:无法保证。


Code Review ?但难免也有落网之鱼。发版控制?能有效解决但是开发体验不好。


如果我们在开发者写代码的时候就及时给到提示和建议,那开发体验就很棒了,而 ESLint 的自定义规则就可以实现在开发过程中给开发同学友好的提示。


ESLint 原理


ESLint 是一个代码检查工具,通过静态的分析,寻找有问题的模式或者代码。默认使用 Espree  解析器将代码解析为 AST 抽象语法树,然后再对代码进行检查。


看下最简单的一段代码使用 espree 解析器转换成的抽象语法树结构,此处可以使用 astexplorer  快速方便查看解析成 AST 的结构:


代码片段:

var a = 1;
复制代码

转换出的结果:

{  "type": "Program",  "start": 0,  "end": 10,  "range": [    0,    10  ],  "body": [    {      "type": "VariableDeclaration",      "start": 0,      "end": 10,      "range": [        0,        10      ],      "declarations": [        {          "type": "VariableDeclarator",          "start": 4,          "end": 9,          "range": [            4,            9          ],          "id": {            "type": "Identifier",            "start": 4,            "end": 5,            "range": [              4,              5            ],            "name": "a"          },          "init": {            "type": "Literal",            "start": 8,            "end": 9,            "range": [              8,              9            ],            "value": 1,            "raw": "1"          }        }      ],      "kind": "var"    }  ],  "sourceType": "module"}
复制代码


代码转换为 AST 后,可以很方便的对代码的每个节点对代码进行检查。


自定义 ESLint 规则开发


怎么自定义

语法树分析


对目标代码进行语法树解析,可使用 astexplorer 


编写规则


下面是一个规则简单的结构(官方 API 文档说明


module.exports = {  meta: {    docs: {      description: "最多参数允许参数",    },  },  create: function (context) {    return {      FunctionDeclaration: (node) => {        if (node.params.length > 3) {          context.report({            node,            message: "参数最多不能超过3个",          });        }      },    };  },};
复制代码


  • meta(对象)包含规则的元数据

  • create ( function ) 返回一个对象,其中包含了 ESLint 在遍历 JavaScript 代码的抽象语法树 AST ( ESTree 定义的 AST ) 时,用来访问节点的方法

  • context.report ( )  用来发布警告或错误,并能提供自动修复功能(取决于你所使用的配置)


最简单的示例(只使用 node 和 message 参数):


context.report({    node,    message: "参数最多不能超过3个",});
复制代码


使用上面的这个规则,结合编辑器就有了对整个 node 节点的提示,如果需要更精确的错误或警告提示,我们可以使用 loc 参数,API 文档说明 。



如何使用自定义规则


使用自定义的 ESLint 规则,你需要自定义一个 ESLint 的插件,然后将规则写到自定义的 ESLint 插件中,然后在业务代码中添加 ESLint 配置,引入 ESLint 插件。


ESLint 插件

创建


创建一个 ESLint plugin,并创建 一个 ESLint rule

基于 Yeoman generator (https://yeoman.io/authoring/) ,可以快速创建 ESLint plugin 项目。


npm i -g yonpm i -g generator-eslint// 创建一个pluginyo eslint:plugin// 创建一个规则yo eslint:rule
复制代码


创建好的项目目录结构:


  • rules 文件夹存放的是各个规则文件

  • tests 文件夹存放单元测试文件

  • package.json 是你的 ESLint 插件 npm 包的说明文件,其中的 name 属性就是你的 ESLint  插件的名称,命名规则:带前缀 eslint-plugin-



// 示例代码:// lib/rules/max-params.jsmodule.exports = {  meta: {    docs: {      description: "最多参数",    },  },  create: function (context) {    /**     * 获取函数的参数的开始、结束位置     * @param {node} node AST Node      */    function getFunctionParamsLoc(node) {      const paramsLength = node.params.length;      return {        start: node.params[0].loc.start,        end: node.params[paramsLength - 1].loc.end,      };    }    return {      FunctionDeclaration: (node) => {        if (node.params.length > 3) {          context.report({            loc: getFunctionParamsLoc(node),            node,            message: "参数最多不能超过3个",          });        }      },    };  },};
复制代码


// 补充测试用例// /tests/lib/rules/max-params.jsvar ruleTester = new RuleTester();ruleTester.run("max-params", rule, {  valid: ["function test(d, e, f) {}"],  invalid: [    {        code: "function test(a, b, c, d) {}",        errors: [{            message: "参数最多不能超过3个",        }]    },  ],});
复制代码

ESLint 插件安装


在需要的业务代码中安装你的 ESLint 插件。(eslint-plugin-my-eslist-plugin 是你的 ESLint 插件 npm 包的包名)


npm install eslint-plugin-my-eslist-plugin 
复制代码


如果你的 npm 包还未发布,需要进行本地调试:

可使用 npm link 本地调试,npm link 的使用 。


配置


添加你的 plugin 包名(eslint-plugin- 前缀可忽略) 到 .eslintrc 配置文件的 plugins 字段。


.eslintrc 配置文件示例:


{    "plugins": [        "zoo" // 你的 ESLint plugin 的名字    ]}
复制代码

rules 中再将 plugin 中的规则导入。⚠️ ESlint 更新后,需要重启 vsCode,才能生效。( vsCode  重启快捷方式:CTRL +SHITF + P,输入 Reload Window )


此处涉及 ESLint 的规则设置(参考说明


{    "rules": {        "zoo/rule-name": 2    }}
复制代码


效果



更多的应用场景


除了上面说的硬编码的场景,还可以将沉淀出的最佳实践和业务规范通过自定义 ESLint 的方式来提示开发者,这对于多人协助、代码维护、代码风格的一致性都会有很大的帮助。


更多的应用场景有:


  • Input 必须要有 maxlength 属性,防止请求的后端接口数据库异常

  • 代码中不能出现加减乘除等计算,如果需要计算应该引入工具函数,来控制由于前端浮点数计算引起的 Bug

  • 规范限制,单位元的两边的括号要用英文括号,不能用中文括号,来达到交互展示统一的效果

  • 代码中不能使用 OSS 地址的静态资源路径,应该使用 CDN 地址的资源路径

  • ...



头图:Unsplash

作者:七喜

原文:https://mp.weixin.qq.com/s/zDTRB9BQFbzj6SeAM7mVcA

原文:自定义 ESLint 规则,让代码持续美丽

来源:政采云前端团队 - 微信公众号 [ID:Zoo-Team]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021-04-06 22:073455

评论

发布
暂无评论
发现更多内容

第三代分布式数据库来了,真香!

OceanBase 数据库

数据库 开源 分布式 oceanbase

惨遭GitHub直接封杀的阿里P8手敲出来这份565页凤凰架构分布式手册,有何神奇之处

热爱java的分享家

Java 面试 程序人生 编程语言 凤凰架构

给面试官上一课:HTTPS是先进行TCP三次握手,再进行TLS四次握手

热爱java的分享家

Java 架构 程序人生 编程语言 经验分享

度小满启动“小微加油站”,让低息服务可持续

脑极体

【死磕Java并发】-----Java内存模型之总结

chenssy

11月日更 死磕 Java 死磕 Java 并发

[Pulsar] ChunkMessageID介绍及其原理

Zike Yang

Apache Pulsar 11月日更

【Flutter 专题】03 图解第一个程序 Hello World!

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 11月日更

千万级学生管理系统的考试试卷存储方案设计

Beyond Ryan

黑客常备20个工具,你知道几个?

喀拉峻

Python Qt GUI设计:QLabel标签类(基础篇—11)

不脱发的程序猿

Python PyQt GUI设计 QLabel标签类

Android C++系列:Linux文件系统(二)

轻口味

c++ android jni 11月日更

自动驾驶 传感器和计算硬件 易筋 ARTS 打卡 Week 76

John(易筋)

ARTS 打卡计划 arts

双11“剁手”后,你的包裹收到了吗?

OceanBase 数据库

数据库 开源 分布式 oceanbase

阿里大规模业务混部下的全链路资源隔离技术演进

阿里巴巴云原生

阿里云 云原生 资源隔离 ACK 混部

FFmpeg[5] - 将视频文件转码成MP4格式(FFmpeg转封装2)

liuzhen007

11月日更

🍃【Spring专题】「实战系列」重新回顾一下异常重试框架Spring Retry的功能指南

码界西柚

spring 11月日更 Spring retry Guava retry

Go 的 Panics 处理

baiyutang

golang 11月日更

Prometheus 都可以采集那些指标?-- 常用 Exporter 合集

耳东@Erdong

内容合集

共建全栈国产化解决方案 | OceanBase持续与合作伙伴推进测试互认

OceanBase 数据库

数据库 分布式 双十一 oceanbase

“敏捷版”全链路压测

阿里巴巴云原生

阿里云 云原生 全链路压测 PTS

推动数字化转型,OceanBase 助力保险企业创造新价值

OceanBase 数据库

数据库 开源 技术宅 oceanbase 分布式,

.NET6新东西--Lambda优化

喵叔

11月日更

Prometheus Exporter (三)容器信息监控

耳东@Erdong

container Prometheus exporter 11月日更 cAdvisor

前端开发:VS Code编辑器新建Vue文件自定义模板的方法

三掌柜

11月日更

dart系列之:dart中的异步编程

程序那些事

flutter dart 程序那些事 11月日更

我理解的CPI和PPI

石云升

学习笔记 11月日更

家庭太阳能发电,何时能告别“两极分化”?

脑极体

两个排序数组的中位数,“最”有技术含量的解法!

老表

Python 算法 LeetCode 11月日更

MySQL事务的实现原理之Undo Log的分析

卢卡多多

Undo Log 11月日更

参与tdengine开源的方式

williamcai

fork git 学习

深入浅出,一文吃透mysql索引

微客鸟窝

MySQL 11月日更

自定义 ESLint 规则,让代码持续美丽_语言 & 开发_政采云前端团队_InfoQ精选文章