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:
-
Codestandards sind förderlich für die Teamzusammenarbeit
Eine reine manuelle Spezifikation ist zeit- und arbeitsintensiv und die Genauigkeit kann nicht garantiert werden
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",
Nach dem Login kopieren
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
Nach dem Login kopieren
us Create eine neue .eslintrc-Datei im Stammverzeichnis, um eine Standardspezifikation für das gesamte Projekt zu erstellen
{
"extends": "standard"
}Nach dem Login kopieren
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]
}
}Nach dem Login kopieren
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,
},Nach dem Login kopieren
Wir hoffen, den Code im Ordner node_modules zu blockieren
exclude:[path.resolve(__dirname, '../node_modules')]
Nach dem Login kopieren
erstellt eine neue Datei .editorconfig im Projektstammverzeichnis. Webstom hat standardmäßig die Konfiguration
root = echtes Projektstammverzeichnis
-
[*] Diese Regel gilt für alle Dateien
charset = utf-8-Kodierungsmodus
indent_style = Leerzeichen verwendet Tab Stil Tab und Leerzeichen
indent_size = 2
end_of_line = lf Ende der Zeile
insert_final_newline = true Die letzte Zeile am Zeilenende automatisch als Leerzeile speichern
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"
Nach dem Login kopieren
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!
