前端开发代码检测方法、装置及存储介质与流程

1.本发明涉及软件开发技术领域，尤其涉及一种前端开发代码检测方法、装置及存储介质。


背景技术：

2.前端开发就是创建web页面或app等前端界面呈现给用户的过程，其通过各种技术来实现互联网产品与用户界面交互。随着技术的发展，前端开发已不仅仅是单纯的页面开发，还会涉及到性能优化、资源加载、模块化开发等各方面的问题。前端开发的难度也在逐渐上升。
3.在前端开发中，vue是一套用于构建用户界面的渐进式框架，易于上手，且便于与既有项目进行整合。然而vue是一个动态的弱类型语言框架，在开发中容易出错。因为没有编译程序，现有技术在检测vue代码中可能出现的问题时，只能通过在前后端配合的实际执行过程中去调试，这种代码检测的方式，检测效率就比较低。


技术实现要素：

4.本发明实施例提供前端开发代码检测方法、装置及存储介质，能够在前端开发代码的编码过程中，就可以对代码中可能存在的代码质量问题和代码风格问题进行检测，并且在检测到问题时，对代码执行自动修复。
5.第一方面，本技术提供一种前端开发代码检测方法，所述方法包括：
6.在前端开发环境中安装代码规范检测工具；
7.响应于用户输入的第一指令，基于所述代码规范检测工具对所述前端开发环境中已输入的前端开发代码进行代码质量问题的检测；
8.在所述前端开发环境中安装代码格式化工具；
9.响应于用户输入的第二指令，基于所述代码格式化工具对所述前端开发环境中已输入的前端开发代码进行代码风格问题的检测；
10.在所述前端开发环境中安装代码编辑器插件；
11.响应于用户输入的第三指令，基于所述代码编辑器插件对所述代码质量问题和所述代码风格问题进行修复，并输出修复后的前端开发代码。
12.结合第一方面，在一种可行的实现方式中，所述前端开发环境包括服务端和用户端；所述服务端安装有node.js运行环境以及npm包管理器。
13.结合第一方面，在一种可行的实现方式中，所述在前端开发环境中安装代码规范检测工具的步骤，包括：
14.在所述用户端本地安装eslint工具，或者将eslint工具安装在npm包管理器。
15.结合第一方面，在一种可行的实现方式中，所述基于所述代码规范检测工具对所述前端开发环境中已输入的前端开发代码进行代码质量问题的检测的步骤，包括：
16.为eslint工具配置代码质量规范文件，并基于所述代码质量规范文件对vue代码
进行代码质量问题的检测。
17.结合第一方面，在一种可行的实现方式中，所述在所述前端开发环境中安装代码格式化工具的步骤，具体为：在所述前端开发环境中安装prettier工具。
18.结合第一方面，在一种可行的实现方式中，所述基于所述代码格式化工具对所述前端开发环境中已输入的前端开发代码进行代码风格问题的检测的步骤，包括：
19.为prettier工具配置代码风格规范文件，并基于所述代码风格规范文件对vue代码进行代码风格问题的检测。
20.结合第一方面，在一种可行的实现方式中，所述方法还包括：配置所述eslint工具关闭与所述prettier工具的代码风格规划中相冲突的检测规则。
21.结合第一方面，在一种可行的实现方式中，所述在所述前端开发环境中安装代码编辑器插件的步骤，具体为：在所述前端开发环境中安装vscode插件；
22.所述方法还包括：
23.当检测到用户向所述服务端提交前端开发代码的提交指令后，调用所述代码规范检测工具对所述前端开发代码进行代码质量问题的检测，以及调用所述代码格式化工具对所述前端开发代码进行代码风格问题的检测，在检测到所述前端开发代码存在代码质量问题和/或代码风格问题时，进行报错和/或对所述前端开发代码进行修复，并对所述提交指令不作响应。
24.第二方面，本技术提供一种前端开发代码检测装置，所述装置包括：
25.代码规范检测工具存储单元，用于存储用户在前端开发环境中安装的代码规范检测工具；
26.第一响应单元，用于响应于用户输入的第一指令，基于所述代码规范检测工具对所述前端开发环境中已输入的前端开发代码进行代码质量问题的检测；
27.代码格式化工具存储单元，用于存储用户在所述前端开发环境中安装的代码格式化工具；
28.第二响应单元，用于响应于用户输入的第二指令，基于所述代码格式化工具对所述前端开发环境中已输入的前端开发代码进行代码风格问题的检测；
29.代码编辑器插件存储单元，用于存储用户在所述前端开发环境中安装的代码编辑器插件；
30.第三响应单元，用于响应于用户输入的第三指令，基于所述代码编辑器插件对所述代码质量问题和所述代码风格问题进行修复，并输出修复后的前端开发代码。
31.第三方面，本技术提供一种计算机可读存储介质，所述存储介质包括存储的程序，在所述程序运行时控制所述存储介质所在设备执行上述第一方面所述的前端开发代码检测方法。
32.本技术提供的前端开发代码检测方法、装置及存储介质，在前端开发环境中安装代码规范检测工具，代码规范检测工具可以对用户输入的第一指令进行响应，对前端开发代码进行代码质量问题的检测，并且在前端开发环境中安装代码格式化工具，代码格式化工具可以对用户输入的第二指令进行响应，对前端开发代码进行代码风格问题的检测，以及在前端开发环境中安装代码编辑器插件，可以对用户输入的第三指令进行响应，对代码质量问题和代码风格问题进行修复，进而输出修复后的代码，因此，本技术技术方案，相比
于现有技术，无需通过前后端实际调试的方式去对代码进行测试，可以在编码时就可以进行检测，提高了代码检测效率。
附图说明
33.为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
34.图1是本技术实施例提供的一种前端开发代码检测方法的流程示意图；
35.图2是本技术实施例提供的一种前端开发代码检测装置的功能框图；
36.图3是本技术实施例提供的一种计算机设备的功能框图。
具体实施方式
37.为了更好的理解本发明的技术方案，下面结合附图对本发明实施例进行详细描述。
38.应当明确，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
39.在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其它含义。
40.应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。
41.应当理解，尽管在本发明实施例中可能采用术语第一、第二、第三等来描述终端，但这些终端不应限于这些术语。这些术语仅用来将终端彼此区分开。例如，在不脱离本发明实施例范围的情况下，第一终端也可以被称为第二终端，类似地，第二终端也可以被称为第一终端。
42.取决于语境，如在此所使用的词语“如果”可以被解释成为“在
……
时”或“当
……
时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。
43.参见图1，在本技术的一个实施例中提供了前端开发代码检测方法。本前端开发代码检测方法可以应用于终端，所述终端可以是台式机、个人电脑等计算机设备，所述终端还可以是平板电脑等移动终端。通常，用户可以基于台式机或个人电脑进行前端开发，输入前端开发代码，所述前端开发代码可以是vue代码。本方法还可以应用于服务器端，服务器接收用户上传的当前已编辑代码，并基于本方法进行代码检测。所述服务器，可以是单台服务器，也可以是多台服务器的组合，例如云服务器等等。
44.本技术实施例中的前端开发代码检测方法，包括：
45.s11，在前端开发环境中安装代码规范检测工具。
46.s12，响应于用户输入的第一指令，基于代码规范检测工具对前端开发代码进行代码质量问题的检测。
47.s13，在前端开发环境中安装代码格式化工具。
48.s14，响应于用户输入的第二指令，基于代码格式化工具对前端开发代码进行代码风格问题的检测。
49.s15，在前端开发环境中安装代码编辑器插件。
50.s16，响应于用户输入的第三指令，基于代码编辑器插件对代码质量问题和代码风格问题进行修复，并输出修复后的前端开发代码。
51.上述本技术实施例提供的前端开发代码检测方法，在前端开发环境中安装代码规范检测工具，代码规范检测工具可以对用户输入的第一指令进行响应，对前端开发代码进行代码质量问题的检测，并且在前端开发环境中安装代码格式化工具，代码格式化工具可以对用户输入的第二指令进行响应，对前端开发代码进行代码风格问题的检测，以及在前端开发环境中安装代码编辑器插件，可以对用户输入的第三指令进行响应，对代码质量问题和代码风格问题进行修复，进而输出修复后的代码，因此，本技术技术方案，相比于现有技术，无需通过前后端实际调试的方式去对代码进行测试，可以在编码时就可以进行检测，提高了代码检测效率。
52.下面在本技术的一个更为具体的实施例中，对上述步骤s11～s16作详细说明。
53.s11，在前端开发环境中安装代码规范检测工具。
54.具体的，前端开发最初是从网页内容制作的静态开发开始演变的，随着互联网技术、html(hyper text markup language，超文本标记语言)技术、css(cascading style sheets，层叠样式表)技术的发展，目前的前端开发的结构和框架也更为复杂。
55.在本技术实施例中，所述的前端开发环境中，包括有用户端和服务端。用户(例如可以是程序员)可以在用户端进行前端代码的输入和编辑，前端代码可以但不限于包括vue代码。用户编辑完成的前端代码可以提交到服务端进行保存。
56.在本技术实施例中，在前端开发环境中，可以基于vite vue2/vue3构建vue代码。vue是一套前端开发框架，它可以降低前端开发的成本。然而vue本身并不支持对代码进行高亮，也不能对代码进行检测和报错。vite是一种面向现代浏览器的更轻更快的基于es module的web应用开发工具。将vite与vue2/vue3相结合，可以在代码执行的时候进行检测和报错。在vue代码编写和编译的过程中，仍然无法进行检测和报错。本技术实施例的目的，在于能够在vue代码的编写和编译过程中实现代码检测。
57.具体的，在服务端安装有node.js以及npm包管理器。node.js是运行在服务端的事件驱动i/o的javascript环境，具有运行速度快，性能优越的特点。npm(node package manager)包管理器，作为一个代码仓库服务器，可以保存各种代码工具，以供用户之间进行共享。
58.在本实施例中，可以在前端开发环境中安装已有的任意一种代码规范检测工具，或者根据自定义的前端代码规范自行开发检测工具，并将新开发的代码规范检测工具安装到前端开发环境中。在本实施例中，所要安装的代码规范检测工具可以但不限于是eslint工具，在安装eslint工具时，可以在用户端本地安装eslint工具，或者将eslint工具安装在
npm包管理器。
59.具体的，在安装eslint前，需要node.js的版本高于6.14，npm版本至少为version 3 。
60.利用npm安装eslint，可以通过如下命令行代码实现：
61.$npm install eslint
‑‑
save-dev
62.在本技术实施例中，可以在本地任何文件或目录下安装和运行eslint，也可以在全局安装eslint，其实现的命令行代码为：
63.npm install eslint
‑‑
global
64.s12，响应于用户输入的第一指令，基于代码规范检测工具对前端开发代码进行代码质量问题的检测。
65.具体的，在检测到用户输入第一指令后，安装完成的代码规范检测工具就可以基于默认的或预设的代码规范对代码进行检测。第一指令可以是命令行命令，或用户触发所述代码规范检测工具安装完成后而生成的按钮或控件。
66.在本技术实施例中，代码规范检测工具是eslint工具。eslint主要可以对代码的代码质量问题以及部分代码风格问题进行检测，在检测到代码规范中定义的问题时，就可以进行报错、提醒等多种级别的提示。所述的质量问题，是指可以导致代码出现逻辑错误、运行bug等现象的问题，而所述的代码风格问题，不会导致代码运行出现bug等现象，而是单纯指代码编辑时的编写习惯风格的问题。eslint主要用于对代码质量问题进行检测，而仅对一小部分的代码风格进行了规则的定义。
67.因此，在本技术实施例中，可以预先为eslint工具配置代码质量规范文件，从而可以更为精细化地控制eslint进行代码质量检测时的规则。
68.具体的，在运行eslint
–
init命令后，可以在eslint安装文件夹目录中出现.eslintrc配置文件。
69..eslintrc配置文件中看到出现如下类似的规则：
[0070][0071]
其中，"semi"和"quotes"是eslint中规则的名称。规则名称后的第一个值是错误级别，可以使下面的值之一：
[0072]
(1)"off"or 0
–
即关闭规则
[0073]
(2)"warn"or 1-将该规则视为一个警告
[0074]
(3)"error"or 2-将该规则视为一个错误
[0075]
由此可见，上述三个错误级别可以供用户细粒度的控制eslint工具。
[0076]
在本技术实施例中，用户不仅可以自行对各个规则进行重新定义，还可以使用工具推荐的规则，例如可以通过下述语句实现：
[0077]
"extends":"eslint:recommended"。
[0078]
此外，用户还可以为eslint工具配置符合airbnb规范的代码质量规范文件，以供eslint工具基于该代码质量规范文件对vue代码进行代码质量问题的检测。
[0079]
其中，为eslint工具配置符合airbnb规范的代码质量规范文件的实现语句为：
[0080]
"extends":"airbnb"，eslint-config
[0081]
由此，经过上述配置的eslint工具，在检测到用户输入第一指令后，就可以对vue代码的质量问题进行检测，在检测到质量问题后可以进行多种级别的提醒或报错。
[0082]
s13，在前端开发环境中安装代码格式化工具。
[0083]
具体的，本步骤是在前端开发环境中安装prettier工具。prettier工具主要对代码的格式规则进行了定义，并可以用于对代码的代码风格问题进行检测，在检测到代码风格问题，可以进行提示，也可以进行修改。
[0084]
s14，响应于用户输入的第二指令，基于代码格式化工具对前端开发代码进行代码风格问题的检测。
[0085]
具体的，在检测到用户输入第二指令后，安装完成的代码格式化工具就可以基于默认的或预设的代码规范对代码进行检测。第二指令可以是命令行命令，或其它形式的命令。第二指令可以是与第一指令相同的指令，即在触发第一(二)指令后，同时对代码的代码质量问题和代码风格问题进行检测，第一指令和第二指令也可以是独立的两个指令，具体就不再赘述。
[0086]
在本技术实施例中，为prettier工具配置代码风格规范文件，并基于所述代码风格规范文件对vue代码进行代码风格问题的检测。在代码风格规范文件中，可以对代码编写的风格规则进行定义，对于不符合代码编写的风格规则的代码就视作具有代码风格问题。
[0087]
在本技术的一个实施例中，prettier工具主要用于对代码的代码风格问题进行检测，而eslint工具也可以对部分代码风格问题进行检测，这就有可能存在规则上的冲突。例如，prettier字符串默认是用双引号而eslint定义的是单引号。这时，需要配置所述eslint工具关闭与所述prettier工具的代码风格规划中相冲突的检测规则，或者配置eslint关闭代码风格问题的检测，而使eslint工具专注于代码质量问题的检测。
[0088]
具体可以配置eslint的.eslintrc配置文件，以避免eslint与prettier的冲突。其中，配置的代码及其部分注释，可以但不限于如下：
[0089]
[0090]
[0091]
[0092]
[0093]
[0094]
[0095]
[0096]
[0097][0098]
上述配置，具体如“"wrap-regex":0,//正则表达式字面量用小括号包起来”关闭了某些eslint的代码风格检测规则，使eslint主要用于代码质量问题的检测，而prettier用于代码风格问题的检测，避免了两种工具的冲突，并且可以全面地对vue代码进行检测。
[0099]
s15，在前端开发环境中安装代码编辑器插件。
[0100]
具体的，在本技术实施例中，可以在前端开发环境中安装vscode(visio studio code)插件。vscode插件支持语法高亮、代码自动补全、代码重构、查看定义功能，并且内置命令行工具和git版本控制系统。
[0101]
s16，响应于用户输入的第三指令，基于代码编辑器插件对代码质量问题和代码风格问题进行修复，并输出修复后的前端开发代码。
[0102]
本技术实施例中，对vscode进行配置，使得eslint、prettier协同工作，在检测到用户输入的第三指令后，对代码质量问题和代码风格问题进行检测，在检测到问题后进行修复，并输出修复后的代码。
[0103]
在本技术实施例中，第一至第三指令可以是各自独立的指令，例如输入命令行命令或者触发不同的按钮或控件，还可以是同一个指令，例如可以是用户输入的保存代码的指令，即在用户保存代码时，对代码的代码质量问题和代码风格问题进行检测，并执行自动修复。
[0104]
在本技术的一个实施例中，配置vscode的代码及注释可以但不限于是如下形式：
[0105]
[0106]
[0107][0108]
综上，本技术实施例中通过在前端开发环境中安装eslint代码规范检测工具，用于检测前端开发代码的代码质量问题，安装prettier代码格式化工具，用于对前端开发代码的代码风格问题进行检测，安装vscode，可以使得两种工具协同工作，在vue代码的编写和编译过程中对其进行检测。
[0109]
本技术实施例中，为了避免用户(程序员)直接将含有代码质量问题和/或代码风格问题的前端开发代码直接提交到服务端，还可以对前端开发环境做进一步的配置，在检测到用户输入将前端开发代码提交到服务端的提交指令后，自动调用所述代码规范检测工具对所述前端开发代码进行代码质量问题的检测，以及调用所述代码格式化工具对所述前端开发代码进行代码风格问题的检测，在检测到所述前端开发代码存在代码质量问题和/或代码风格问题时，进行报错和/或对所述前端开发代码进行修复，并对所述提交指令不作响应。直至在检测到用户输入提交指令，自动调用代码规范检测工具和代码格式化工具检测不到任何代码问题后，才执行将代码提交到服务端的操作。
[0110]
上述配置，可以但不限于通过编写脚本、输入命令行命令，以及安装各种插件并对插件进行设定的方式来实现，在此就不再过多赘述。
[0111]
在本技术第二方面，还提供一种前端开发代码检测装置，如图2所示意。
[0112]
在本技术实施例中，所提供的一种前端开发代码检测装置200，包括：
[0113]
代码规范检测工具存储单元21，用于存储用户在前端开发环境中安装的代码规范检测工具；
[0114]
第一响应单元22，用于响应于用户输入的第一指令，基于所述代码规范检测工具对所述前端开发代码进行代码质量问题的检测；
[0115]
代码格式化工具存储单元23，用于存储用户在所述前端开发环境中安装的代码格式化工具；
[0116]
第二响应单元24，用于响应于用户输入的第二指令，基于所述代码格式化工具对
所述前端开发代码进行代码风格问题的检测；
[0117]
代码编辑器插件存储单元25，用于存储用户在所述前端开发环境中安装的代码编辑器插件；
[0118]
第三响应单元26，用于响应于用户输入的第三指令，基于所述代码编辑器插件对所述代码质量问题和所述代码风格问题进行修复，并输出修复后的前端开发代码。
[0119]
本技术实施例中的前端开发代码检测装置200，可以实现前述实施例中所提供的前端开发代码检测方法，具体原理就不再赘述，可以参阅前述前端开发代码检测方法的实施例的描述。
[0120]
第三方面，本技术实施例提供了一种计算机可读存储介质，存储介质包括存储的程序，其中，在程序运行时控制存储介质所在设备执行上述的前端开发代码检测方法。
[0121]
第四方面，本技术实施例提供一种计算机设备，图3是本技术实施例提供的一种计算机设备的示意图。如图3所示，该实施例的计算机设备300包括：处理器301、存储器302以及存储在存储器中并可在处理器301上运行的计算机程序303，处理器301执行计算机程序303时实现实施例中的前端开发代码检测方法，为避免重复，此处不一一赘述。
[0122]
计算机设备300可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。计算机设备可包括，但不仅限于，处理器301、存储器302。本领域技术人员可以理解，图3仅仅是计算机设备300的示例，并不构成对计算机设备300的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如计算机设备还可以包括输入输出设备、网络接入设备、总线等。
[0123]
所称处理器301可以是中央处理单元(central processing unit，cpu)，还可以是其他通用处理器、数字信号处理器(digital signal processor，dsp)、专用集成电路(application specific integrated circuit，asic)、现场可编程门阵列(field-programmable gate array，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
[0124]
存储器302可以是计算机设备300的内部存储单元，例如计算机设备300的硬盘或内存。存储器302也可以是计算机设备300的外部存储设备，例如计算机设备300上配备的插接式硬盘，智能存储卡(smart media card,smc)，安全数字(secure digital,sd)卡，闪存卡(flash card)等。进一步地，存储器302还可以既包括计算机设备300的内部存储单元也包括外部存储设备。存储器302用于存储计算机程序以及计算机设备所需的其他程序和数据。存储器502还可以用于暂时地存储已经输出或者将要输出的数据。
[0125]
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
[0126]
在本发明所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，上述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
[0127]
上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机装置(可以是个人计算机，服务器，或者网络装置等)或处理器(processor)执行本发明各个实施例上述方法的部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(read-only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。
[0128]
以上上述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。