限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

自定义 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:073521

评论

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

支持向量机-探索核函数的优势和缺陷

烧灯续昼2002

Python 机器学习 算法 sklearn 11月月更

PGL图学习之图神经网络ERNIESage、UniMP进阶模型[系列八]

汀丶人工智能

深度学习 图神经网络 11月月更 GAT

高效、安全,华为云会议开启云上办公新天地

IT科技苏辞

2022-11-25:连续出现的数字。编写一个 SQL 查询,查找所有至少连续出现三次的数字。 答案是输出1,原因是1是唯一连续出现三次的数字。 DROP TABLE IF EXISTS logs;

福大大架构师每日一题

数据库 福大大

湖仓一体电商项目(十四):实时任务执行流程

Lansonli

湖仓一体电商项目 11月月更

信息论与编码:信道的数学模型

timerring

11月月更 信道 数学模型

10 W字最新 Java 热门面试题及答案总结

钟奕礼

Java java面试 java编程 程序员 java

SpringBoot整合MongoDB超详细教程

陈老老老板

java; spring-boot 11月月更

Linux 文件与目录管理

芯动大师

创建资源文件 11月月更 Linux系统指令

@Valid与@Validated的区别

陈老老老板

java; 11月月更

湖仓一体电商项目(十三):数据发布接口和可视化

Lansonli

湖仓一体电商项目 11月月更

SpringBoot整合Elasticsearch超详细教程

陈老老老板

ES spring-boot 11月月更

EasyExcel常用API与注解

陈老老老板

EasyExcel java; 11月月更

面试90%会问到的200+Java面试题汇总(含答案解析)

钟奕礼

Java java程序员 java面试 java编程

Spring Data JPA简介与SpringBoot整合超详细教学

陈老老老板

Spring JPA 11月月更

华为云桌面Workspace,不得不爱的移动办公新体验

爱科技的水月

【Python 基础学习】-字符串

度假的小鱼

11月月更 Python字符串操作

【Java面经】阿里三面被挂!幸获内推,历经5轮终于拿到口碑offer

钟奕礼

Java java面试 java编程 程序员‘

后台管理不可忽视,华为云会议最新支持管理员分权分域

秃头也爱科技

云上办公兴起,华为云桌面Workspace更靠谱

IT科技苏辞

JPQL超详细介绍与JPA命名规则

陈老老老板

Spring JPA 11月月更

有了 Protocol buffer 还是用 JSON

HoneyMoose

C++---类型萃取---is_integral && is_floating_point

桑榆

C++ STL 11月月更

线上沟通无忧,华为云会议SmartRoom了解一下

清欢科技

GaussDB拿下的安全认证CC EAL4+究竟有多难

华为云开发者联盟

数据库 后端 华为云

看我如何连夜自建网站背刺我的求职对手们

华为云开发者联盟

云计算 华为云 云服务器 自建网站

高标准企业级安全性,华为云会议为线上沟通保驾护航

爱科技的水月

一文了解 Go 中的指针和结构体

陈明勇

Go golang 指针 结构体 11月月更

python数据分析-pandas增删改查

AIWeker

Python Python数据分析 11月月更

湖仓一体电商项目(十二):编写写入DM层业务代码

Lansonli

湖仓一体电商项目 11月月更

2022最全168道Spring全家桶面试题(含答案)

钟奕礼

Java java面试 java编程 程序员‘

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