Detaillierte Erklärung zur Verwendung von Eslint in Vue

1. Beschreibung

eslint hilft uns zu prüfen, ob der Code standardisiert ist. Dieser Artikel verwendet Prettier-Regeln (sowie standardjs , airbnb und andere Regeln). Wenn Sie die Standardregeln von eslint verwenden oder Ihre eigenen Regeln definieren möchten, müssen Sie keine mit Prettier verbundenen Abhängigkeitspakete herunterladen (löschen Sie gleichzeitig die zugehörige Konfiguration mit „prettier“ in .eslintrc.js. Wenn Sie die Konfiguration nicht löschen und Prettier nicht herunterladen, wird beim Starten des Projekts ein Fehler gemeldet). Ich habe das Eslint-Plugin in der vscode-Umgebung heruntergeladen, das beim Speichern nicht standardmäßigen Code gemäß den Regeln formatieren kann.

2. Laden Sie die entsprechenden Abhängigkeitspakete herunter

"eslint"

"babel-eslint"

"eslint-config-prettier"

"eslint-loader"

"eslint-plugin-prettier"

"eslint-plugin-vue"

3. Konfigurationsdatei .eslintrc.js (es gibt andere Möglichkeiten, Regeln zu konfigurieren)

Erstellen Sie im Stammverzeichnis des Projekts eine neue Datei .eslintrc.js mit folgendem Inhalt (Sie können sie entsprechend Ihren Anforderungen konfigurieren):

modul.exporte = {
  root: true, // Diese Regel nur auf das aktuelle Projekt anwenden parserOptions: {
    "Parser": "babel-eslint",
    "sourceType": 'Modul', // auf "Modul", "Skript" gesetzt (Standard)
    // "ecmaVersion": 6 // Aktiviere es6-Syntax, aktiviere es6-globale Variablen nicht automatisch},
  Parser: "vue-eslint-parser", // Um ​​.vue-Dateien zu identifizieren, müssen Sie eslint-plugin-vue herunterladen
  // Die Umgebung, die Sie aktivieren möchten env: {
    "Browser": wahr,
    "Knoten": wahr,
    "es6": wahr
  },
   //Plugin-Regeln übernehmen extends: [
    "eslint:recommended", // Starte die als "√" markierte Standardregel "plugin:prettier/recommended" // Von anderen geschriebene Regeln, abhängig vom Paket eslint-config-***, hier ist die Prettier-Regel],
  // Konfigurieren Sie die Liste der Plugin-Namen. In Plugin-Namen kann das Präfix „eslint-plugin-“ weggelassen werden.
  Plugins: [ 
    "vue", // eslint-Plugin-vue
    "hübscher" // eslint-plugin-hübscher
  ],
  // Benutzerdefinierte Regeln haben die höchste Priorität "rules": {
    "keine Konsole": 0
  }
}

4. Code beim Speichern in der vscode-Konfiguration (Version 1.44.0) automatisch formatieren

Laden Sie das Eslint-Plugin für vscode herunter, öffnen Sie die Datei settings.json und fügen Sie hinzu:

"editor.codeActionsOnSave": {

"source.fixAll.eslint": wahr

},

Die Konfiguration anderer Versionen kann geringfügig abweichen. Beispielsweise wird die in der Abbildung gezeigte Konfiguration auf Version 1.36.1 wirksam.

5. Fügen Sie den Befehl scripts in package.json hinzu: eslint erkennt und behebt automatisch

"eslint": "eslint --fix --ext .js,.vue --ignore-path .eslintignore ."

eslintignore ist die Datei, die bei der Konfigurationserkennung ignoriert wird

6. Schließen Sie die Eslint-Verifizierung für das Projekt ab

Hier nehmen wir vue-cli3 und höher als Beispiel. Fügen Sie einfach die folgende Konfiguration in vue.config.js hinzu

lintOnSave: false

7. eslint Chinesische Dokumentation

https://eslint.bootcss.com/docs/user-guide/getting-started

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!