CN109032949A - 一种前端代码质量检测方法及装置 - Google Patents

一种前端代码质量检测方法及装置 Download PDF

Info

Publication number
CN109032949A
CN109032949A CN201810871905.4A CN201810871905A CN109032949A CN 109032949 A CN109032949 A CN 109032949A CN 201810871905 A CN201810871905 A CN 201810871905A CN 109032949 A CN109032949 A CN 109032949A
Authority
CN
China
Prior art keywords
code
quality
file
css
end code
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
Application number
CN201810871905.4A
Other languages
English (en)
Inventor
黄秋霞
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
ZHENGZHOU XIZHI INFORMATION TECHNOLOGY Co Ltd
Original Assignee
ZHENGZHOU XIZHI INFORMATION TECHNOLOGY Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by ZHENGZHOU XIZHI INFORMATION TECHNOLOGY Co Ltd filed Critical ZHENGZHOU XIZHI INFORMATION TECHNOLOGY Co Ltd
Priority to CN201810871905.4A priority Critical patent/CN109032949A/zh
Publication of CN109032949A publication Critical patent/CN109032949A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/36—Preventing errors by testing or debugging software
    • G06F11/3604—Software analysis for verifying properties of programs
    • G06F11/3608—Software analysis for verifying properties of programs using formal methods, e.g. model checking, abstract interpretation

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Computer Hardware Design (AREA)
  • Quality & Reliability (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

本发明涉及软件开发领域，具体涉及一种前端代码质量检测方法及装置。本发明对于前端代码按照不同的编码语言设置了对应的代码检测逻辑，通过设置代码规范库结合选取的不同技术栈，对前端代码中的不同编码进行检测与修复。本发明的检测逻辑简单容易实现，方便快捷，节省了时间，提高了工作效率，同时解决了前端代码风格不统一、代码错乱不利于维护扩展、容易出现低级错误等问题。

Description

一种前端代码质量检测方法及装置
技术领域
本发明涉及软件开发领域，具体涉及一种前端代码质量检测方法及装置。
背景技术
前端各种框架更新很快，每个前端工程师需要不断地去充电，以便更好的跟上前端发展趋势，把新的技术更好的利用到工厂网的项目中，虽然前端代码需要使用的技术比较多，但HTML、CSS、javascript依然是最基础的前端编程语言，它们都有着相似的规范风格和各自不同的规则要求，每个项目负责前端开发和维护的人也不同，每个人都有自己写代码的风格，现有的对前端代码进行检测通常使用与前端代码类型匹配的检测工具完成，由于检测工具不具有通用性，造成了代码的可读性低，维护扩展成本高。
发明内容
本发明的目的是提供一种前端代码质量检测方法及装置，用以解决现有前端代码检测技术功能单一、不易扩展，导致代码检测效率低下的问题。
为实现上述目的，本发明提供了一种前端代码质量检测方法，包括以下步骤：
调取待检测的前端代码，设置代码检测参数；
根据所述前端代码包括的编码语言配置对应的代码规范库；
在所述前端代码中提取出所述编码语言对应的代码文件；
根据所述代码文件的编码语言选择对应的代码规范库和设定类型的技术栈对所述代码文件进行检测。
本发明对于前端代码按照不同的编码语言设置了对应的代码检测逻辑，通过设置代码规范库结合选取的不同技术栈，对前端代码中的不同编码进行检测与修复。
进一步的，所述代码检测参数包括：检测结果输出的文件格式、指定忽略检测的文件名称、指定忽略修复的文件名称以及是否在错误信息后显示对应的检测规则名称。
进一步的，所述编码语言包括HTML、CSS和JavaScript。
进一步的，所述HTML对应的技术栈包括HTMLCS；所述CSS对应的技术栈包括CSSHint、CSSBeautify与CSScomb；所述JavaScript对应的技术栈包括ESLint、fixmyjs与jformatter。
进一步的，对所述代码文件进行检测的过程包括：
使用ESLint检查JavaScript代码的质量与风格；使用CSSHint检查CSS代码的质量与风格；使用HTMLCS检查HTML代码的质量与风格并修复与格式化HTML代码；使用fixmyjs与jformatter修复与格式化JavaScript代码；使用CSSBeautify与CSScomb修复与格式化CSS代码。
本发明还提供了一种前端代码质量检测装置，包括处理器和存储器，所述存储器存储有所述处理器实现如下方法的指令：
调取待检测的前端代码，设置代码检测参数；
根据所述前端代码包括的编码语言配置对应的代码规范库；
在所述前端代码中提取出所述编码语言对应的代码文件；
根据所述代码文件的编码语言选择对应的代码规范库和设定类型的技术栈对所述代码文件进行检测。
进一步的，所述代码检测参数包括：检测结果输出的文件格式、指定忽略检测的文件名称、指定忽略修复的文件名称以及是否在错误信息后显示对应的检测规则名称。
进一步的，所述编码语言包括HTML、CSS和JavaScript。
进一步的，所述HTML对应的技术栈包括HTMLCS；所述CSS对应的技术栈包括CSSHint、CSSBeautify与CSScomb；所述JavaScript对应的技术栈包括ESLint、fixmyjs与jformatter。
进一步的，对所述代码文件进行检测的过程包括：
使用ESLint检查JavaScript代码的质量与风格；使用CSSHint检查CSS代码的质量与风格；使用HTMLCS检查HTML代码的质量与风格并修复与格式化HTML代码；使用fixmyjs与jformatter修复与格式化JavaScript代码；使用CSSBeautify与CSScomb修复与格式化CSS代码。
本发明的检测逻辑简单容易实现，方便快捷，节省了时间，提高了工作效率，同时解决了前端代码风格不统一、代码错乱不利于维护扩展、容易出现低级错误等问题。
附图说明
图1是本发明的流程图。
具体实施方式
下面结合附图对本发明做进一步详细的说明。
本发明的目的是为了解决前端代码风格不统一、代码错乱不利于维护扩展、容易出现低级错误等问题。
对于不同类型的前端代码中通用的检测部分，使用检测逻辑中同一检测过程实现，而对于不同类型的前端代码中的不同检测部分，用检测逻辑中与该同一检测过程分支的方式实现，列出各不同类型代码的不同检测部分，实现各类型代码的书写错误检测。根据代码的相似需要检测的功能和各自的需要独自检测的功能大致分为通用代码检测、HTML检测、javascript(js)检测以及代码美化格式化检测(CSS检测)。
通用代码检测：检测HTML、CSS、javascript代码书写是否规范，包括代码的书写是否正确、是否缩进等，出现问题代码高亮显示，并标出代码位置。
HTML检测：主要检查HTML标签是否符合意义化、是否缩进、标签是否闭合，以及是否可以美化格式化HTML。
CSS检测：主要包括检查基本的语法、属性、是否缩写、是否省略0后面的单位、是否标准化各种浏览器前缀、是否有空的css规则等；是否可以美化格式化CSS。
javascript检测：主要是检查基本的语法、变量声明是否合理，是否支持ES6语法检测，是否可以美化格式化javascript。
本发明方法的流程图如图1所示，包括：
第一步：打开***并填写代码git远程路径。
用于指定要检测的代码分支，提交表单后，后台执行代码克隆任务，下载代码到检测***服务器。
第二步：配置检测参数。
通过配置界面，配置代码检测和修复的参数，例如：输出检测结果的文件格式，指定要忽略检测或修复的文件名称，是否在错误信息后显示对应的检验规则名称等。
第三步：选择规则库。
用户可提前针对多种文件类型(html、css、js)，配置多种版本的编码规范库，在检测任务提交界面提供下拉选项，供用户根据需求选择。
公司可以自主制定html、css、js的代码编码规范，例如没有按照要求编写css选择器的，视为代码不规范；html的元素id必须保证页面唯一，因为同一个页面中，不同的元素包含相同的id，不符合id的属性含义，并且使用document.getElementById时可能导致难以追查的问题。
上述描述的规范，是自然语言来描述的，程序是不能识别的，因此我们可以针对规范，声明不同的检测属性，配置成结构化的文件，例如json，供程序读取。例如：htmlcs检测规范配置部分文件中button-name设置为true表示如果用button标签必须设置button的name属性；charset设置为true表示页面必须设置chartset编码属性。凡是设置为true的，检测程序都要对代码进行相应的规范性检测。
用户可以根据需求，通过对不同属性设置不同的值，多种属性的组合来实现不同版本的检测规则。
第四步：提交配置。
提交配置后，后台创建检测任务，后台任务创建、执行都采用Nodejs来实现。
第五步：提取项目。
后台程序根据提交的git代码远程路径，执行git shell命令，拉取代码到本地。
第六步：遍历目录，执行代码检测与修复。
遍历拉取代码的本地目录，筛选出html、css、js三种文件。
程序会根据文件的扩展名进行分类，筛选出CSS文件，结合第三步选择的规范库，然后调用CSSHint进行编码规范检测，调用CSSBeautify与CSScomb修复与格式化代码。筛选出html文件，结合第三步选择的规范库，然后调用HTMLCS检查HTML代码的质量与风格，修复与格式化HTML代码。筛选出js文件，结合第三步选择的规范版本,然后调用ESLint检查JavaScript代码的质量与风格，调用fixmyjs与jformatter修复与格式化JavaScript代码。
最后把生成的检测结果文件和修复的代码，在git服务器创建新的代码分支并提交。
第七步：通过界面查看结果和修复代码。
***提供可视化界面，供用户查看代码检测结果，也可通过git工具来对比代码修复前后的不同，方便用户提高与进步。
本发明利用Nodejs等技术把不同种类的检测工具，集成到一起，功能更加完善强大，同时提供了可视化的界面，方便易用。本发明可以深度结合公司的业务要求，灵活配置不同的代码规范，同时关联git账户统计出员工的代码质量。
以上给出了本发明涉及的具体实施方式，但本发明不局限于所描述的实施方式，例如可以用java或python来搭建后台程序，同样能实现相同的功能，这样形成的技术方案是对上述实施例进行微调形成的，这种技术方案仍落入本发明的保护范围内。

Claims (10)

1.一种前端代码质量检测方法，其特征在于，包括以下步骤：
调取待检测的前端代码，设置代码检测参数；
根据所述前端代码包括的编码语言配置对应的代码规范库；
在所述前端代码中提取出所述编码语言对应的代码文件；
根据所述代码文件的编码语言选择对应的代码规范库和设定类型的技术栈对所述代码文件进行检测。
2.根据权利要求1所述的一种前端代码质量检测方法，其特征在于：所述代码检测参数包括：检测结果输出的文件格式、指定忽略检测的文件名称、指定忽略修复的文件名称以及是否在错误信息后显示对应的检测规则名称。
3.根据权利要求1或2所述的一种前端代码质量检测方法，其特征在于：所述编码语言包括HTML、CSS和JavaScript。
4.根据权利要求3所述的一种前端代码质量检测方法，其特征在于：所述HTML对应的技术栈包括HTMLCS；所述CSS对应的技术栈包括CSSHint、CSSBeautify与CSScomb；所述JavaScript对应的技术栈包括ESLint、fixmyjs与jformatter。
5.根据权利要求4所述的一种前端代码质量检测方法，其特征在于：对所述代码文件进行检测的过程包括：
使用ESLint检查JavaScript代码的质量与风格；使用CSSHint检查CSS代码的质量与风格；使用HTMLCS检查HTML代码的质量与风格并修复与格式化HTML代码；使用fixmyjs与jformatter修复与格式化JavaScript代码；使用CSSBeautify与CSScomb修复与格式化CSS代码。
6.一种前端代码质量检测装置，包括处理器和存储器，其特征在于：所述存储器存储有所述处理器实现如下方法的指令：
调取待检测的前端代码，设置代码检测参数；
根据所述前端代码包括的编码语言配置对应的代码规范库；
在所述前端代码中提取出所述编码语言对应的代码文件；
根据所述代码文件的编码语言选择对应的代码规范库和设定类型的技术栈对所述代码文件进行检测。
7.根据权利要求6所述的一种前端代码质量检测装置，其特征在于：所述代码检测参数包括：检测结果输出的文件格式、指定忽略检测的文件名称、指定忽略修复的文件名称以及是否在错误信息后显示对应的检测规则名称。
8.根据权利要求6或7所述的一种前端代码质量检测装置，其特征在于：所述编码语言包括HTML、CSS和JavaScript。
9.根据权利要求8所述的一种前端代码质量检测装置，其特征在于：所述HTML对应的技术栈包括HTMLCS；所述CSS对应的技术栈包括CSSHint、CSSBeautify与CSScomb；所述JavaScript对应的技术栈包括ESLint、fixmyjs与jformatter。
10.根据权利要求9所述的一种前端代码质量检测装置，其特征在于：对所述代码文件进行检测的过程包括：
使用ESLint检查JavaScript代码的质量与风格；使用CSSHint检查CSS代码的质量与风格；使用HTMLCS检查HTML代码的质量与风格并修复与格式化HTML代码；使用fixmyjs与jformatter修复与格式化JavaScript代码；使用CSSBeautify与CSScomb修复与格式化CSS代码。
CN201810871905.4A 2018-08-02 2018-08-02 一种前端代码质量检测方法及装置 Pending CN109032949A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810871905.4A CN109032949A (zh) 2018-08-02 2018-08-02 一种前端代码质量检测方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810871905.4A CN109032949A (zh) 2018-08-02 2018-08-02 一种前端代码质量检测方法及装置

Publications (1)

Publication Number Publication Date
CN109032949A true CN109032949A (zh) 2018-12-18

Family

ID=64647829

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810871905.4A Pending CN109032949A (zh) 2018-08-02 2018-08-02 一种前端代码质量检测方法及装置

Country Status (1)

Country Link
CN (1) CN109032949A (zh)

Cited By (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109683881A (zh) * 2018-12-27 2019-04-26 潍柴动力股份有限公司 一种代码格式调整方法及装置
CN109871313A (zh) * 2018-12-30 2019-06-11 贝壳技术有限公司 基于特定时间的代码检查方法及装置
CN110532181A (zh) * 2019-08-19 2019-12-03 广州华旻信息科技有限公司 Es6特性兼容性检测***及方法
CN110716866A (zh) * 2019-09-06 2020-01-21 中国平安财产保险股份有限公司 代码质量扫描方法、装置、计算机设备及存储介质
CN110865806A (zh) * 2019-11-20 2020-03-06 腾讯科技（深圳）有限公司 代码处理方法、装置、服务器及存储介质
CN111061488A (zh) * 2019-12-18 2020-04-24 深圳前海环融联易信息科技服务有限公司 检测前端代码质量的方法、装置、计算机设备及存储介质
CN111930632A (zh) * 2020-08-19 2020-11-13 山东健康医疗大数据有限公司 一种前端代码检测质量的方法
CN112256583A (zh) * 2020-10-28 2021-01-22 冠群信息技术(南京)有限公司 一种前端代码质量检测方法
CN112965695A (zh) * 2021-03-12 2021-06-15 中国平安财产保险股份有限公司 前端代码接入检测方法、装置、设备及存储介质
CN113031940A (zh) * 2021-04-29 2021-06-25 武汉夜莺科技有限公司 前端框架开发方法、装置及终端设备
CN113468062A (zh) * 2021-07-16 2021-10-01 中国银行股份有限公司 一种基于ESLint配置的代码质量检测***及方法
CN113535183A (zh) * 2021-07-28 2021-10-22 北京达佳互联信息技术有限公司 代码处理方法、装置、电子设备及存储介质
CN113835740A (zh) * 2021-11-29 2021-12-24 山东捷瑞数字科技股份有限公司 一种面向搜索引擎优化的前端代码自动修复方法
CN114217828A (zh) * 2021-12-22 2022-03-22 四川启睿克科技有限公司 前端通用代码规范库配置方法及***、装置、存储介质
CN110716866B (zh) * 2019-09-06 2024-06-28 中国平安财产保险股份有限公司 代码质量扫描方法、装置、计算机设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP2172839A1 (en) * 2008-09-24 2010-04-07 Accenture Global Services GmbH Methods for identifying and/or analyzing concepts and systems thereof
CN104063310A (zh) * 2013-03-22 2014-09-24 阿里巴巴集团控股有限公司 Web前端质量检测方法与装置
CN106294164A (zh) * 2016-08-15 2017-01-04 中国银行股份有限公司 一种代码检查方法及装置
CN106294180A (zh) * 2016-08-23 2017-01-04 浪潮电子信息产业股份有限公司 一种走查多编程语言代码的集成方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP2172839A1 (en) * 2008-09-24 2010-04-07 Accenture Global Services GmbH Methods for identifying and/or analyzing concepts and systems thereof
CN104063310A (zh) * 2013-03-22 2014-09-24 阿里巴巴集团控股有限公司 Web前端质量检测方法与装置
CN106294164A (zh) * 2016-08-15 2017-01-04 中国银行股份有限公司 一种代码检查方法及装置
CN106294180A (zh) * 2016-08-23 2017-01-04 浪潮电子信息产业股份有限公司 一种走查多编程语言代码的集成方法

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
刘文涛: "《DREAMWEAVER 8完全自学手册》", 30 April 2007 *
我佛山人: ""前端代码风格检查套件 FECS"", 《EFE》 *

Cited By (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109683881B (zh) * 2018-12-27 2022-04-05 潍柴动力股份有限公司 一种代码格式调整方法及装置
CN109683881A (zh) * 2018-12-27 2019-04-26 潍柴动力股份有限公司 一种代码格式调整方法及装置
CN109871313A (zh) * 2018-12-30 2019-06-11 贝壳技术有限公司 基于特定时间的代码检查方法及装置
CN110532181A (zh) * 2019-08-19 2019-12-03 广州华旻信息科技有限公司 Es6特性兼容性检测***及方法
CN110716866A (zh) * 2019-09-06 2020-01-21 中国平安财产保险股份有限公司 代码质量扫描方法、装置、计算机设备及存储介质
CN110716866B (zh) * 2019-09-06 2024-06-28 中国平安财产保险股份有限公司 代码质量扫描方法、装置、计算机设备及存储介质
CN110865806A (zh) * 2019-11-20 2020-03-06 腾讯科技（深圳）有限公司 代码处理方法、装置、服务器及存储介质
CN110865806B (zh) * 2019-11-20 2023-08-18 腾讯科技（深圳）有限公司 代码处理方法、装置、服务器及存储介质
CN111061488A (zh) * 2019-12-18 2020-04-24 深圳前海环融联易信息科技服务有限公司 检测前端代码质量的方法、装置、计算机设备及存储介质
CN111930632A (zh) * 2020-08-19 2020-11-13 山东健康医疗大数据有限公司 一种前端代码检测质量的方法
CN112256583A (zh) * 2020-10-28 2021-01-22 冠群信息技术(南京)有限公司 一种前端代码质量检测方法
CN112965695A (zh) * 2021-03-12 2021-06-15 中国平安财产保险股份有限公司 前端代码接入检测方法、装置、设备及存储介质
CN113031940A (zh) * 2021-04-29 2021-06-25 武汉夜莺科技有限公司 前端框架开发方法、装置及终端设备
CN113468062A (zh) * 2021-07-16 2021-10-01 中国银行股份有限公司 一种基于ESLint配置的代码质量检测***及方法
CN113535183A (zh) * 2021-07-28 2021-10-22 北京达佳互联信息技术有限公司 代码处理方法、装置、电子设备及存储介质
CN113535183B (zh) * 2021-07-28 2024-05-28 北京达佳互联信息技术有限公司 代码处理方法、装置、电子设备及存储介质
CN113835740A (zh) * 2021-11-29 2021-12-24 山东捷瑞数字科技股份有限公司 一种面向搜索引擎优化的前端代码自动修复方法
CN114217828A (zh) * 2021-12-22 2022-03-22 四川启睿克科技有限公司 前端通用代码规范库配置方法及***、装置、存储介质

Similar Documents

Publication Publication Date Title
CN109032949A (zh) 一种前端代码质量检测方法及装置
CN109739766B (zh) 一种快速搭建fpga数字仿真模型的***及方法
CN110764753B (zh) 一种业务逻辑代码生成方法、装置、设备及存储介质
CN108345532A (zh) 一种自动化测试用例生成方法和装置
US20120116561A1 (en) Program testing apparatus, method of testing a program, and program testing program
CN108446223B (zh) 一种基于动态编译的业务场景自动化测试方法
CN103164237B (zh) 固件升级方法及***
JPH08190587A (ja) 業務プロセスのシミュレーションシステム
US11074162B2 (en) System and a method for automated script generation for application testing
CN104978307A (zh) 一种清单处理方法及装置
CN102567201A (zh) 跨模型的图形用户界面测试脚本自动修复方法
CN106484613A (zh) 一种基于fitnese的接口自动化测试框架
CN102411538B (zh) 基于事件可达性模型的图形用户界面测试脚本修复方法
US10157057B2 (en) Method and apparatus of segment flow trace analysis
CN103109289B (zh) 基于web的脚本语言编辑方法、***和web客户端
CN109522005A (zh) 跨平台图形化程序设计方法
CN111782117A (zh) 界面的展示方法和装置、存储介质、电子装置
CN109086985B (zh) 面向航天器总装的专业测试信息管理***
CN107480050A (zh) 一种自动测试更新包的测试方法
CN106383734A (zh) 一种从代码中提取详细设计的方法
CN103885754A (zh) 一种数据模型自动生成***及方法
EP1310882A2 (en) Method and Apparatus for Testing Embedded Examples in Documentation
CN102663205B (zh) 一种车辆装配车间工装现场管理的软件实现方法及其***
JP2003202920A (ja) 保守管理システム、方法及びプログラム
CN106843863A (zh) 一种空调控制参数可视化代码修改方法及代码修改器

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20181218

RJ01 Rejection of invention patent application after publication