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:

1. ESLint

2. 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:

1. Wenn Sie Yarn zur Installation verwenden, müssen Sie die .eslintrc-Datei manuell erstellen

2. 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!