Ein Artikel, in dem Techniken zur Überprüfung von Vue-Syntaxfehlern vorgestellt werden

Vue ist ein sehr beliebtes Frontend-Framework. Es ist einfach, flexibel und effizient und wird von immer mehr Entwicklern geliebt. Aufgrund der Komplexität der Vue-Syntax werden Entwickler jedoch während der Verwendung unweigerlich Syntaxfehler machen, die dazu führen, dass die Anwendung nicht ordnungsgemäß ausgeführt wird. Um diese Situation zu vermeiden, werden in diesem Artikel Techniken zur Überprüfung von Vue-Syntaxfehlern vorgestellt.

1. Installieren Sie Vue-cli

Zunächst müssen wir Vue-cli installieren, ein offizielles Gerüsttool von Vue. Dadurch können wir schnell eine Entwicklungsumgebung für Vue-Anwendungen erstellen. Der Installationsbefehl lautet wie folgt:

npm install -g vue-cli

2. Verwenden Sie ESLint

ESLint ist ein Open-Source-JavaScript-Syntaxprüfungstool, das uns helfen kann, Grammatikfehler, Stilprobleme usw. im Code zu erkennen . Um ESLint zum Überprüfen von Vue-Code verwenden zu können, müssen wir zuerst die ESLint- und Vue-Plugins installieren. T ESLINT installieren:

1. NPM I -D ESLINT

Vue-Plugin installieren:

2. NPM I -D ESLINT -Plugin -Vue

Datei .eslintrc.js erstellen: Verzeichnis, .eslintrc erstellen. js-Datei und kopieren Sie den folgenden Konfigurationscode in die Datei:

module.exports = {
3. root: true,
env: {

node: true

},

extensions: [

'plugin:vue/essential',
'@vue/standard'

] ,
parserOptions: {

parser: 'babel-eslint'

} ,
Regeln: {

// 这里可以添加自己额外的规则

}
}

Konfigurationsanweisungen wie oben:

• root: Auf true setzen, um anzugeben, dass die Datei die Root-Konfigurationsdatei ist, und ESLint stoppt die Suche in der Konfiguration der übergeordneten Datei.

• env: Geben Sie die Umgebung an, in der der Code ausgeführt wird. Hier ist er auf node eingestellt, was bedeutet, dass er in der Node.js-Umgebung ausgeführt wird.

• erweitert: Geerbte ESLint-Regelkonfiguration, hier werden zwei Regelkonfigurationen, Plugin:vue/essential und @vue/standard, verwendet.

• parserOptions: Parser-Optionen angeben ist ein Parser-Wrapper, der den Babel-Parser verwendet.

• Regeln: Sie können Ihre eigenen ESLint-Regeln hinzufügen.

Installieren Sie die VS Code-Erweiterung

Um Fehler im Code-Editor automatisch zu überprüfen und Fehlermeldungen auszugeben, müssen Sie die ESLint-Erweiterung in VS Code installieren.

3. Codeprüfung
4. Nach Abschluss der oben genannten Schritte können wir mit der Überprüfung des Codes beginnen. Öffnen Sie das Vue-Projekt in VS Code und die ESLint-Erweiterung erkennt automatisch Fehler im Projekt und gibt Fehlermeldungen aus.

Solange Sie eine Vue-Komponente in VS Code öffnen, wird an dieser Stelle die im Bild unten gezeigte Fehlermeldung angezeigt.

Wie im Bild oben gezeigt, erscheint auf der linken Seite des Codefensters ein kleiner roter Punkt. Wenn Sie mit der Maus darüber fahren, wird eine Fehlermeldung angezeigt. Wir können Codekorrekturen basierend auf der Fehlermeldung vornehmen.

Wenn wir außerdem die Fehlerprüfung bestimmter Zeilen ignorieren möchten, können wir am Ende der entsprechenden Zeile einen Kommentar hinzufügen. Der Kommentarinhalt lautet // eslint-disable-line: