Umi 4 特性 05:稳定白盒性能好的 ESLint

简介: Umi 4 特性 05:稳定白盒性能好的 ESLint
🙋🏻‍♀️ 编者按:本文是蚂蚁集团前端工程师云谦关于 Umi 4 新特性系列分享的第五篇 - 稳定白盒性能好的 ESLint,欢迎享用~


第一篇 👉🏻Umi 4 特性 01:MFSU V3,比 Vite 还要快

第二篇 👉🏻 Umi 4 特性 02:React Router 6 和新路由

第三篇 👉🏻Umi 4 特性 03:默认最快的请求

第四篇 👉🏻Umi 4 特性 04:build 阶段的构建提速

ESLint 大家都很熟,通过很多规则,让大家写更好的代码,而且部分规则还能自动修复。Umi 3 也有 Lint 命令,包含 ESLint、Prettier、Stylelint 等。Lint 虽然不是卡点,但大家在这块遇到问题的比较多,同时带来了不少咨询量。


问题主要集中在这些方面,


1、规则开太多,有些规则见仁见智,不同人有不同的想法

2、依赖不稳定,睡一觉醒来规则变了,CI 过不了影响发布节奏

3、太黑盒,不知道开了什么规则,甚至框架(Umi)层自己都不敢更新依赖

4、性能不好,影响提交和 CI 速度


以上问题,Umi 4 的 Lint 方案全解。


规则开太多是因为 Umi 3 对于 ESLint 的定位不清晰。ESLint 的规则分质量类、建议类和风格类。比如使用未定义的变量是质量类,比如语句后加不加逗号则是风格类。在拥有 Prettier 之后,Umi 4 的方案里,风格类的全交给 Prettier,ESLint 则只负责可能导致问题的质量类。经过筛选,Umi 4 开的规则仅 60 多条。


依赖不稳定是 ESLint 的设计缺陷。ESLint 生态包含 Config 和 Plugin,Plugin 实现规则,Config 决定规则的开启或关闭。这理应是不错的设计,但可惜 ESLint 只考虑了项目级如何使用,却没有考虑三方库封装 Config 和 Plugin 的场景。具体的问题是 ESLint 找 Config 和 Plugin 只会从项目根目录去找。而 npm client 都有 Hoist 依赖的特性,导致往上提到根目录的依赖是不是正确有一定运气成分。所以依赖不稳定有两个原因,1)由于 npm client 的原因导致出现错误的 ESLint config 或 plugin,2)Config、Plugin 或其依赖和间接依赖更新导致的 break change。


对于依赖不稳定,Umi 4 有不同的解。短期的现在的解是通过 @rushstack/eslint-patch/modern-module-resolution 进行 hack,修改 Config 里找 Plugin 的规则,改从 Config 所在路径开始找。这可以确保 Plugin 版本找正确,但无法避免 Plugin 及其依赖更新后的功能变更。所以,更长期的未来的解是预打包 Config 和 Plugin 依赖,但由于 ESLint 设计上的问题,还需要调研 hack 的方式。


太黑盒是因为之前有继承其他 Config。Umi 4 的实现里,不再继承任何其他 Config,只使用提供规则功能的 Plugin,然后具体开什么规则是直接一个列表写死,只列我们需要的规则。这样三方或者 ESLint 官方规则启用开启的变更,都不会影响到 Umi 的用户,同时框架层也可以放心地更新依赖。


性能不好和 TypeScript 有关。Umi 3 会根据项目 TypeScript 文件的占比,决定是否开启 TypeScript 相关的 Lint 规则,而这些规则中,有一些是 type-aware linting。type-aware 的规则和类型相关,由于 TypeScript 的语言特性,比如跑一遍完整的项目才能确定类型是否正确,所以每次 lint 就算只改了一个文件,也需要跑整个项目。这里有把雨燕的 commit 时间从 19s 优化到 1-3s 的记录。而 Umi 4 中,压根不会开 type-aware 的规则,因为这些规则更多也是风格类,和质量无关。


参考:

Umi 4 开的 ESLint 规则列表

https://github.com/umijs/umi-next/blob/ad0dc988b0c2b98be5f71ae44a6f357612ede2f1/packages/lint/src/config/eslint/rules/recommended.ts#L5 

@rushstack/eslint-patch

https://github.com/microsoft/rushstack/tree/master/eslint/eslint-patch

Linting with Type Information

https://typescript-eslint.io/docs/linting/type-linting/ 

相关文章
|
前端开发 JavaScript 搜索推荐
Vite多环境配置:让项目拥有更高定制化能力
业务背景 近些年来,随着前端工程架构发展,使得前端项目中也能拥有如后端工程的模块能力。今天我们就来聊下如何在`Vite`中实现一套拓展能力强的多环境适配方案。
Vite多环境配置:让项目拥有更高定制化能力
|
1月前
|
JavaScript 前端开发 安全
开发业务需求有必要引入 TypeScript 吗?
随着前端技术的不断更新和发展,TypeScript作为一种静态类型的JavaScript超集语言,逐渐在业界崭露头角,尤其是在当今快速发展的软件开发环境中,选择适合的开发工具和技术变得至关重要。在项目规模和复杂性的增加的同时,保证代码质量、可读性和可维护性成为开发团队的重要任务。这样的背景下,引入TypeScript作为一种开发工具来弥补JavaScript的某些弱点,已经成为许多开发团队的选择。那么TypeScript是否值得在业务中引入?它是否会取代JavaScript?那么本文就来聊聊在业务开发过程中是否有必要引入TypeScript,并讨论一下对于现代前端框架发展的看法和期待。
67 0
开发业务需求有必要引入 TypeScript 吗?
|
3天前
|
前端开发 JavaScript 安全
微前端架构采用 TypeScript 提升开发效率和代码可靠性
【6月更文挑战第12天】微前端架构采用 TypeScript 提升开发效率和代码可靠性。TypeScript 的类型安全防止了微前端间的类型错误,智能提示与自动补全加速开发,重构支持简化代码更新。通过定义公共接口和使用 TypeScript 编写微前端,确保通信一致性与代码质量。在构建流程中集成 TypeScript,保证构建正确性。总之,TypeScript 在微前端架构中扮演关键角色,推荐用于大型前端项目。
21 4
|
3天前
|
JavaScript 前端开发 安全
Cypress因其强大的端到端测试能力备受青睐,尤其与TypeScript结合,提升了测试的规范性和准确性。
【6月更文挑战第12天】前端开发日益复杂,测试成为保障代码质量和稳定性的关键。Cypress因其强大的端到端测试能力备受青睐,尤其与TypeScript结合,提升了测试的规范性和准确性。TypeScript使Cypress测试代码更易读、维护,通过类型定义、自定义命令和断言增强测试可靠性。Cypress能模拟真实用户操作,支持时间旅行和高效调试,全面测试前端应用功能。因此,TypeScript+Cypress是前端端到端测试的理想选择。
16 2
|
28天前
|
JavaScript 前端开发 IDE
TypeScript在前端项目的渐进式采用策略
该文介绍了渐进式采用TypeScript在前端项目中的策略。首先,通过将JS文件扩展名改为TS并添加类型注解,如在`utils.js`中添加类型。接着,配置`tsconfig.json`,包括目标版本、模块系统、输出目录等。高级配置涉及路径别名、JSON导入、库文件等。然后,集成TypeScript到构建流程,如Webpack,安装`ts-loader`并调整配置。利用类型定义,包括安装第三方库的类型定义包,自定义类型定义或使用社区定义。最后,逐步迁移其他模块至TypeScript,强化类型检查,并确保IDE支持。
21 0
|
1月前
|
缓存 Android开发 UED
构建高效Android应用:从优化用户体验到提升性能
【5月更文挑战第15天】 在移动开发领域,构建一个高效的Android应用不仅仅意味着实现功能,还要确保流畅的用户体验和出色的性能。本文将深入探讨如何通过界面优化、代码整洁、资源管理和多线程处理等技术手段来提升Android应用的整体效率。我们将透过实际案例,揭示常见性能瓶颈的成因,并提供相应的解决方案。此外,文章还会涵盖最新的Android Studio工具和Lint检查的使用,帮助开发者早期发现潜在问题。
|
1月前
|
前端开发 JavaScript API
blog-engine-07-gatsby 建极速网站和应用程序 基于React的最佳框架,具备性能、可扩展性和安全性。
探索多种博客引擎:Jekyll, Hugo, Hexo, Pelican, Gatsby, VuePress, Nuxt.js 和 Middleman。了解Gatsby,基于React的静态站点生成器,以其特性如React基础、静态生成、广泛插件支持、简便部署和现代开发流程脱颖而出。安装Gatsby需先安装Node.js,然后通过`gatsby-cli`创建新站点。开发涉及编写页面、本地开发、生成静态文件及部署。尽管Gatsby具有现代化和高性能优势,但也存在学习曲线和配置复杂性的挑战。
|
1月前
|
前端开发 JavaScript 测试技术
构建高效前端项目:模块化与组件化策略
【2月更文挑战第25天】 在现代网页开发中,随着用户对于网页性能和交互体验的期待不断提升,前端项目的复杂性也随之增加。为了应对这种复杂性并提高开发效率,本文将探讨模块化与组件化在前端项目中的应用策略。通过分析这两种方法的优势与适用场景,我们将揭示如何利用它们来优化项目结构,提升代码复用率,以及加快开发流程。
56 4
|
8月前
|
Kubernetes 网络虚拟化 Perl
k8s常用的网络插件优化方案|干货
k8s常用的网络插件优化方案|干货
|
1月前
|
缓存 前端开发 JavaScript
构建可靠的前端工程:自动化、代码质量与性能优化
构建可靠的前端工程:自动化、代码质量与性能优化
构建可靠的前端工程:自动化、代码质量与性能优化

热门文章

最新文章