一种基于ESLint和Prettier实现前端代码格式化的方法及系统技术方案

本发明专利技术公开了一种基于ESLint和Prettier实现前端代码格式化的方法及系统，包括安装前端编码所需的编辑器；全局安装ESLint，并配置代码检测规则；全局安装Prettier，并配置代码格式化规则；自动保存，完成代码检测问题修复和代码格式化，解决了编辑器的格式化风格不一致问题，使用Prettier进行统一，实现了公司不同开发者的前端代码规范，使得代码易读。使得代码易读。使得代码易读。

【技术实现步骤摘要】
一种基于ESLint和Prettier实现前端代码格式化的方法及系统


[0001]本专利技术涉及前端开发的
，尤其涉及一种基于ESLint和Prettier实现前端代码格式化的方法及系统。

技术介绍

[0002]ESLint是一个用来识别ECMAScript并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。Prettier也是一个流行的代码格式化工具的名称，能够解析代码。
[0003]ESLint的目标是提供一个插件化的javascript代码检测工具，ESLint主要是对js代码进行检测，对于格式化，通常由编辑器自带的格式化规则对代码进行处理，此时，编辑器的不同会导致代码风格不同。

技术实现思路

[0004]本部分的目的在于概述本专利技术的实施例的一些方面以及简要介绍一些较佳实施例。在本部分以及本申请的说明书摘要和专利技术名称中可能会做些简化或省略以避免使本部分、说明书摘要和专利技术名称的目的模糊，而这种简化或省略不能用于限制本专利技术的范围。
[0005]鉴于上述现有代码格式化存在的问题，提出了本专利技术。
[0006]因此，本专利技术解决的技术问题是：解决在代码格式化的过程中由于编辑器的不同导致的代码风格不一致的问题。
[0007]为解决上述技术问题，本专利技术提供如下技术方案：包括，安装前端编码所需的编辑器；全局安装ESLint，并配置代码检测规则；全局安装Prettier，并配置代码格式化规则；自动保存，完成代码检测问题修复和代码格式化。
[0008]作为本专利技术所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：安装前端编码所需的编辑器具体包括，下载Visual Studio Code；选择操作系统下载对应的安装包。
[0009]作为本专利技术所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：全局安装所述ESLint，并配置代码检测规则需根据官网的配置文件进行代码检测规则配置。
[0010]作为本专利技术所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：全局安装所述Prettier，并配置代码格式化规则需根据官网的配置文件进行格式化规则配置。
[0011]作为本专利技术所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：还包括，利用所述ESLint和所述Prettier读取协议原型定义文件；根据读取
结果生成并展开所述检测规则和所述格式化规则；对读取参数合法性进行验证并判定序列优先级；结合搜索引擎寻找优先级序列，格式化生成代码。
[0012]作为本专利技术所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：若判定所述序列优先级成功，则直接启动所述搜索引擎进行寻找；若判定所述序列优先级失败，则结束寻找操作。
[0013]作为本专利技术所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：所述代码检测问题修复包括，字段类型、字段声明、字段标签和注释的信息。
[0014]作为本专利技术所述的基于ESLint和Prettier实现前端代码格式化的系统的一种优选方案，其中：包括，安装模块，用于安装前端编码所需的编辑器、ESLint及Prettier；配置模块，用于根据官网的配置文件进行代码检测规则配置和格式化规则配置；修复模块，用于实现代码检测问题修复；格式化模块，用于实现代码的格式化。
[0015]作为本专利技术所述的基于ESLint和Prettier实现前端代码格式化的系统的一种优选方案，其中：所述配置模块具体包括，代码检测配置单元，用于进行代码检测规则配置；代码格式化配置单元，用于进行格式化规则配置。
[0016]本专利技术的有益效果：本专利技术解决了编辑器的格式化风格不一致问题，使用Prettier进行统一，实现了公司不同开发者的前端代码规范，使得代码易读。
附图说明
[0017]为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其它的附图。其中：
[0018]图1为本专利技术提供的基于ESLint和Prettier实现前端代码格式化的方法的方法流程图；
[0019]图2为本专利技术提供的基于ESLint和Prettier实现前端代码格式化的系统的模块图。
具体实施方式
[0020]为使本专利技术的上述目的、特征和优点能够更加明显易懂，下面结合说明书附图对本专利技术的具体实施方式做详细的说明，显然所描述的实施例是本专利技术的一部分实施例，而不是全部实施例。基于本专利技术中的实施例，本领域普通人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本专利技术的保护的范围。
[0021]在下面的描述中阐述了很多具体细节以便于充分理解本专利技术，但是本专利技术还可以采用其他不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本专利技术内涵的情况下做类似推广，因此本专利技术不受下面公开的具体实施例的限制。
[0022]其次，此处所称的“一个实施例”或“实施例”是指可包含于本专利技术至少一个实现方式中的特定特征、结构或特性。在本说明书中不同地方出现的“在一个实施例中”并非均指同一个实施例，也不是单独的或选择性的与其他实施例互相排斥的实施例。
[0023]本专利技术结合示意图进行详细描述，在详述本专利技术实施例时，为便于说明，表示器件
结构的剖面图会不依一般比例作局部放大，而且所述示意图只是示例，其在此不应限制本专利技术保护的范围。此外，在实际制作中应包含长度、宽度及深度的三维空间尺寸。
[0024]同时在本专利技术的描述中，需要说明的是，术语中的“上、下、内和外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本专利技术和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本专利技术的限制。此外，术语“第一、第二或第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。
[0025]本专利技术中除非另有明确的规定和限定，术语“安装、相连、连接”应做广义理解，例如：可以是固定连接、可拆卸连接或一体式连接；同样可以是机械连接、电连接或直接连接，也可以通过中间媒介间接相连，也可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本专利技术中的具体含义。
[0026]实施例1
[0027]参照图1，为本专利技术的第一个实施例，提供了一种基于ESLint和Prettier实现前端代码格式化的方法，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于ESLint和Prettier实现前端代码格式化的方法，其特征在于：包括，安装前端编码所需的编辑器；全局安装ESLint，并配置代码检测规则；全局安装Prettier，并配置代码格式化规则；自动保存，完成代码检测问题修复和代码格式化。2.根据权利要求2所述的基于ESLint和Prettier实现前端代码格式化的方法，其特征在于：安装前端编码所需的编辑器具体包括，下载VisualStudio Code；选择操作系统下载对应的安装包。3.根据权利要求1或2所述的基于ESLint和Prettier实现前端代码格式化的方法，其特征在于：全局安装所述ESLint，并配置代码检测规则需根据官网的配置文件进行代码检测规则配置。4.根据权利要求3所述的基于ESLint和Prettier实现前端代码格式化的方法，其特征在于：全局安装所述Prettier，并配置代码格式化规则需根据官网的配置文件进行格式化规则配置。5.根据权利要求4所述的基于ESLint和Prettier实现前端代码格式化的方法，其特征在于：还包括，利用所述ESLint和所述Prettier读取协议原型定义文件；根据读取结果生成并展开所述检测规则和所述...

【专利技术属性】
技术研发人员：张裕，王宇航，王斌，
申请(专利权)人：中环曼普科技南京有限公司，
类型：发明
国别省市：