Ausführliche Erläuterung der Eslint-Schritte zum Erstellen und Reagieren einer App

Dieses Mal werde ich Ihnen die Schritte zum Konfigurieren von eslint in der Create-React-App ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Konfiguration von Eslint in der Create-React-App?

Verwenden Sie eslint und editorconfig, um Code zu standardisieren

Warum Sie diese verwenden sollten:

1. Codestandards sind förderlich für die Teamzusammenarbeit

2. Eine reine manuelle Spezifikation ist zeit- und arbeitsintensiv und die Genauigkeit kann nicht garantiert werden

3. Es kann mit dem Editor zusammenarbeiten, um automatisch an Fehler zu erinnern und Verbesserungen vorzunehmen Entwicklungseffizienz

eslint

Da die ECMAScript-Version ständig aktualisiert wird, verfügt das Js-Lint-Tool über umfangreiche Plug-Ins und kann Spezifikationen anwenden sind sehr umfangreich und können die Bedürfnisse der meisten Teams erfüllen.

eslint kooperiert mit git

Um die Spezifikationen aller so weit wie möglich zu kontrollieren, können wir git Hook verwenden, um eslint zur Überprüfung der Codespezifikation aufzurufen, wenn Git den Code festschreibt . Kanonischer Code kann nicht an das Warehouse übermittelt werden.

editorconfig

Unterschiedliche Editoren weisen bestimmte Unterschiede im Textformat auf. Wenn einige Standards nicht einheitlich sind, kann es sein, dass sie jedes Mal aktualisiert werden, wenn Sie mit anderen zusammenarbeiten Es wird viele Fehler im Code geben – Webstorm unterstützt automatisch die Editorconfig-Konfigurationsdatei.

Erste Installationeslintnpm i eslint da die Create-React-App bereits standardmäßig installiert ist

  "babel-eslint": "7.2.3",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.1.0",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",

Für die von uns gewünschte benutzerdefinierte Konfiguration installieren wir sie wie folgt

npm i babel-eslint \
\ eslint-config-airbnb eslint-config-standard \
\ eslint-loader \
\ eslint-plugin-import \
\ eslint-plugin-jsx-a11y \
\ eslint-plugin-node \
\ eslint-plugin-promise \
\ eslint-plugin-react \
\ eslint-plugin-standard -D

us Create eine neue .eslintrc-Datei im Stammverzeichnis, um eine Standardspezifikation für das gesamte Projekt zu erstellen

{
 "extends": "standard"
}

Das Hauptprojekt ist ein Front-End-Projekt, daher erstellen wir eine neue .eslintrc-Datei im Front-End-Ordner Standardisieren Sie den Client-Code und den Client-Code. Der Client-Code verwendet jsx, und viele Regeln unterscheiden sich von nodejs. Hier werden strengere Spezifikationen verwendet, um Client-Code zu erfordern.

Der dem konfigurierten Wert entsprechende Wert: 0: aus 1: Warnung 2: Fehler

{
 "parser": "babel-eslint",
 "env": {
  "browser": true,
  "es6": true,
  "node": true
 },
 "parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module"
 },
 "extends": "airbnb",
 "rules": {
  "semi": [0],
  "react/jsx-filename-extension": [0],
  "jsx-a11y/anchor-is-valid": [0]
 }
}

Verwenden Sie babel-eslint, um den Code zu analysieren, der Browser und es6 enthält Öffentliche Variablen. Webpack benötigt daher einige Umgebungsvariablen von node, parserOptions, um die Version zu definieren, und das Schreiben von Methoden im jsmodule-Modus.

Da Sie den Code vor jeder Kompilierung überprüfen müssen, müssen Sie auch das Webpack konfigurieren, das die Standardeinstellung von create-react-app ist

   {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
     {
      options: {
       formatter: eslintFormatter,
       eslintPath: require.resolve('eslint'),
       
      },
      loader: require.resolve('eslint-loader'),
     },
    ],
    include: paths.appSrc,
   },

Wir hoffen, den Code im Ordner node_modules zu blockieren

exclude:[path.resolve(__dirname, '../node_modules')]

erstellt eine neue Datei .editorconfig im Projektstammverzeichnis. Webstom hat standardmäßig die Konfiguration

1. root = echtes Projektstammverzeichnis

2. [*] Diese Regel gilt für alle Dateien

3. charset = utf-8-Kodierungsmodus

4. indent_style = Leerzeichen verwendet Tab Stil Tab und Leerzeichen

5. indent_size = 2

6. end_of_line = lf Ende der Zeile

7. insert_final_newline = true Die letzte Zeile am Zeilenende automatisch als Leerzeile speichern

8. trim_trailing_whitespace = true Leerzeichen nach dem Zeilenende automatisch entfernen

eslint erkennt diese Codezeile nicht // eslint-disable-line

eslint erkennt diese Datei nicht, am Anfang /* eslint-disable */ am Ende der Datei /* eslint-enable */

wird installiert npm i husky -D

und dann in package.json Durch das Hinzufügen eines Git-Hooks zu Skripten wird dieser Befehl aufgerufen, bevor Git Commit ausgeführt wird

"lint": "eslint --ext .js --ext .jsx src/",
"precommit": "npm run lint"

Git Commit, um die Ausführung von von eslint übergebenem Code zu erzwingen

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel und mehr gelesen haben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie die Eingabekomponente

So verwenden Sie das Installations-Plug-in in tatsächlichen Projekten

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Eslint-Schritte zum Erstellen und Reagieren einer App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!