Heim > Artikel > Web-Frontend > Detaillierte Beispiele für Schritte zum Konfigurieren der React-Entwicklungsumgebung mit VSCode
Die Standardkonfiguration von vscode reagiert nicht auf die JSX-Syntax, was sich in dem Standardeinrückungsfehler nach der Verwendung der automatischen Formatierung oder dem Einfügen widerspiegelt. Der Fehler kann jedoch durch Ändern des Sprachmodus und der Formatierung nach dem Ändern des Sprachmodus behoben werden ist immer noch nicht ideal. In diesem Artikel werden hauptsächlich die Schritte zum Konfigurieren der Reaktionsentwicklungsumgebung in VSCode vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Durch die gemeinsame Verwendung der ESLint- und Prettier-Plug-Ins können Sie eine perfekte Unterstützung für die JSX-Syntax in vscode erreichen.
Editor-Installations-Plug-in
Sie müssen das folgende Plug-in in vscode installieren:
ESLint
Hübscher
Konfiguration im Projekt
Konfiguration ESLint
Grundkonfiguration
Installieren Sie die Abhängigkeiten babel-eslint, eslint-plugin-jsx-a11y und eslint-plugin-react im Projekt:
npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev
Empfohlen Die ESLint-Konfiguration lautet wie folgt (ändern Sie .eslintrc)
{ // Use the AirBnB JS styleguide - https://github.com/airbnb/javascript "extends": "airbnb", // We use 'babel-eslint' mainly for React Native Classes "parser": "babel-eslint", "ecmaFeatures": { "classes": true, }, // jsx相关插件 "plugins": ["react", "jsx-a11y", "import"] // We can add/overwrite custom rules here "rules": { // React Native has JSX in JS files "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], // React Native includes images via require("../images/example.png") "global-require": 0 } }
Ein paar Punkte, die Sie beachten sollten:
Wenn Sie Yarn zur Installation verwenden, müssen Sie die .eslintrc-Datei manuell erstellen
Wenn eslint während der Verwendung einen Fehler meldet und Sie dazu auffordert Eine Abhängigkeit fehlt. Installieren Sie einfach die entsprechenden Abhängigkeiten.
Möglicherweise treten Probleme auf.
Wenn das Dateinamensuffix im Projekt stattdessen .js lautet von .jsx kann der folgende Fehler auftreten:
Code kopieren Der Code lautet wie folgt:
[eslint] JSX nicht erlaubt in Dateien mit der Erweiterung „.js“ (react/jsx-filename-extension)
Fügen Sie einfach neue Regeln in .eslintrc hinzu, um .js- und .jsx-Suffixe zuzulassen:
"rules": { "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] }
react-native 0.49 und spätere Versionen sind bereits verfügbar. Es wird nicht empfohlen, .jsx als Suffix zu verwenden. Bitte lesen Sie diese Diskussion. Keine .jsx-Erweiterung?
Fehler bei der Requisitenvalidierung
[eslint] 'navigation' is missing in props validation (react/prop-types)
Das Erkennen des Requisitentyps hilft beim Schreiben wiederverwendbarer Komponenten Muss es ausgeschaltet werden, fügen Sie die folgenden Regeln hinzu:
"rules": { "react/prop-types": 0 }
Prettier konfigurieren
Der gewünschte Effekt ist: Prettier konfigurieren Um den JSX-Code beim Speichern von Dateien automatisch gemäß den ESLint-Regeln zu formatieren, sind die Schritte wie folgt:
Im Projekt prettier-eslint installieren
npm install prettier-eslint --save-dev
Vscode-Arbeitsbereich konfigurieren
Fügen Sie im Abschnitt zur Benutzeranpassung des vscode-Arbeitsbereichs den folgenden Code hinzu:
// Format a file on save. // A formatter must be available, // the file must not be auto-saved, // and editor must not be shutting down. "editor.formatOnSave": true, // Enable/disable default JavaScript formatter (For Prettier) "javascript.format.enable": false, // Use 'prettier-eslint' instead of 'prettier'. // Other settings will only be fallbacks // in case they could not be inferred from eslint rules. "prettier.eslintIntegration": true,
Verwandte Empfehlungen:
Beispiel für eine ausführliche Erklärung der Vue-Cli-Vscode-Konfiguration Eslint
Vorschau des Markdowns und Ändern des Vorschaustils in VSCode
VsCode-Plugin zusammenfassen und organisieren
Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele für Schritte zum Konfigurieren der React-Entwicklungsumgebung mit VSCode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!