共计 3779 个字符，预计需要花费 10 分钟才能阅读完成。
“ 程序是写给人读的，只是偶然让计算机执行一下。—— Donald Knuth”
引言
随着前端利用的大型化和复杂化，越来越多的前端工程师和团队开始器重 JavaScript 代码标准。得益于前端开源社区的繁盛，当下曾经有几种较为成熟的 JavaScript 代码标准查看工具，包含 JSLint、JSHint、ESLint、FECS 等等。EOS-JS，它是一款插件化的 JavaScript 代码动态查看工具，具备全套的热修复、增量更新计划，集各类代码标准查看工具劣势于一体，其外围是通过对代码解析失去的 AST（Abstract Syntax Tree，形象语法树）进行模式匹配，定位不合乎约定标准的代码、给出修改意见并反对一键修复，在升高保护老本、晋升执行效率的同时，也保障了代码标准的对立。
为实现标准编码、进步编码品质，目前较为通用的是间接应用开源生态中提供的一些规范计划，能够用较低成本来实现 JavaScript 代码标准的落地。如果再搭配一些辅助工具（例如 husky 和 lint-staged），整个流程会更加顺畅。然而对于大型企业开发团队而言，数十人甚至上千人面对数万个工程，规模化地利用对立的 JavaScript 代码标准，并且无效落地执行，问题就会变得较为简单。
痛点剖析
设计初期，咱们收集了大量前端开发人员的编码痛点，能够演绎为以下几点：
人员角度
公司部门团队较多，从上往下宣传，执行难度较大
团队（人员）格调差别大的，不是每个团队都被迫去梳理实用的规定集
没有数据统计和无效的监管计划，人员执行情况及编码优化功效没方法掂量
技术角度
- 技术选型扩散，React、Vue、JavaScript、TypeScript 等
- 开发工具可选性多，Vscode、WebStorm 等
- 工程量大，每个工程都依照开源计划进行配置，复杂度晋升，管理混乱
解决方案
针对上文中提出的问题，咱们设计了一套残缺的技术解决档案，基于 EOS-JS 提供了插件端和平台端两种扫描办法，用户可结合实际状况自由选择。
EOS-JS 是一个扫描引擎，通过根底检测能力和模式束缚，推动代码检测流程的运行。原始代码通过解析器的解析，在管道中逐个通过所有规定的查看，最终检测出所有不符合规范的代码，并输入为报告。
整体设计方案分为以下几点：
- 定位问题与主动修复：该模块是整体计划的基石，通过解析代码失去 AST，进行模式匹配，定位不合乎约定标准的代码，并针对通用标准问题编码提供主动修复能力。
- 多场景通用标准（外围）：通过分层分类的结构设计，在保障根底规定一致性的同时，实现了对不同场景、技术选型的撑持。
- 自动化接入降级：通过 JD 插件核心实现两端（Plugin/Server）“一键”接入，主动降级，极大升高了工程接入和保护的老本。
- 多端代码检测：该模块是计划落地执行的保障，将代码查看与本地实时编码及 CI 继续集成工作流程相结合。在保障代码集成品质的同时，也通过定制集成查看 / 修复工具升高了开发者的利用执行老本。
- 数据统计可视化：通过对工具运行和代码集成查看过程进行埋点、查看后果收集和剖析，理解计划的利用状态和成果。
整体计划设计图如下所示：
具体实现
整体计划已确认，但具体到各个模块的实现，依然须要进一步深刻思考，以设计出更加正当的实现计划。本章将对计划的几大外围模块进行具体介绍。
01 定位问题、主动修复
代码解析，获取问题数据源是开发扫描引擎，统计编码问题的前提。
AST 编译简介
AST：简略了解, 就是把咱们写的代码依照肯定的规定转换成一种树形构造。在 javascript 世界中，能够认为形象语法树 (AST) 是最底层，再往下，就是对于转换和编译的“黑魔法”畛域了。咱们常见的前端开发插件 javascript 转译、代码压缩、css 预处理器、pretiier 等都建设在了 AST 这个伟人的肩膀上。EOS-JS 引擎集百家之所长，基于 AST 形象 JS 源码的共性，剖析源码，进行模式匹配，查看问题。
编译流程次要分为以下四步:
- 词法剖析 scanner
- parser 生成 AST 树
- traverse 对 AST 树遍历, 进行增删改查
- generator 将更新后的 AST 转化成代码
能够很分明的看出，实现代码扫描，能够在 parser 生成 AST 树后，进行模式匹配。实例演示如下：
insert 函数解析后，失去如下所示构造体：
提出批改倡议、一键修复。
理论编码过程中，咱们充分利用 AST 劣势针对常见编码标准问题例如：正文、代码替换等提供了一键修复能力，进步了开发者编码效率。持续以 insert 函数为例，基于咱们后面失去的 insert 函数体的语法树剖析，实现代码替换性能：
02 多场景通用标准
这一模块是整体计划的外围，采纳分层分类的结构设计，提供多场景、多技术计划的通用配置计划，解决了用户最大的痛点，并使计划具备易保护、易扩大的个性。
具体配置计划如下：
EOS-JS 扫描引擎借助插件化设计原理，与解析器解绑，咱们能够应用不同的解析器进行原始代码解析，例如应用不同的解析器解决 ES 语法与 TypeScript 语言。最终实现所有的规定可独立管制，并且具备自定义拓展能力。
动静配置化计划
EOS-JS 提供了全面、灵便的配置能力，能够对解析器、规定、环境、全局变量等进行配置；还能够配置层叠、实现配置共享。具体的应用中，各团队能够依据部门需要灵便的抉择各层级、各类型的搭配，在代码检测平台取得和我的项目匹配的规定集，如仍不满足需要，也能够通过自定义规定集，失去本人预期的对立标准工具。
Base 层：通过公司外部前端开发团队制订对立的根底语法和格局标准，提供通用的代码格调和语法规定配置。
框架撑持层：提供对通用的一些技术场景、框架的反对，包含 Node.js、React、Vue、等；这一层借助多个团队对各种框架的规定应用倡议，整合出适配各种框架的规定集。
TS 层：这一层提供对 TypeScript 的反对。扩大（自定义）层：针对团队的非凡规定诉求，提供定制化反对，目前已存在的 JDSpecification 便是为公司外部定制的前端代码扫描标准。
这种分层分类、配置解耦的设计构造，存在以下劣势：
- 对 Base 层级的批改，影响全局。
- 对非根底层某一部分的调整不会产生关联性的影响。
- 如需扩大对某一类型的反对，团队通过自定义，配置实现后，只需关注这一类型的非凡规定配置。
该计划已在公司外部失去宽泛应用，例如：Plus 团队在平台配置自定义 React 标准，扫描该团队的 React 我的项目时规定即时失效，这种通过分层、分类的结构设计，节俭了用户应用老本的同时，缩小了规定保护老本，规定示例代码如下：
03 自动化接入降级
前端开发人员在开源计划的应用中常常遇到规定有效、兼容性、解析异样等问题，重复排查和定位问题会节约大量的精力。因而在设计接入及降级流程时，咱们充分考虑了规定集和工程计划的兼容性、用户应用场景、接入老本，操作体验等，采纳了 Plugin 和 Server 可独立运行，亦可协同工作的设计模式。一键接入，主动降级，为用户带来良好的应用体验。工作流程如下图所示：
咱们开发了 JDPluginCenter 插件，反对用户多场景需要，无论什么开发场景和框架选型，繁琐的接入流程都只须要用户装置 JDPluginCenter 或是一条命令集成到我的项目脚手架，便可实现在插件和平台两端的接入流程。
04 多端代码检测
为防止因一些主观因素或疏漏造成的编码标准执行不到位，咱们将代码标准动态查看与开发工作流集成，保障代码标准的无效落实。
本地开发实时查看： 本地编码过程中，EOS-VSCode 插件有两种查看形式可供选择。实时查看编码问题给出批改倡议，也能够针对单个文件、单个文件夹或者整个我的项目手动触发，开启查看流程，并将后果展现到前台。其长处在于实时性，可在编码过程中发现并解决编码标准及品质问题。
代码提交查看： 在代码 Commit 时，通过 gitHook 触发代码查看。其长处在于能实时响应开发者的动作，给出反馈，疾速定位和修复问题 代码集成查看：在代码集成（借助 CI 零碎的集成流程性能）时，通过代码检测平台对代码进行查看，检测不通过则阻断集成。其长处在于可能强制执行，可在线追踪检测报告。
Server 端查看： 代码库源码或构建产物在服务端扫描。反对自动化定时扫描和用户被动触发扫描两种形式，其长处在于能够依照不同维度进行数据统计，对上能够无效监管，对下能够高效落实。
数据统计可视化
数据统计
外围是信息采集和剖析。在本计划中：
- 执行情况监测：插件启动、敞开、用户信息、仓库地址等信息上报后，可准确剖析使用率、扫描成功率、用户活跃度等。
- 扫描后果剖析：插件端、CI 继续集成节点、Server 端扫描都会后果上报扫描后果，包含查看是否通过、blocker 和 warning 信息的数量、问题代码段、问题代码行号等。
剖析及数据可视化
该模块蕴含插件端可视化和平台可视化两局部：
- 插件端：实时检测，编码倡议即时揭示；手动扫描，后果剖析统计后展现到编辑器 view，供开发人员间接定位问题代码行。
- 平台端：集体、团队、工程等各维度进行数据汇总，通过图形、报表多种类型进行数据展现及邮件告诉。某团队编码问题变化趋势：
以上是京东批发技术与数据中心共享技术部在查看前端编码标准及编码品质过程中的一些实际，欢送交换。
欢送点击【京东科技】，理解开发者社区
更多精彩技术实际与独家干货解析
欢送关注【京东科技开发者】公众号