CN112286532A - 一种基于ESLint和Prettier实现前端代码格式化的方法及系统 - Google Patents
一种基于ESLint和Prettier实现前端代码格式化的方法及系统 Download PDFInfo
- Publication number
- CN112286532A CN112286532A CN202011198948.4A CN202011198948A CN112286532A CN 112286532 A CN112286532 A CN 112286532A CN 202011198948 A CN202011198948 A CN 202011198948A CN 112286532 A CN112286532 A CN 112286532A
- Authority
- CN
- China
- Prior art keywords
- code
- formatting
- prettier
- eslint
- installing
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/43—Checking; Contextual analysis
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明公开了一种基于ESLint和Prettier实现前端代码格式化的方法及系统，包括安装前端编码所需的编辑器；全局安装ESLint，并配置代码检测规则；全局安装Prettier，并配置代码格式化规则；自动保存，完成代码检测问题修复和代码格式化，解决了编辑器的格式化风格不一致问题，使用Prettier进行统一，实现了公司不同开发者的前端代码规范，使得代码易读。
Description
技术领域
本发明涉及前端开发的技术领域，尤其涉及一种基于ESLint和Prettier实现前端代码格式化的方法及系统。
背景技术
ESLint是一个用来识别ECMAScript并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。Prettier也是一个流行的代码格式化工具的名称，能够解析代码。
ESLint的目标是提供一个插件化的javascript代码检测工具，ESLint主要是对js代码进行检测，对于格式化，通常由编辑器自带的格式化规则对代码进行处理，此时，编辑器的不同会导致代码风格不同。
发明内容
本部分的目的在于概述本发明的实施例的一些方面以及简要介绍一些较佳实施例。在本部分以及本申请的说明书摘要和发明名称中可能会做些简化或省略以避免使本部分、说明书摘要和发明名称的目的模糊，而这种简化或省略不能用于限制本发明的范围。
鉴于上述现有代码格式化存在的问题，提出了本发明。
因此，本发明解决的技术问题是：解决在代码格式化的过程中由于编辑器的不同导致的代码风格不一致的问题。
为解决上述技术问题，本发明提供如下技术方案：包括，安装前端编码所需的编辑器；全局安装ESLint，并配置代码检测规则；全局安装Prettier，并配置代码格式化规则；自动保存，完成代码检测问题修复和代码格式化。
作为本发明所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：安装前端编码所需的编辑器具体包括，下载Visual Studio Code；选择操作系统下载对应的安装包。
作为本发明所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：全局安装所述ESLint，并配置代码检测规则需根据官网的配置文件进行代码检测规则配置。
作为本发明所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：全局安装所述Prettier，并配置代码格式化规则需根据官网的配置文件进行格式化规则配置。
作为本发明所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：还包括，利用所述ESLint和所述Prettier读取协议原型定义文件；根据读取结果生成并展开所述检测规则和所述格式化规则；对读取参数合法性进行验证并判定序列优先级；结合搜索引擎寻找优先级序列，格式化生成代码。
作为本发明所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：若判定所述序列优先级成功，则直接启动所述搜索引擎进行寻找；若判定所述序列优先级失败，则结束寻找操作。
作为本发明所述的基于ESLint和Prettier实现前端代码格式化的方法的一种优选方案，其中：所述代码检测问题修复包括，字段类型、字段声明、字段标签和注释的信息。
作为本发明所述的基于ESLint和Prettier实现前端代码格式化的系统的一种优选方案，其中：包括，安装模块，用于安装前端编码所需的编辑器、ESLint及Prettier；配置模块，用于根据官网的配置文件进行代码检测规则配置和格式化规则配置；修复模块，用于实现代码检测问题修复；格式化模块，用于实现代码的格式化。
作为本发明所述的基于ESLint和Prettier实现前端代码格式化的系统的一种优选方案，其中：所述配置模块具体包括，代码检测配置单元，用于进行代码检测规则配置；代码格式化配置单元，用于进行格式化规则配置。
本发明的有益效果：本发明解决了编辑器的格式化风格不一致问题，使用Prettier进行统一，实现了公司不同开发者的前端代码规范，使得代码易读。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其它的附图。其中：
图1为本发明提供的基于ESLint和Prettier实现前端代码格式化的方法的方法流程图；
图2为本发明提供的基于ESLint和Prettier实现前端代码格式化的系统的模块图。
具体实施方式
为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合说明书附图对本发明的具体实施方式做详细的说明，显然所描述的实施例是本发明的一部分实施例，而不是全部实施例。基于本发明中的实施例，本领域普通人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明的保护的范围。
在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是本发明还可以采用其他不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本发明内涵的情况下做类似推广，因此本发明不受下面公开的具体实施例的限制。
其次，此处所称的“一个实施例”或“实施例”是指可包含于本发明至少一个实现方式中的特定特征、结构或特性。在本说明书中不同地方出现的“在一个实施例中”并非均指同一个实施例，也不是单独的或选择性的与其他实施例互相排斥的实施例。
本发明结合示意图进行详细描述，在详述本发明实施例时，为便于说明，表示器件结构的剖面图会不依一般比例作局部放大，而且所述示意图只是示例，其在此不应限制本发明保护的范围。此外，在实际制作中应包含长度、宽度及深度的三维空间尺寸。
同时在本发明的描述中，需要说明的是，术语中的“上、下、内和外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一、第二或第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。
本发明中除非另有明确的规定和限定，术语“安装、相连、连接”应做广义理解，例如：可以是固定连接、可拆卸连接或一体式连接；同样可以是机械连接、电连接或直接连接，也可以通过中间媒介间接相连，也可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。
实施例1
参照图1，为本发明的第一个实施例，提供了一种基于ESLint和Prettier实现前端代码格式化的方法，包括：
S1：安装前端编码所需的编辑器。其中需要说明的是，安装前端编码所需的编辑器具体包括：
下载Visual Studio Code；
选择操作系统下载对应的安装包。
S2：全局安装ESLint，并配置代码检测规则。本步骤需要说明的是，进一步的，全局安装ESLint，并配置代码检测规则需根据官网的配置文件进行代码检测规则配置，算法描述为：
S3：全局安装Prettier，并配置代码格式化规则。其中还需要说明的是，更进一步的，全局安装Prettier，并配置代码格式化规则需根据官网的配置文件进行格式化规则配置，算法描述为：
"prettier.eslintIntegration":true,//让prettier使用eslint的代码格式进行校验
"prettier.semi":false,//去掉代码结尾的分号
"prettier.singleQuote":true,//使用带引号替代双引号
S4：自动保存，实现代码检测问题修复和代码格式化。本步骤还需要说明的是：
在Visual Studio Code中工具栏中点击‘文件’-‘首选项’–‘设置’–‘扩展’-ESLint：Auto Fix On Save，勾选。
具体的，还包括：
利用ESLint和Prettier读取协议原型定义文件；
根据读取结果生成并展开检测规则和格式化规则；
对读取参数合法性进行验证并判定序列优先级；
结合搜索引擎寻找优先级序列，格式化生成代码。
进一步的是：
若判定序列优先级成功，则直接启动搜索引擎进行寻找；
若判定序列优先级失败，则结束寻找操作。
还需要说明的是，代码检测问题修复包括：
字段类型、字段声明、字段标签和注释的信息。
较佳的，本实施例还需要说明的是，现有的前端代码格式化方法是没有经过ESLint和Prettier检验判定直接生成代码并格式化的，其根据UI一键生成标准前端样式代码并在线编辑页面样式自动前端代码进行格式化，该方法主要解决的技术问题是如何自动格式化前端静态代码，但是，其存在着编写规则相同、重复劳动效率、代码可读性差导致后期维护成本较高的问题。
优选的，为了更好地对本发明方法中采用的技术效果加以验证说明，本实施例选择以传统的前端代码格式化方法与本发明方法进行对比测试，以科学论证的手段对比试验结果，验证本发明方法所具有的真实效果。
传统的前端代码格式化方法可读性差、效率低、维护成本高、数据实时准确性低，为验证本发明方法相对于传统方法具有较高的数据实时准确性、效率度、可读性，本实施例中将采用传统方法与本发明方法分别对某一段简历的编程代码格式化进行实时测量对比。
测试条件：(1)本发明方法采用ESLint和Prettier软件运行，传统方法采用sketch软件运行；
(2)针对于同一份简历资料数据进行代码格式化，并记录两种方法读取数据的时间、效率和准确度。
表1：两种方法测试对比表。
参照表1，能够直观的看出，通过测试指标的对比，传统方法的更新效率和准确度低于本发明方法，且本发明方法趋于稳定趋势，不会出现较大波动，这使得本发明方法更具有可靠稳定性，因此，验证了本发明方法所具有的真实效果。
实施例2
参照图2，为本发明的第二个实施例，该实施例不同于第一个实施例的是，提供了一种基于ESLint和Prettier实现前端代码格式化的系统，包括：
安装模块100，用于安装前端编码所需的编辑器、ESLint及Prettier；
配置模块200，用于根据官网的配置文件进行代码检测规则配置和格式化规则配置；
修复模块300，用于实现代码检测问题修复；
格式化模块400，用于实现代码的格式化。
进一步的，配置模块200具体包括：
代码检测配置单元，用于进行代码检测规则配置；
代码格式化配置单元，用于进行格式化规则配置。
应当认识到，本发明的实施例可以由计算机硬件、硬件和软件的组合、或者通过存储在非暂时性计算机可读存储器中的计算机指令来实现或实施。所述方法可以使用标准编程技术-包括配置有计算机程序的非暂时性计算机可读存储介质在计算机程序中实现，其中如此配置的存储介质使得计算机以特定和预定义的方式操作——根据在具体实施例中描述的方法和附图。每个程序可以以高级过程或面向对象的编程语言来实现以与计算机系统通信。然而，若需要，该程序可以以汇编或机器语言实现。在任何情况下，该语言可以是编译或解释的语言。此外，为此目的该程序能够在编程的专用集成电路上运行。
此外，可按任何合适的顺序来执行本文描述的过程的操作，除非本文另外指示或以其他方式明显地与上下文矛盾。本文描述的过程(或变型和/或其组合)可在配置有可执行指令的一个或多个计算机系统的控制下执行，并且可作为共同地在一个或多个处理器上执行的代码(例如，可执行指令、一个或多个计算机程序或一个或多个应用)、由硬件或其组合来实现。所述计算机程序包括可由一个或多个处理器执行的多个指令。
进一步，所述方法可以在可操作地连接至合适的任何类型的计算平台中实现，包括但不限于个人电脑、迷你计算机、主框架、工作站、网络或分布式计算环境、单独的或集成的计算机平台、或者与带电粒子工具或其它成像装置通信等等。本发明的各方面可以以存储在非暂时性存储介质或设备上的机器可读代码来实现，无论是可移动的还是集成至计算平台，如硬盘、光学读取和/或写入存储介质、RAM、ROM等，使得其可由可编程计算机读取，当存储介质或设备由计算机读取时可用于配置和操作计算机以执行在此所描述的过程。此外，机器可读代码，或其部分可以通过有线或无线网络传输。当此类媒体包括结合微处理器或其他数据处理器实现上文所述步骤的指令或程序时，本文所述的发明包括这些和其他不同类型的非暂时性计算机可读存储介质。当根据本发明所述的方法和技术编程时，本发明还包括计算机本身。计算机程序能够应用于输入数据以执行本文所述的功能，从而转换输入数据以生成存储至非易失性存储器的输出数据。输出信息还可以应用于一个或多个输出设备如显示器。在本发明优选的实施例中，转换的数据表示物理和有形的对象，包括显示器上产生的物理和有形对象的特定视觉描绘。
如在本申请所使用的，术语“组件”、“模块”、“系统”等等旨在指代计算机相关实体，该计算机相关实体可以是硬件、固件、硬件和软件的结合、软件或者运行中的软件。例如，组件可以是，但不限于是：在处理器上运行的处理、处理器、对象、可执行文件、执行中的线程、程序和/或计算机。作为示例，在计算设备上运行的应用和该计算设备都可以是组件。一个或多个组件可以存在于执行中的过程和/或线程中，并且组件可以位于一个计算机中以及/或者分布在两个或更多个计算机之间。此外，这些组件能够从在其上具有各种数据结构的各种计算机可读介质中执行。这些组件可以通过诸如根据具有一个或多个数据分组(例如，来自一个组件的数据，该组件与本地系统、分布式系统中的另一个组件进行交互和/或以信号的方式通过诸如互联网之类的网络与其它系统进行交互)的信号，以本地和/或远程过程的方式进行通信。
应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或者等同替换，而不脱离本发明技术方案的精神和范围，其均应涵盖在本发明的权利要求范围当中。
Claims (9)
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读取协议原型定义文件；
根据读取结果生成并展开所述检测规则和所述格式化规则；
对读取参数合法性进行验证并判定序列优先级；
结合搜索引擎寻找优先级序列，格式化生成代码。
6.根据权利要求5所述的基于ESLint和Prettier实现前端代码格式化的方法，其特征在于：若判定所述序列优先级成功，则直接启动所述搜索引擎进行寻找；
若判定所述序列优先级失败，则结束寻找操作。
7.根据权利要求6所述的基于ESLint和Prettier实现前端代码格式化的方法，其特征在于：所述代码检测问题修复包括，
字段类型、字段声明、字段标签和注释的信息。
8.一种基于ESLint和Prettier实现前端代码格式化的系统，其特征在于：包括，
安装模块(100)，用于安装前端编码所需的编辑器、ESLint及Prettier；
配置模块(200)，用于根据官网的配置文件进行代码检测规则配置和格式化规则配置；
修复模块(300)，用于实现代码检测问题修复；
格式化模块(400)，用于实现代码的格式化。
9.根据权利要求8所述的基于ESLint和Prettier实现前端代码格式化的系统，其特征在于：所述配置模块(200)具体包括，
代码检测配置单元，用于进行代码检测规则配置；
代码格式化配置单元，用于进行格式化规则配置。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011198948.4A CN112286532A (zh) | 2020-10-31 | 2020-10-31 | 一种基于ESLint和Prettier实现前端代码格式化的方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011198948.4A CN112286532A (zh) | 2020-10-31 | 2020-10-31 | 一种基于ESLint和Prettier实现前端代码格式化的方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112286532A true CN112286532A (zh) | 2021-01-29 |
Family
ID=74354006
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011198948.4A Pending CN112286532A (zh) | 2020-10-31 | 2020-10-31 | 一种基于ESLint和Prettier实现前端代码格式化的方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112286532A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113535183A (zh) * | 2021-07-28 | 2021-10-22 | 北京达佳互联信息技术有限公司 | 代码处理方法、装置、电子设备及存储介质 |
| CN114385489A (zh) * | 2021-12-28 | 2022-04-22 | 联通智网科技股份有限公司 | 前端开发代码检测方法、装置及存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060161589A1 (en) * | 2005-01-17 | 2006-07-20 | Oracle International Corporation | Simplifying Movement of Data to Different Desired Storage Portions Depending on the State of the Corresponding Transaction |
| CN107844422A (zh) * | 2017-11-03 | 2018-03-27 | 郑州云海信息技术有限公司 | 一种在linux下自动统计Js语言编码缺陷率的方法 |
| CN111290753A (zh) * | 2020-01-20 | 2020-06-16 | 远光软件股份有限公司 | 前端开发环境的搭建方法、装置、设备及存储介质 |
-
2020
- 2020-10-31 CN CN202011198948.4A patent/CN112286532A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060161589A1 (en) * | 2005-01-17 | 2006-07-20 | Oracle International Corporation | Simplifying Movement of Data to Different Desired Storage Portions Depending on the State of the Corresponding Transaction |
| CN107844422A (zh) * | 2017-11-03 | 2018-03-27 | 郑州云海信息技术有限公司 | 一种在linux下自动统计Js语言编码缺陷率的方法 |
| CN111290753A (zh) * | 2020-01-20 | 2020-06-16 | 远光软件股份有限公司 | 前端开发环境的搭建方法、装置、设备及存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| 静晴轩别苑: "使用ESLint&Prettier美化Vue代码", 《HTTPS://NICE.LOVEJADE.CN/ZH/ARTICLE/BEAUTIFY-VUE-BY-ESLINT-AND-PRETTIER.HTML》 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113535183A (zh) * | 2021-07-28 | 2021-10-22 | 北京达佳互联信息技术有限公司 | 代码处理方法、装置、电子设备及存储介质 |
| CN113535183B (zh) * | 2021-07-28 | 2024-05-28 | 北京达佳互联信息技术有限公司 | 代码处理方法、装置、电子设备及存储介质 |
| CN114385489A (zh) * | 2021-12-28 | 2022-04-22 | 联通智网科技股份有限公司 | 前端开发代码检测方法、装置及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110018955B (zh) | 通过转换手动测试用例来生成自动化测试脚本 | |
| CN108319575B (zh) | 一种页面组件的校验方法、装置、服务器和存储介质 | |
| CN112286532A (zh) | 一种基于ESLint和Prettier实现前端代码格式化的方法及系统 | |
| CN111459495A (zh) | 单元测试代码文件生成方法、电子装置及存储介质 | |
| CN111078568A (zh) | 代码规范方法、装置、计算机设备和存储介质 | |
| CN104091616A (zh) | 机顶盒内置flash芯片数据一致性检测方法 | |
| CN110837429A (zh) | 一种web端线上代码智能修复方法及装置 | |
| CN112380145A (zh) | Sdk生成方法、装置、设备及可读存储介质 | |
| CN111913889A (zh) | 一种测试系统搭建方法及测试系统 | |
| CN111522583A (zh) | 一种生成配置文件的方法、装置、计算机设备及存储介质 | |
| CN111552480B (zh) | 跨平台编译方法、装置、设备及可读存储介质 | |
| CN111078529B (zh) | 客户端写入模块测试方法、装置、电子设备 | |
| CN115470152B (zh) | 测试代码生成方法、测试代码生成装置以及存储介质 | |
| CN111459810A (zh) | 构建应用程序的方法、编程设备和计算机可读存储介质 | |
| US20040204892A1 (en) | Testing of integrated circuits from design documentation | |
| CN114816364A (zh) | 基于Swagger动态生成范本文件的方法、装置及应用 | |
| CN114253642B (zh) | 系统信息处理方法、装置、电子设备及介质 | |
| CN114661298A (zh) | 公共方法自动生成方法、系统、设备及介质 | |
| US9747085B2 (en) | Source code generation from prototype source | |
| CN114297088A (zh) | 前端vue框架组件的测试方法、装置、设备及介质 | |
| CN113760291A (zh) | 日志输出的方法和装置 | |
| CN114756217B (zh) | 基于插件的脚本生成系统 | |
| CN111522737B (zh) | 一种前端界面的自动化测试校验方法、装置及存储介质 | |
| CN113704020B (zh) | 固态硬盘的出错现场数据的解析方法以及装置 | |
| CN112559370A (zh) | 一种基于前端的React项目单元测试方法及相关设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20210730 Address after: Floor 11, building A1, Huizhi science and Technology Park, 8 Hengtai Road, Nanjing Economic and Technological Development Zone, Jiangsu Province 210000 Applicant after: DILU TECHNOLOGY Co.,Ltd. Address before: 211106 block a, Mingjia science and technology building, 99 Shengli Road, Jiangning District, Nanjing City, Jiangsu Province Applicant before: Central Manpu Technology (Nanjing) Co.,Ltd. |
|
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210129 |