缘由 作为js语言的代码检查工具，eslint几乎会出现在所有的前端项目中，而prettier作为一个代码格式化的工具，功能上与eslint有重叠部分。对于js中semicolons、comma-dangle等代码规则，eslint能够跟prettier一样autofix，这是否意味着我们工程里只要配置eslint就够了？如果可以这样，不失为一件美事。可惜的是，对于prettier能够完美...

概念 CSS Houdini API是CSS引擎暴露出来的一套api，通过这套API，开发者可以直接触及CSSOM，告诉浏览器如何去解析CSS，从而影响浏览器的渲染过程，实现很多炫酷的功能。 它主要包括Properties and Values API、Typed Object Model API、Paint API、Layout API、Animation API、Parser API、...

说到前端开发使用的IDE，相信很多同学第一反应会是VSCode。没错，微软出品的VSCode凭借优秀的性能表现和强大的功能，迅速占领了IDE市场的首席。到2021年，全球71%的开发者（不单止前端开发）在使用VSCode。了解我们日常开发中接触最多的工具，充分挖掘VSCode提供的强大能力，会使我们的开发事半功倍。本文就来讲解一下VSCode Snippets是什么以及如何提升我们开发的幸福...

前言 最近前端包管理器pnpm真的是太火了，大量的文章分析了pnpm的原理。了解之后，发现pnpm整个架构都是基于硬链接和软链接组织的，但我对这两个概念比较模糊，所以想研究一下。 众所周知，Unix/Linux系统中一切皆文件。可见，文件在Linux系统中非常重要。我们平常比较直观的对于文件的感受肯定是文件名和文件内容。但在Linux的文件系统中，除了文件名和文件内容，还有一个很重要的概...

前言 无论在平时的开发中还是面试中，CSS优先级都是前端开发绕不开的问题，网上的资料也很多。但是，有些资料不够严谨。作为一名程序员，必须有点求真的精神嘛。于是，我决定拨开这层迷雾。 style和选择器 CSS2标准里这样描述： A selector’s specificity is calculated as follows: count 1 if the de...

前言 早期Javascript这门语言是没有模块化的概念的，直到nodejs诞生，才把模块系统引入js。nodejs使用的是CJS（Commonjs）规范，也就是我们平时所见的require、module.exports。而js语言标准的模块规范是ESM（Ecmascript Module），也就是我们在前端工程大量使用的import、export语法。nodejs已经在逐步支持ESM，目...

HTML5给<script>增加了两个布尔属性，defer和async，两者在使用上有点像又有点区别，很容易混淆。本文尝试理清之间的关系。 defer defer script不会阻塞其他脚本的下载和HTML解析，但它会等到其他DOM构建完成才执行，然后才会触发DOMContentLoaded事件。也就是说，如果defer script下载得快，需要等一会（DOM构建...

前言 ts有两种顶层类型：any和unknown，它们非常像，在日常使用中很难界定什么时候该用any，什么时候该用unknown。这篇文章就来捋一捋。 any 任何类型都可以分配给any，它是ts类型检查的逃生舱，告诉tsc直接跳过类型检查。any违背了类型检查的初衷，一般不建议使用，尤其在有了unknown类型之后。 unknown Typescript3.0引入了unknown...

共识 如果类型T继承类型U，我们规定用以下形式表示： T ≤ U T是子类型，U是父类型。 如果U类型赋值给T类型，我们表示如下： T: U 一般来说，子类型的变量赋值给父类型的变量是安全的，反之则不安全，Typescript很有可能报错。 定义Animal和Dog类型，后面的代码演示都以此为基础。 class Animal { doAnimalThing()...

阅读Vue和React两大前端框架的源码时都出现了MessageChannel的影子，但是自己却没不了解什么是MessageChannel，它有什么用。于是花了一些时间研究，并尝试把它解释清楚。 什么是MessageChannel MessageChannel允许我们在不同的浏览上下文，比如window.open()打开的窗口或者iframe等之间建立通信管道，并通过两端的端口（...