Vue Front-End HbuliderEslint Echtzeitüberprüfung Automatische Reparatureinstellungen

Unabhängig davon, ob es sich um die Zusammenarbeit mehrerer Personen oder ein persönliches Projekt handelt, sind Codestandards sehr wichtig. Auf diese Weise können nicht nur grundlegende Syntaxfehler weitgehend vermieden werden, ESLint ist auch ein Tool zur Überprüfung von Grammatikregeln und Codestil, mit dem sichergestellt werden kann, dass grammatikalisch korrekter und einheitlich gestalteter Code geschrieben wird.

Installation des ESLint-Plugins in HBuilderX

HBuilderX enthält 4 Plugins zur Syntaxprüfung: htmlhint, stylelint, eslint-plugin-vue, eslint-js. Klicken Sie auf „Tools“ -> „Plugin-Installation“. Die Benutzeroberfläche sieht wie folgt aus:

Klicken Sie auf „Plugin Market“, um den Plugin Market aufzurufen, und geben Sie für die Suche „eslint“ ein.

Klicken Sie auf „eslint“, gehen Sie zur Detailseite und klicken Sie auf „Plugin installieren“. Hinweis: Die hbulider-Version muss 2.6.8 oder höher sein.

Nach der Installation von eslint-vue und eslint-js. Klicken Sie auf die Menüeinstellungen und aktivieren Sie Automatische Reparaturen speichern

Benutzerdefinierte eslint-js-Regeln

Klicken Sie im obigen Bild auf „Datei .eslintrc.js zur Konfiguration öffnen“ und öffnen Sie den Dateicode wie folgt:

  modul.exporte = {  
      "Plugins": [  
          "html"  
      ],  
      "Parser": "erste",  
      "Parseroptionen": {  
          "ecmaVersion": 2018,  
          "sourceType": "Modul",  
          "ecmaFunktionen": {  
              "jsx": wahr  
          },  
          "allowImportExportEverywhere": falsch  
      },  
      "Regeln": {                                  
          "camelcase": 2, //Camel-Case-Benennung erzwingen,  
          "indent": [2, 4], // Einrückungsstil "id-match": 0, // Namenserkennung "init-declarations": 1, // muss beim Deklarieren ein Anfangswert zugewiesen werden "no-undef": 1, // darf keine undefinierten Variablen haben "no-multi-spaces": "error", // mehrere Leerzeichen verbieten "semi": [2, "always"] ,// automatisches Hinzufügen von Semikolons "quotes": ["error", "single"] // einfache Anführungszeichen verwenden }  
  };  

Detaillierte Regelreferenz: Die allgemeine eslint-Konfiguration startet Hbulider neu und behebt Codeinkonsistenzen im JS-Code bei jedem Speichern automatisch.

Vorsichtsmaßnahmen

Die obigen Einstellungen zur Verwendung der automatischen Hbulider-Codereparaturfunktion gelten nur für Hbulider-Versionen über 2.6.8.
Referenzen: HBuilderX-Syntaxprüfung, Beschreibung der automatischen Reparaturfunktion für die Echtzeitprüfung von eslint

Oben finden Sie den detaillierten Inhalt der Echtzeitüberprüfung und der automatischen Reparatureinstellungen von HbuliderEslint auf dem Vue-Frontend. Weitere Informationen zur Echtzeitüberprüfung und automatischen Reparatur von HbuliderEslint finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!