前端 Lint & Format 使用手册 & 最佳实践 & 原理解析

用户8850

2024年5月17日修改

前言

本人所在的团队内的代码规范校验方案并不好用，存在一些性能、规则、使用体验上的问题。基于上述问题，我于 Q2 在团队内推广了一套基于开源生态的标准化代码校验方案。​

几个月以来，随着接入项目的增加以及相关 OnCall，我发现比较多的前端或者客户端同学对这些业界常用的前端工具库的常见的用法及相关生态缺乏一定的了解，本文将为大家详细介绍这套代码校验方案，包括相关工具的技术选型、工具的核心用法以及在日常工作环境下的 Best Practice。​

关键词

工具解析与选型

友情提示：请别找错官方网站

核心工具解析

我们最终选择 ESLint + StyleLint 的方案，主要是考虑到：

•
这些工具社区生态优秀，有大量开源的的 Rules 以及预设、插件可供自由组合，同时业界知名的 IDE / 代码编辑器都有高质量的集成。​

•
它们覆盖了前端绝大部分的使用场景（JavaScript 生态 + CSS 生态）。​

•
由于一些历史原因，ESLint 和 Prettier 的许多规则相互冲突，可能会让开发者踩坑以及增加维护者的维护成本。​

工具实践 -- 以 ESLint 为例

💡

提示

为了方便描述，下面的内容都围绕 ESLint 来介绍。事实上，这些代码校验工具的架构、使用、配置方式也有大量雷同之处，读者可以举一反三，用类似的思路去应对 StyleLint 或者 Prettier。​

ESLint 环境配置

安装与配置

ESLint 一般作为 devDependency 使用。

前端 Lint & Format 使用手册 & 最佳实践 & 原理解析​