來源 |?https://www.fly63.com/

使用背景

代碼規(guī)范是軟件開發(fā)領域經(jīng)久不衰的話題，幾乎所有工程師在開發(fā)過程中都會遇到，并或多或少會思考過這一問題。隨著前端應用的大型化和復雜化，越來越多的前端工程師和團隊開始重視 JavaScript 代碼規(guī)范。

主要解決的問題：

對于獨立開發(fā)者，或者執(zhí)行力較強、技術場景較為單一的小型團隊而言，直接使用 ESLint 及其生態(tài)提供的一些標準方案，可以用較低成本來實現(xiàn) JavaScript 代碼規(guī)范的落地。如果再搭配一些輔助工具(例如 husky 和 lint-staged)，整個流程會更加順暢。

ESLint對工程代碼進行靜態(tài)檢查，發(fā)現(xiàn)和修復不符合規(guī)范的代碼。如果想降低配置成本，也可以直接使用開源配置方案，例如 eslint-config-airbnb 或 eslint-config-standard。

一、理解代碼檢查

代碼檢查，顧名思義就是檢查代碼，發(fā)生于開發(fā)階段，可有效幫助開發(fā)者減少 JavaScript 粗心代碼，如語法錯誤、變量未定義、變量未使用等等問題。除此之外，代碼檢查還可以約束統(tǒng)一開發(fā)人員的代碼風格，利于團隊協(xié)作。

我們再從三個方面來展開分析，加深對代碼檢查的實踐理解。

這三個方面分別為以下三點：

1)、代碼檢查的功能

2)、代碼檢查的類型

3)、代碼檢查的工具

1、代碼檢查的功能

代碼檢查這個切面大概可以幫助我們做以下三件事情：

語言語法檢查：比如檢查出字符串引號或者函數(shù)調(diào)用括號沒有匹配等問題。
編碼錯誤檢查：比如檢查出開發(fā)者在使用一個不存在的變量或者變量定義了卻沒有使用等問題。
代碼風格檢查：比如檢查出開發(fā)者沒有使用分號(與所選風格有關)等問題。

2、代碼檢查的方式

以代碼檢查發(fā)生的不同時間和場景來劃分，我把代碼檢查的方式分類成以下四種：

編碼時檢查：編寫代碼時檢查，通常表現(xiàn)為由 IDE 自動實時檢查并進行代碼提示。
編碼后檢查：編寫代碼后檢查，通常表現(xiàn)為手動調(diào)用檢查腳本 / 工具進行代碼的檢查或者代碼保存后由 IDE 自動檢查當前文件。
構(gòu)建前檢查：構(gòu)建執(zhí)行前檢查，通常表現(xiàn)為將代碼檢查作為構(gòu)建任務的一個前置切面，構(gòu)建時自動觸發(fā)代碼檢查。
提交前檢查：git commit 前檢查，通常表現(xiàn)為將代碼檢查作為 git commit 的一個 hooks 任務，代碼提交前自動觸發(fā)代碼檢查。

理解代碼檢查的方式很重要，這直接反映對代碼檢查這個概念本身的掌握程度。

3、代碼檢查工具

代碼檢查的實現(xiàn)通常不會僅僅是字符串分析處理，這其中會大量涉及到語法分析。既然涉及到語法，那么就需要對不同的代碼使用不同的代碼檢查工具，通常來說，我們會使用 Eslint 工具來實現(xiàn)對 JavaScript 和 Typescript 代碼的檢查，使用 stylelint 工具對樣式代碼進行代碼檢查。

二、ESLint 特性簡介

目前較為通用的方案——ESLint，它是一款插件化的 JavaScript 代碼靜態(tài)檢查工具，其核心是通過對代碼解析得到的 AST(Abstract Syntax Tree，抽象語法樹)進行模式匹配，定位不符合約定規(guī)范的代碼。

1、插件化

下圖簡單地描述了 ESLint 的工作過程：

ESLint 的能力更像一個引擎，通過提供的基礎檢測能力和模式約束，推動代碼檢測流程的運轉(zhuǎn)。

原始代碼經(jīng)過解析器的解析，在管道中逐一經(jīng)過所有規(guī)則的檢查，最終檢測出所有不符合規(guī)范的代碼，并輸出為報告。

借助插件化的設計，不但可以對所有的規(guī)則進行獨立的控制，還可以定制和引入新的規(guī)則。

ESLint 本身并未和解析器強綁定，我們可以使用不同的解析器進行原始代碼解析，例如可以使用 babel-eslint 支持更新版本、不同階段的 ES 語法，支持 JSX 等特殊語法，甚至可以借助 @typescript-eslint/parser 支持 TypeScript 語言的檢查。

2、配置能力全面、可層疊、可共享

ESLint 提供了全面、靈活的配置能力，可以對解析器、規(guī)則、環(huán)境、全局變量等進行配置;可以快速引入另一份配置，和當前配置層疊組合為新的配置;還可以將配置好的規(guī)則集發(fā)布為 npm 包，在工程內(nèi)快速應用。

3、社區(qū)生態(tài)較為成熟

開源社區(qū)中基于 ESLint 的項目非常多，既有針對各種場景、框架的插件，也有各種 ESLint 規(guī)則配置方案，基本可以涵蓋前端開發(fā)的所有場景。

4、規(guī)范配置方案設計

基于 ESLint 的插件化、可層疊配置特性，以及面向各種場景、框架的開源方案，如下圖所示的 ESLint 配置架構(gòu)：

「美團技術團隊」

該配置架構(gòu)采用了分層、分類的結(jié)構(gòu)，其中：

基礎層：制定統(tǒng)一的基礎語法和格式規(guī)范，提供通用的代碼風格和語法規(guī)則配置，例如縮進、尾逗號等等。
框架支撐層(可選)：提供對通用的一些技術場景、框架的支持，包括 Node.js、react、vue、React Native 等;這一層借助開源社區(qū)的各種插件進行配置，并對各種框架的規(guī)則都進行了一定的調(diào)整。
TypeScript 層(可選)：這一層借助typescript-eslint，提供對 TypeScript 的支持。
適配層(可選)：提供對特殊場景的定制化支持，例如 MRN(美團內(nèi)部的 React Native 定制化方案)、配合 prettier 使用、或者某些團隊的特殊規(guī)則訴求。

*具體各個規(guī)則如何配置可以查看：https://eslint.org/docs/rules

ESLint 在中大型團隊的應用實踐

使用背景

主要解決的問題：