EsLint Einführung und Lernanleitung

Einführung

ESLint wurde von Nicholas C. Zakas, dem Autor des JavaScript Red Book, geschrieben, 2013 Erstmals im Jahr veröffentlicht. NCZs ursprünglicher Gedanke war nicht, ein Rad neu zu erfinden, sondern eine Wahl zu treffen, da die Anforderungen nicht von der JSHint-Team erfüllt wurden: Ein Lint-Tool zu schreiben, das erweiterbar, jedes Regel einzeln und keine festgelegte Kodestil hat.

Offizielle Adresse: http://eslint.org/

EsLint hilft uns, Syntaxfehler bei der Javascript-Programmierung zu überprüfen. Zum Beispiel: In einer Javascript-Anwendung ist es schwer, verlorene Variablen oder Methoden zu finden. EsLint hilft uns, JS-Code zu analysieren, Fehler zu finden und sicherzustellen, dass die JS-Syntax korrekt ist.

EsLint basiert auf dem ECMAScript-Parser Esprima (ECMAScript Parsing Architecture). Esprima unterstützt ES5.1, ist ebenfalls in ECMAScript geschrieben und dient zur multifunktionalen Analyse. EsLint bietet nicht nur einige Standardregeln (erweiterbar), sondern auch benutzerdefinierte Regeln, um das von uns geschriebene Javascript zu kontrollieren.

EsLint bietet folgende Unterstützung an:

• ES6
• AngularJS
• JSX
• Stilprüfung
• Benutzerdefinierte Fehler und Hinweise
  

EsLint bietet folgende Arten von Validierungen an:

• Überprüfung auf Syntaxfehler
• Unwichtige oder fehlende Satzzeichen, wie z.B. Semikolons
• Codeblöcke, die nicht erreicht werden können (jegliche Benutzer von WebStorm sollten das verstehen)
• Erinnerung an nicht verwendete Parameter
• Fehlende Schließungen, wie z.B.}
• Stellen Sie sicher, dass die Stileinheitlichen Regeln einheitlich sind, wie z.B. Sass oder Less
• Überprüfen Sie den Namen der Variablen
  

Verwendung

1. Installation

Npm install gulp-eslint –save-dev

Unter Ihrem Projektverzeichnis ausführen: eslint –init erzeugt eine .eslintrc-Datei, die einige Validierungsregeln enthält

{
 "rules": {
  "semi": ["error", "always"],
  "quotes": ["error", "double"]
 }
}

darunter "semi" und "quotes" sind die Namen der Regeln. ESLint bietet auch Ebenen für error an, die mit Zahlen korrespondieren, wobei höhere Zahlen eine höhere Fehlermeldung bedeuten, wie z.B. 0 für keine Fehlermeldung bei Codefehlern1repräsentiert eine Warnung, die keine Auswirkungen auf die bestehende Kompilierung hat,2error wirft einen Fehler aus.

"extends": "eslint:recommended"

Extends ist die von ESLint standardmäßig empfohlene Validierung, Sie können die Konfiguration auswählen, um zu bestimmen, welche Prüfungen Sie benötigen, und sich anmeldennpmjs.comAnsehen

Zwei, EsLint-Konfiguration anpassen

Wie bereits erwähnt, können Sie alle Standardprüfungen von EsLint deaktivieren und nur die spezifischen Prüfregeln hinzufügen, die Sie benötigen. Dafür bietet EsLint2Es gibt verschiedene Arten, dies zu konfigurieren:

1. Konfigurationskommentare: Verwenden Sie direkte Javascript-Kommentare, um Konfigurationsinformationen in den zu überprüfenden Dateien zu übergeben
2. Konfigurationsdateien: Verwenden Sie JavaScript-, JSON- oder YAML-Dateien, z.B. das zuvor erwähnte .eslintrc-Datei, natürlich können Sie auch das Feld eslintConfig im package.json-Datei hinzufügen, EsLint liest und überprüft dies automatisch.
   

Beginnen wir mit der Einführung in die Verwendung von EsLint

parserOptions

EsLint ermöglicht über parserOptions die Angabe der zu überprüfenden ECMAScript-Version und einiger ECMAScript-Eigenschaften

{
 "parserOptions": {
  "ecmaVersion": 6, //Spezifizieren Sie die unterstützte Version von ECMAScript,6Für ES6
  "sourceType": "module", //Spezifizieren Sie den Typ der Quelle, es gibt zwei "script" oder "module"
  "ecmaFeatures": {
   "jsx": true//JSX starten
  }
 }
}

Parser

EsLint verwendet standardmäßig esprima zur Skriptanalyse, natürlich können Sie auch wechseln, z.B. auf babel-EsLint-Parser

{
 "parser": "esprima" //Standardmäßig kann es auf babel eingestellt werden-eslint, unterstützt jsx
}

Umgebungen

Environment kann voreingestellte globale Variablen anderer Umgebungen vorsehen, wie z.B. brower-Umgebungsvariablen, node-Umgebungsvariablen, es6Umgebungsvariablen, mocha-Umgebungsvariablen usw.

{
 "env": {
  "browser": true,
  "node": true
 }
}

Wenn Sie Umgebungsvariablen aus dem Plugin verwenden möchten, können Sie dies mit plugins angeben, wie folgt

{
 "plugins": ["example"],
 "env": {
  "example/custom": true
 }
}

Globale Variablen

Spezifizieren Sie die globalen Variablen, die Sie verwenden möchten, true bedeutet, dass eine Überschreibung erlaubt ist, false bedeutet, dass eine Überschreibung nicht erlaubt ist

{
 "globals": {
  "var1: true,
  "var2: false
 }
}

Plugins

EsLint ermöglicht die Verwendung von Drittanbieter-Plugins

{
 "plugins": [
  "react" 
  ]
}

Regeln

自定义规则，一般格式：”规则名称”:error级别系数。系数0为不提示(off)、1Wahrnehmungen (warn),}}2Fehler (error) auswerfen, können Sie einen Bereich angeben, wie [1,4]

kann sowohl Strict-Modus als auch eine Art von code als Erinnerung, wie Symbole, umfassen. Es kann auch eine dritte Überprüfung sein, wie react.

Standard-Überprüfungsadresse http://eslint.org/Dokumentation/rules/

{
 "plugins": [
  "react"
 ],
 "rules": {
   //Standard-Überprüfungen für Javascript-Code
  "eqeqeq": "off", //off = 0
  "curly": "error", //error = 2
  "quotes": ["warn", "double"], //warn = 1
   //Verwendung von Regeln für die Überprüfung durch Drittanbieter-Plugins
  "react/jsx-quotes": 0
 }
}

　　　　　　　　　　　 https://www.npmjs.com/Paket/eslint-Plugin-react, dieser Link ist die Verwendung von eslint für react

Drittes Kapitel: Verwendung von Gulp

var eslint = require('gulp-eslint');
gulp.task('validate-eslint',function(){
 return gulp.src(['app/**/*.js']) //angegebene Überprüfungsroute
  .pipe(eslint({configFile:"."/.eslintrc"))) //Verwenden Sie Ihre eslint-Datei, um Dateien zu überprüfen
  .pipe(eslint.format())
});

Zusammenfassung

Das ist der gesamte Inhalt dieses Artikels. Ich hoffe, dieser Artikel kann Ihnen bei Ihrem Lernen oder Ihrer Arbeit ein gewisses Maß an Hilfe bringen. Wenn Sie Fragen haben, können Sie gerne Kommentare hinterlassen.