CN114385489A - Front-end development code detection method, device and storage medium - Google Patents
Front-end development code detection method, device and storage medium Download PDFInfo
- Publication number
- CN114385489A CN114385489A CN202111620644.7A CN202111620644A CN114385489A CN 114385489 A CN114385489 A CN 114385489A CN 202111620644 A CN202111620644 A CN 202111620644A CN 114385489 A CN114385489 A CN 114385489A
- Authority
- CN
- China
- Prior art keywords
- code
- end development
- tool
- user
- style
- 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
- 238000011161 development Methods 0.000 title claims abstract description 151
- 238000001514 detection method Methods 0.000 title claims abstract description 81
- 238000003860 storage Methods 0.000 title claims abstract description 32
- 238000000034 method Methods 0.000 claims abstract description 34
- 230000004044 response Effects 0.000 claims abstract description 24
- 230000008569 process Effects 0.000 description 7
- 238000005516 engineering process Methods 0.000 description 5
- 230000008439 repair process Effects 0.000 description 5
- 238000004590 computer program Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 238000009434 installation Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000000630 rising effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
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/3616—Software analysis for verifying properties of programs using software metrics
-
- 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/362—Software debugging
- G06F11/3624—Software debugging by performing operations on the source code, e.g. via a compiler
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Stored Programmes (AREA)
Abstract
The application relates to a method, a device and a storage medium for detecting front-end development codes, wherein the method comprises the following steps: installing a code specification detection tool in a front-end development environment; detecting a code quality problem of the input front-end development code in the front-end development environment based on the code specification detection tool in response to a first instruction input by a user; installing a code formatting tool in the front-end development environment; detecting a code style problem of the input front-end development code in the front-end development environment based on the code formatting tool in response to a second instruction input by a user; installing a code editor plug-in the front-end development environment; and responding to a third instruction input by the user, repairing the code quality problem and the code style problem based on the code editor plug-in, and outputting the repaired front-end development code. The code detection method and the device can improve the code detection efficiency.
Description
Technical Field
The invention relates to the technical field of software development, in particular to a method and a device for detecting a front-end development code and a storage medium.
Background
Front-end development is a process of creating a front-end interface such as a WEB page or an APP and presenting the front-end interface to a user, and the interaction between an internet product and a user interface is realized through various technologies. With the development of the technology, the front-end development not only is simple page development, but also relates to the problems of performance optimization, resource loading, modular development and the like. The difficulty of front-end development is also gradually rising.
In the front-end development, Vue is a progressive framework for building user interfaces that is easy to get and easy to integrate with existing projects. Vue is a dynamic, weakly typed language framework that is prone to errors in development. Because there is no compiler, when detecting Vue a problem, the prior art can only debug the code in the actual execution process of front-end and back-end cooperation, and this code detection mode has low detection efficiency.
Disclosure of Invention
The embodiment of the invention provides a method, a device and a storage medium for detecting a front-end development code, which can detect the code quality problem and the code style problem possibly existing in the code in the coding process of the front-end development code and automatically repair the code when the problem is detected.
In a first aspect, the present application provides a method for detecting front-end development code, the method including:
installing a code specification detection tool in a front-end development environment;
detecting a code quality problem of the input front-end development code in the front-end development environment based on the code specification detection tool in response to a first instruction input by a user;
installing a code formatting tool in the front-end development environment;
detecting a code style problem of the input front-end development code in the front-end development environment based on the code formatting tool in response to a second instruction input by a user;
installing a code editor plug-in the front-end development environment;
and responding to a third instruction input by the user, repairing the code quality problem and the code style problem based on the code editor plug-in, and outputting the repaired front-end development code.
With reference to the first aspect, in a possible implementation manner, the front-end development environment includes a server and a client; the server is provided with node. js operating environment and npm packet manager.
With reference to the first aspect, in one possible implementation manner, the step of installing a code specification detection tool in a front-end development environment includes:
and installing an ESlint tool locally at the user side or installing the ESlint tool at npm packet manager.
With reference to the first aspect, in a possible implementation manner, the step of performing, by the code specification detection tool, detection of a code quality problem on the input front-end development code in the front-end development environment includes:
and configuring a code quality specification file for an ESlint tool, and detecting Vue code quality problems based on the code quality specification file.
With reference to the first aspect, in a possible implementation manner, the step of installing a code formatting tool in the front-end development environment specifically includes: installing a Prettier tool in the front-end development environment.
With reference to the first aspect, in a possible implementation manner, the step of performing, based on the code formatting tool, detection of a code style problem on the input front-end development code in the front-end development environment includes:
and configuring a code style specification file for the Prettier tool, and detecting Vue code style problems based on the code style specification file.
With reference to the first aspect, in one possible implementation manner, the method further includes: and configuring the ESlint tool to close the detection rule which conflicts with the code style planning of the Prettier tool.
With reference to the first aspect, in a feasible implementation manner, the step of installing a code editor plug-in the front-end development environment specifically includes: installing a VScode plugin in the front-end development environment;
the method further comprises the following steps:
when a submitting instruction of a front-end development code submitted to the server by a user is detected, calling the code specification detection tool to detect the code quality problem of the front-end development code, calling the code formatting tool to detect the code style problem of the front-end development code, reporting an error and/or repairing the front-end development code when the code quality problem and/or the code style problem of the front-end development code are detected, and not responding to the submitting instruction.
In a second aspect, the present application provides a front-end development code detection apparatus, the apparatus comprising:
the code specification detection tool storage unit is used for storing a code specification detection tool installed in a front-end development environment by a user;
a first response unit, configured to, in response to a first instruction input by a user, perform detection of a code quality problem on front-end development code that has been input in the front-end development environment based on the code specification detection tool;
the code formatting tool storage unit is used for storing a code formatting tool installed in the front-end development environment by a user;
the second response unit is used for responding to a second instruction input by the user and detecting a code style problem of the input front-end development code in the front-end development environment based on the code formatting tool;
a code editor plug-in storage unit, which is used for storing the code editor plug-in installed in the front-end development environment by a user;
and the third response unit is used for responding to a third instruction input by the user, repairing the code quality problem and the code style problem based on the code editor plug-in, and outputting the repaired front-end development code.
In a third aspect, the present application provides a computer-readable storage medium, where the storage medium includes a stored program, and when the program runs, the apparatus on which the storage medium is located is controlled to execute the method for detecting front-end development code according to the first aspect.
The method, the device and the storage medium for detecting the front-end development code, provided by the application, are characterized in that a code specification detection tool is installed in a front-end development environment, the code specification detection tool can respond to a first instruction input by a user and detect the code quality problem of the front-end development code, a code formatting tool is installed in the front-end development environment, the code formatting tool can respond to a second instruction input by the user and detect the code style problem of the front-end development code, a code editor plug-in is installed in the front-end development environment and can respond to a third instruction input by the user and repair the code quality problem and the code style problem so as to output the repaired code, therefore, compared with the prior art, the technical scheme does not need to test the code in a front-end and back-end actual debugging mode, the detection can be carried out during coding, and the code detection efficiency is improved.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings needed to be used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without inventive labor.
Fig. 1 is a schematic flowchart of a front-end development code detection method provided in an embodiment of the present application;
fig. 2 is a functional block diagram of a front-end development code detection apparatus according to an embodiment of the present application;
fig. 3 is a functional block diagram of a computer device according to an embodiment of the present disclosure.
Detailed Description
For better understanding of the technical solutions of the present invention, the following detailed descriptions of the embodiments of the present invention are provided with reference to the accompanying drawings.
It should be understood that the described embodiments are only some embodiments of the invention, and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The terminology used in the embodiments of the invention is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. As used in the examples of the present invention and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise.
It should be understood that the term "and/or" as used herein is merely one type of association that describes an associated object, meaning that three relationships may exist, e.g., a and/or B may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" herein generally indicates that the former and latter related objects are in an "or" relationship.
It should be understood that although the terms first, second, third, etc. may be used to describe the terminals in the embodiments of the present invention, the terminals should not be limited by these terms. These terms are only used to distinguish one terminal from another. For example, a first terminal may also be referred to as a second terminal, and similarly, a second terminal may also be referred to as a first terminal, without departing from the scope of embodiments of the present invention.
The word "if" as used herein may be interpreted as "at … …" or "when … …" or "in response to a determination" or "in response to a detection", depending on the context. Similarly, the phrases "if determined" or "if detected (a stated condition or event)" may be interpreted as "when determined" or "in response to a determination" or "when detected (a stated condition or event)" or "in response to a detection (a stated condition or event)", depending on the context.
Referring to FIG. 1, in one embodiment of the present application, a front-end development code detection method is provided. The front-end development code detection method can be applied to terminals, wherein the terminals can be computer equipment such as a desktop computer and a personal computer, and the terminals can also be mobile terminals such as a tablet personal computer. Typically, a user may perform front-end development on a desktop or personal computer basis, entering front-end development code, which may be Vue code. The method can also be applied to a server side, the server receives the current edited codes uploaded by the user, and the code detection is carried out based on the method. The server may be a single server, or may be a combination of multiple servers, such as a cloud server.
The method for detecting the front-end development code in the embodiment of the application comprises the following steps:
and S11, installing a code specification detection tool in the front-end development environment.
And S12, responding to the first instruction input by the user, and detecting the code quality problem of the front-end development code based on the code specification detection tool.
S13, installing the code formatting tool in the front-end development environment.
And S14, responding to a second instruction input by the user, and detecting a code style problem of the front-end development code based on the code formatting tool.
S15, installing the code editor plug-in the front-end development environment.
And S16, responding to a third instruction input by the user, repairing the code quality problem and the code style problem based on the code editor plug-in, and outputting the repaired front-end development code.
In the method for detecting front-end development codes provided by the embodiment of the application, the code specification detection tool is installed in the front-end development environment, the code specification detection tool can respond to the first instruction input by the user and detect the code quality problem of the front-end development codes, the code formatting tool is installed in the front-end development environment, the code formatting tool can respond to the second instruction input by the user and detect the code style problem of the front-end development codes, the code editor plug-in is installed in the front-end development environment and can respond to the third instruction input by the user and repair the code quality problem and the code style problem so as to output the repaired codes, so that compared with the prior art, the technical scheme of the application does not need to test the codes in a front-end and back-end actual debugging mode, the detection can be carried out during coding, and the code detection efficiency is improved.
In a more specific embodiment of the present application, the above steps S11 to S16 will be described in detail.
And S11, installing a code specification detection tool in the front-end development environment.
Specifically, the front-end development is originally evolved from static development of web content production, and with the development of internet technology, HTML (Hyper Text Markup Language) technology, and CSS (Cascading Style Sheets) technology, the structure and framework of the current front-end development are more complicated.
In the embodiment of the present application, the front-end development environment includes a user side and a server side. The user (which may be a programmer, for example) may enter and edit front-end code, which may include, but is not limited to Vue code, at the user end. The front-end code edited by the user can be submitted to the server for storage.
In the present embodiment, in a front-end development environment, Vue code may be built based on Vite + Vue2/Vue 3. Vue is a set of front-end development framework that can reduce the cost of front-end development. Vue, by itself, does not support highlighting the code nor does it detect and report errors. The Vite is a lighter and faster ES module-based web application development tool for modern browsers. The combination of Vite and Vue2/Vue3 allows for detection and error reporting at the time of code execution. During the writing and compiling of Vue code, it is still impossible to detect and report errors. The purpose of the embodiment of the application is to realize code detection in the writing and compiling process of Vue codes.
Specifically, node.js and npm packet managers are installed on the server side. Js is a JavaScript environment of event-driven I/O running at a server, and has the characteristics of high running speed and excellent performance. The npm (node Package manager) Package manager, as a code repository server, can store various code tools for sharing among users.
In this embodiment, any existing code specification detection tool may be installed in the front-end development environment, or a detection tool may be developed by itself according to a customized front-end code specification, and a newly developed code specification detection tool may be installed in the front-end development environment. In this embodiment, the code specification detection tool to be installed may be, but is not limited to, an eslin tool, and when the eslin tool is installed, the eslin tool may be installed locally at a user end, or the eslin tool may be installed in npm package manager.
Specifically, before eslin is installed, node. js version is required to be higher than 6.14, and npm version is at least version 3 +.
Installation of ESlint using npm may be implemented by the following command line code:
$npm install eslint--save-dev
in the embodiment of the present application, the eslin may be installed and run under any local file or directory, or may be installed globally, and the command line code implemented by the eslin is:
npm install eslint--global
and S12, responding to the first instruction input by the user, and detecting the code quality problem of the front-end development code based on the code specification detection tool.
Specifically, after detecting that the user inputs the first instruction, the installed code specification detection tool may detect the code based on a default or preset code specification. The first instruction may be a command line command or a button or control generated by the user triggering the code specification detection tool upon completion of installation.
In an embodiment of the present application, the code specification detection tool is an ESlin tool. The ESlint can mainly detect the code quality problem and part of the code style problem of the code, and can prompt various levels such as error reporting, reminding and the like when detecting the problem defined in the code specification. The quality problem refers to the problem that the phenomena of logic error, bug operation and the like can be caused to the code, and the code style problem refers to the problem that the phenomena of bug operation and the like can not be caused to the code operation, but only refers to the writing habit style during code editing. Eslin is mainly used to detect code quality problems, and only a small part of the code style is defined by rules.
Therefore, in the embodiment of the application, the code quality specification file can be configured for the ESlint tool in advance, so that the rule of ESlint in code quality detection can be controlled more finely.
In particular, the eslintrc configuration file may appear in the ESlint installation folder directory after the ESlint-init command is executed.
A similar rule is seen in the eslintrc profile that appears as follows:
where "semi" and "quotes" are the names of rules in eslin. The first value after the rule name is the error level, which may be one of the following values:
(1) "off" or 0-i.e., off rule
(2) "war" or 1-treat the rule as an alert
(3) "error" or 2-treat the rule as an error
Therefore, the three error levels can be used for the user to control the ESlint tool in a fine-grained manner.
In the embodiment of the present application, the user may not only redefine each rule by himself, but also use the rule recommended by the tool, for example, the following statements may be used to implement:
"extends":"eslint:recommended"。
in addition, the user can also configure a code quality specification file which is in accordance with airbnb specification for the ESlint tool, so that the ESlint tool can detect Vue code quality problems based on the code quality specification file.
The implementation statement for configuring the code quality specification file conforming to airbnb specification for the ESlint tool is as follows:
"extends":"airbnb"，eslint-config
therefore, through the ESlint tool configured above, after the first instruction input by the user is detected, the quality problem of Vue code can be detected, and after the quality problem is detected, various levels of reminding or error reporting can be performed.
S13, installing the code formatting tool in the front-end development environment.
Specifically, the step is to install a Prettier tool in the front-end development environment. The Prettier tool mainly defines the format rule of the code, can be used for detecting the code style problem of the code, and can prompt or modify the detected code style problem.
And S14, responding to a second instruction input by the user, and detecting a code style problem of the front-end development code based on the code formatting tool.
Specifically, after detecting that the user inputs the second instruction, the installed code formatting tool may detect the code based on a default or preset code specification. The second instruction may be a command line command, or other form of command. The second instruction may be the same instruction as the first instruction, that is, after the first (second) instruction is triggered, the code quality problem and the code style problem of the code are detected at the same time, and the first instruction and the second instruction may also be two independent instructions, which is not described in detail.
In the embodiment of the application, a code style specification file is configured for a Prettier tool, and Vue codes are detected based on the code style specification file. In the code style specification file, the style rule written by the code can be defined, and the code which does not conform to the style rule written by the code is regarded as having a code style problem.
In an embodiment of the present application, the Prettier tool is mainly used for detecting the code style problem of the code, and the eslin tool can also detect a part of the code style problem, which may have a conflict in the rule. For example, Prettier strings are defined by double quotation marks by default and ESLint is a single quotation mark. At this time, it is necessary to configure the eslin tool to close the detection rule that conflicts with the code style planning of the Prettier tool, or configure the detection of eslin tool to close the code style problem, so that the eslin tool focuses on the detection of the code quality problem.
The eslintrc profile for ESlint may be specifically configured to avoid collision of ESlint with Prettier. The configured code and its partial comments may be, but are not limited to, the following:
the configuration is specifically as "" wrap-regex ":0,// regular expression literal quantity is enclosed by small brackets". The code style detection rules of some ESlint are closed, so that the ESlint is mainly used for detecting the code quality problem, and Prettier is used for detecting the code style problem, thereby avoiding the conflict of two tools and comprehensively detecting Vue codes.
S15, installing the code editor plug-in the front-end development environment.
Specifically, in the embodiment of the present application, a vscode (visio Studio code) plug-in may be installed in a front-end development environment. The VSCode plug-in supports functions of grammar highlight, code automatic completion, code reconstruction and view definition, and is internally provided with a command line tool and a Git version control system.
And S16, responding to a third instruction input by the user, repairing the code quality problem and the code style problem based on the code editor plug-in, and outputting the repaired front-end development code.
In the embodiment of the application, the VSCode is configured, so that ESlint and Prettier work cooperatively, after a third instruction input by a user is detected, the code quality problem and the code style problem are detected, after the problem is detected, the problem is repaired, and the repaired code is output.
In the embodiment of the present application, the first to third instructions may be independent instructions, for example, a command line command is input or different buttons or controls are triggered, or may be the same instruction, for example, a code saving instruction input by a user, that is, when the user saves the code, a code quality problem and a code style problem of the code are detected, and automatic repair is performed.
In one embodiment of the present application, the code and comments to configure a VScode may be, but are not limited to being, in the form of:
in summary, in the embodiment of the present application, by installing an Escript code specification detection tool in a front-end development environment for detecting a code quality problem of a front-end development code, installing a Prettier code formatting tool for detecting a code style problem of the front-end development code, and installing a VScode, the two tools can work cooperatively to detect the code in the compiling and compiling processes of Vue codes.
In the embodiment of the application, in order to avoid that a user (programmer) directly submits front-end development codes containing code quality problems and/or code style problems to a server, the front-end development environment can be further configured, after a submission instruction for submitting the front-end development codes to the server is detected, a code specification detection tool is automatically called to detect the code quality problems of the front-end development codes, a code formatting tool is called to detect the code style problems of the front-end development codes, when the code quality problems and/or the code style problems of the front-end development codes are detected, errors are reported and/or the front-end development codes are repaired, and no response is made to the submission instruction. And the operation of submitting the code to the server is not executed until the code specification detection tool and the code formatting tool are automatically called to detect that no code problem is detected when a user inputs a submission instruction.
The configuration can be realized by, but not limited to, writing a script, inputting a command line command, and installing various plug-ins and setting the plug-ins, and will not be described in detail herein.
In a second aspect of the present application, there is also provided a front-end development code detection apparatus, as illustrated in fig. 2.
In an embodiment of the present application, a front-end development code detection apparatus 200 is provided, including:
a code specification detection tool storage unit 21 for storing a code specification detection tool installed by a user in a front-end development environment;
a first response unit 22, configured to, in response to a first instruction input by a user, perform detection of a code quality problem on the front-end development code based on the code specification detection tool;
a code formatting tool storage unit 23, configured to store a code formatting tool installed by a user in the front-end development environment;
a second response unit 24, configured to, in response to a second instruction input by the user, perform detection of a code style problem on the front-end development code based on the code formatting tool;
a code editor plug-in storage unit 25 for storing a code editor plug-in installed by a user in the front-end development environment;
and a third response unit 26, configured to, in response to a third instruction input by the user, repair the code quality problem and the code style problem based on the code editor plug-in, and output the repaired front-end development code.
The front-end development code detection apparatus 200 in the embodiment of the present application may implement the front-end development code detection method provided in the foregoing embodiment, and specific principles are not described in detail, and reference may be made to the description of the embodiment of the front-end development code detection method.
In a third aspect, an embodiment of the present application provides a computer-readable storage medium, where the storage medium includes a stored program, and when the program runs, a device in which the storage medium is located is controlled to execute the foregoing front-end development code detection method.
In a fourth aspect, an embodiment of the present application provides a computer device, and fig. 3 is a schematic diagram of a computer device provided in an embodiment of the present application. As shown in fig. 3, the computer device 300 of this embodiment includes: the processor 301, the memory 302, and the computer program 303 stored in the memory and capable of running on the processor 301, wherein the processor 301 implements the front-end development code detection method in the embodiment when executing the computer program 303, and therefore, for avoiding repetition, details are not repeated herein.
The computing device 300 may be a desktop computer, a notebook, a palm top computer, a cloud server, or other computing devices. The computer device may include, but is not limited to, a processor 301, a memory 302. Those skilled in the art will appreciate that fig. 3 is merely an example of a computer device 300 and is not intended to limit the computer device 300 and that it may include more or fewer components than shown, or some of the components may be combined, or different components, e.g., the computer device may also include input output devices, network access devices, buses, etc.
The Processor 301 may be a Central Processing Unit (CPU), other general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic device, discrete hardware component, or the like. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The storage 302 may be an internal storage unit of the computer device 300, such as a hard disk or a memory of the computer device 300. The memory 302 may also be an external storage device of the computer device 300, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), etc., provided on the computer device 300. Further, the memory 302 may also include both internal and external storage units of the computer device 300. The memory 302 is used for storing computer programs and other programs and data required by the computer device. The memory 502 may also be used to temporarily store data that has been output or is to be output.
It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
In the embodiments provided in the present invention, it should be understood that the disclosed system, apparatus and method may be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, the above-described division of units is merely one type of division of logical functions, and there may be other divisions when actually implemented, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical, mechanical or other form.
The integrated unit implemented in the form of a software functional unit may be stored in a computer readable storage medium. The software functional unit is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device) or a Processor (Processor) to execute some steps of the above methods according to various embodiments of the present invention. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.
The above description is only for the purpose of illustrating the preferred embodiments of the present invention and is not to be construed as limiting the invention, and any modifications, equivalents, improvements and the like made within the spirit and principle of the present invention should be included in the scope of the present invention.
Claims (10)
1. A method for front-end development code detection, the method comprising:
installing a code specification detection tool in a front-end development environment;
detecting a code quality problem of the front-end development code based on the code specification detection tool in response to a first instruction input by a user;
installing a code formatting tool in the front-end development environment;
detecting a code style problem of the front-end development code based on the code formatting tool in response to a second instruction input by a user;
installing a code editor plug-in the front-end development environment;
and responding to a third instruction input by the user, repairing the code quality problem and the code style problem based on the code editor plug-in, and outputting the repaired front-end development code.
2. The method of claim 1, wherein the front-end development environment comprises a server-side and a client-side; the server is provided with node. js operating environment and npm packet manager.
3. The method of claim 2, wherein the step of installing a code specification detection tool in a front-end development environment comprises:
and installing an ESlint tool locally at the user side or installing the ESlint tool at npm packet manager.
4. The method of claim 3, wherein the step of detecting the code quality problem for the front-end development code based on the code specification detection tool comprises:
and configuring a code quality specification file for an ESlint tool, and detecting Vue code quality problems based on the code quality specification file.
5. The method of claim 3, wherein the step of installing a code formatting tool in the front-end development environment comprises: installing a Prettier tool in the front-end development environment.
6. The method of claim 5, wherein the step of detecting a code style problem for the front-end development code based on the code formatting tool comprises:
and configuring a code style specification file for the Prettier tool, and detecting Vue code style problems based on the code style specification file.
7. The method of claim 6, further comprising: and configuring the ESlint tool to close the detection rule which conflicts with the code style planning of the Prettier tool.
8. The method according to claim 2, wherein the step of installing a code editor plug-in the front-end development environment is specifically: installing a VScode plugin in the front-end development environment;
the method further comprises the following steps:
when a submitting instruction of a front-end development code submitted to the server by a user is detected, calling the code specification detection tool to detect the code quality problem of the front-end development code, calling the code formatting tool to detect the code style problem of the front-end development code, reporting an error and/or repairing the front-end development code when the code quality problem and/or the code style problem of the front-end development code are detected, and not responding to the submitting instruction.
9. A front-end development code detection apparatus, the apparatus comprising:
the code specification detection tool storage unit is used for storing a code specification detection tool installed in a front-end development environment by a user;
the first response unit is used for responding to a first instruction input by a user and detecting the code quality problem of the front-end development code based on the code specification detection tool;
the code formatting tool storage unit is used for storing a code formatting tool installed in the front-end development environment by a user;
the second response unit is used for responding to a second instruction input by the user and detecting a code style problem of the front-end development code based on the code formatting tool;
a code editor plug-in storage unit, which is used for storing the code editor plug-in installed in the front-end development environment by a user;
and the third response unit is used for responding to a third instruction input by the user, repairing the code quality problem and the code style problem based on the code editor plug-in, and outputting the repaired front-end development code.
10. A computer-readable storage medium, wherein the storage medium includes a stored program, and when the program runs, the apparatus on which the storage medium is located is controlled to execute the front-end development code detection method according to any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111620644.7A CN114385489A (en) | 2021-12-28 | 2021-12-28 | Front-end development code detection method, device and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111620644.7A CN114385489A (en) | 2021-12-28 | 2021-12-28 | Front-end development code detection method, device and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114385489A true CN114385489A (en) | 2022-04-22 |
Family
ID=81197426
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111620644.7A Pending CN114385489A (en) | 2021-12-28 | 2021-12-28 | Front-end development code detection method, device and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114385489A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140109055A1 (en) * | 2012-10-12 | 2014-04-17 | Vmware,Inc. | Software test automation |
| CN109284225A (en) * | 2018-08-22 | 2019-01-29 | 深圳点猫科技有限公司 | A kind of quality determining method and electronic equipment of multi-person synergy exploitation programming code |
| CN112286532A (en) * | 2020-10-31 | 2021-01-29 | 中环曼普科技(南京)有限公司 | Method and system for realizing front-end code formatting based on ESLint and Prettier |
| CN112559354A (en) * | 2020-12-18 | 2021-03-26 | 中国平安财产保险股份有限公司 | Front-end code specification detection method and device, computer equipment and storage medium |
-
2021
- 2021-12-28 CN CN202111620644.7A patent/CN114385489A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140109055A1 (en) * | 2012-10-12 | 2014-04-17 | Vmware,Inc. | Software test automation |
| CN109284225A (en) * | 2018-08-22 | 2019-01-29 | 深圳点猫科技有限公司 | A kind of quality determining method and electronic equipment of multi-person synergy exploitation programming code |
| CN112286532A (en) * | 2020-10-31 | 2021-01-29 | 中环曼普科技(南京)有限公司 | Method and system for realizing front-end code formatting based on ESLint and Prettier |
| CN112559354A (en) * | 2020-12-18 | 2021-03-26 | 中国平安财产保险股份有限公司 | Front-end code specification detection method and device, computer equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP4148527B2 (en) | Functional test script generator | |
| US8245186B2 (en) | Techniques for offering and applying code modifications | |
| US8875103B2 (en) | Method of testing multiple language versions of a software system using one test script | |
| US9128723B2 (en) | Method and apparatus for dynamic document object model (DOM) aware code editing | |
| US9311077B2 (en) | Identification of code changes using language syntax and changeset data | |
| CN108255837B (en) | SQL parser and method | |
| WO2020010725A1 (en) | Method and apparatus for automatically synchronously refreshing browser, and computer device | |
| WO2021169227A1 (en) | Code processing method, apparatus and device, and medium | |
| CN114138244A (en) | Method and device for automatically generating model files, storage medium and electronic equipment | |
| CN109189388A (en) | Page configuration method, server and computer-readable medium | |
| US9715372B2 (en) | Executable guidance experiences based on implicitly generated guidance models | |
| CN112231197A (en) | Page testing method and device and storage medium | |
| US20100088689A1 (en) | Branding binary modules using resource patching | |
| CN111078217A (en) | Brain graph generation method, apparatus and computer-readable storage medium | |
| US20230195825A1 (en) | Browser extension with automation testing support | |
| CN114385489A (en) | Front-end development code detection method, device and storage medium | |
| JP2008165342A (en) | Source code creating method, device and program | |
| US20040205560A1 (en) | Method and apparatus for testing embedded examples in documentation | |
| US9152388B2 (en) | Tailored language sets for business level scripting | |
| CN112783736B (en) | Method and device for monitoring running body time of software component and electronic equipment | |
| US11256479B2 (en) | Dynamic updates in an interactive programming environment | |
| Samara | A practical approach for detecting logical error in object oriented environment | |
| CN114356783A (en) | Method and device for automatically generating unit test code, storage medium and equipment | |
| KR101476536B1 (en) | The method and system for inspecting program | |
| CN108959508B (en) | SQL data generation method and device |
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 |