Lernen Sie, wie Sie mit vscode eine React-Native-Entwicklungsumgebung erstellen

Frage

Der Code hat keine Eingabeaufforderung:
Viele Nicht-Front-End-Studenten, die neu in der RN-Entwicklung sind, werden fragen: „Welcher Editor hat intelligente Eingabeaufforderungen?“ . . Für Studienanfänger ist das Leben inzwischen viel besser, wozu brauchen sie also ein Fahrrad?

Low-Level-Codefehler:
Mit Fehlern sind hier beispielsweise Rechtschreibfehler, Symbolfehler usw. gemeint. Nach dem Schreiben des Codes werden beim Ausführen verschiedene Fehler gemeldet. Manchmal verbringe ich viel Zeit damit, das Problem zu finden, und stelle schließlich fest, dass es sich um ein Problem mit dem chinesischen Semikolon handelt.

Lösung

Die möglichen Optionen sind:

1. Verwenden Sie Typescript: Verwenden Sie direkt die JS-Version mit Unterstützung für statische Typen, aber Sie müssen eine andere Syntax lernen, und mein Code ist vollständig in TS geschrieben, was bei vielen guten öffentlichen Bibliotheken jedoch nicht der Fall ist.
2. Flow verwenden: Aus netzwerkbezogenen Gründen ist diese Umgebung sehr schwierig zu konfigurieren und Sie müssen außerdem einige neue Syntax erlernen.

Unsere Wahl: vscode + Typisierungen + eslint

• vscode: das neueste Produkt der leistungsstärksten IDE-Familie im Universum
• Typisierungen: Schnittstellendatei basierend auf Typescript
• eslint: statische Codeprüfung, die Syntaxfehler auf niedriger Ebene erkennen, das Codeformat standardisieren und Best Practices anwenden kann

Tools und Plugins

Herausgeber: vscode.

Die erforderlichen und empfohlenen Plugins sind wie folgt:

Notiz:

• Klicken Sie auf die einzelnen Plug-Ins, um die entsprechenden ausführlichen Anweisungen zu erhalten.
• Die Aktualisierungshäufigkeit von vscode und Plug-Ins ist immer noch relativ schnell. Es wird empfohlen, rechtzeitig zu aktualisieren
• Die Plugin-Installation von vscode ist sehr einfach. Die Schaltfläche unten links ist das Erweiterungsfenster. Suchen Sie einfach nach dem Plugin-Namen und klicken Sie, um es zu installieren.

Tipps zur Codeintelligenz

Für Pakete von Drittanbietern, wie etwa react-native:

Typisierungen global installieren:

npm installiere Typisierungen -g

Installieren Sie die API-Dokumentation für React und React-Native:

Typisierungen installieren dt~react --save

Typisierungen installieren dt~react-native --save

Nachdem Sie gewartet haben, bis die Installation abgeschlossen ist (abhängig von der Anzahl der Pakete und den Netzwerkbedingungen), befinden sich im Stammverzeichnis des Projekts ein Verzeichnis „typings“ und eine Konfigurationsdatei „typings.json“:

Starten Sie den Code nach Abschluss neu oder verwenden Sie den Befehl „reload“. Jetzt enthalten die React-Native- und React-bezogenen Codes Eingabeaufforderungen und Anweisungen, wie unten gezeigt:

Methode Smart Tipps:

Anzeigemethodenparameter:

Bewegen Sie den Mauszeiger, um Anweisungen anzuzeigen:

Hinweis: Für andere Pakete von Drittanbietern können Sie einen ähnlichen Ansatz verwenden oder die oben genannten Plugins verwenden.

Wenn Sie Business-Code-Entwickler sind:

Für standardmäßigen modularen JS-Code kann vscode automatisch Verbindungen herstellen und Eingabeaufforderungen bereitstellen, und wir müssen nur Kommentare schreiben.

Wenn Sie ein Toolkit- oder SDK-Entwickler sind:

Wenn unser Code für andere Studierende veröffentlicht werden soll, müssen wir bei der Veröffentlichung die entsprechende .d.ts-Schnittstellendatei bereitstellen.
Der Standard ist die Datei „index.d.ts“ im Stammverzeichnis des Pakets, andernfalls müssen Sie das Element „typings“ in der Konfiguration „package.json“ angeben (ähnlich wie main).

So schreiben Sie eine Schnittstellendatei: Dokumentation

Statische Codeprüfung

Der Code wird mithilfe von eslint, das aus CLI- und Konfigurationsdateien (Regeln) besteht, statisch gelintet.

Nachdem Sie das entsprechende Plug-In in vscode installiert haben, können Sie die Erkennungsergebnisse in Echtzeit im Editor sehen, ohne die CLI selbst ausführen zu müssen.

Hinweis: In diesem Artikel werden die Parameter von eslint-cli behandelt, die in der Entwicklung im Allgemeinen nicht verwendet werden. Lesen Sie beim Schreiben automatisierter Skriptbefehle die Dokumentation.

Installieren Sie zuerst eslint cli und zugehörige Plug-Ins und fügen Sie Entwicklungsabhängigkeiten im Projekt package.json hinzu (dies ist eine beliebte RN-Konfiguration):

"devAbhängigkeiten": {
    "eslint": "^3.3.1",
    "babel-eslint": "^6.1.2",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-plugin-import": "^1.14.0",
    "eslint-plugin-jsx-a11y": "^2.1.0",
    "eslint-plugin-react": "^6.1.2"
}

Führen Sie dann npm install aus, um es zu installieren.

Konfigurationsdatei .eslintrc.js (hier verwenden wir das js-Format, da Kommentare hinzugefügt werden können. Das json-Format ist optional)

Hier können Sie eslint init verwenden, um den Assistenten zum Generieren eines solchen zu starten.

Wir können das vorgefertigte direkt verwenden (der Vorteil besteht darin, dass es mit anderen Projekten des Teams konsistent ist) und eine neue Datei .eslintr.js im Stammverzeichnis des Projekts erstellen. Der Inhalt lautet wie folgt

modul.exporte = {
  Parser: „babel-eslint“,
  Parseroptionen: {
    Quelltyp: „Modul“
  },
  erweitert: "airbnb",
  Plugins: [
    "reagieren",
    "jsx-a11y",
    "Import"
  ],
  Regeln:
    // 0 = aus, 1 = warnen, 2 = Fehler
    //FB-Konfigurationsreferenz:
    // https://github.com/facebook/react-native/blob/8baaad9b0fbda2b02bb1834452aa63cac7910dc5/.eslintrc

    "global-erfordern": 0,
    "no-use-before-define": 0, // Verwendung von Variablen vor ihrer Definition nicht zulassen
    "max-len": 0, // geben Sie die maximale Länge einer Zeile in Ihrem Programm an (standardmäßig deaktiviert)
    „no-console“: 0, // Verwendung der Konsole nicht zulassen (in der Knotenumgebung standardmäßig deaktiviert)
    "no-undef": 2, // Verwendung nicht deklarierter Variablen nicht zulassen, sofern sie nicht in einem /*globalen */ Block erwähnt werden

    "keine unbenutzten Variablen": 0,
    "block-scoped-var": 0, // var-Anweisungen so behandeln, als ob sie blockbezogen wären (standardmäßig deaktiviert)
    "complexity": 0, // die maximal zulässige zyklomatische Komplexität in einem Programm angeben (standardmäßig deaktiviert)
    "consistent-return": 0, // erfordert, dass Return-Anweisungen entweder immer oder nie Werte angeben

    // asynchrones Warten zulassen
    'Generator-Sternabstand': 0,

    "no-return-assign": 1, // Verwendung von Zuweisungen in der Return-Anweisung nicht zulässig

    "react/jsx-Dateiname-Erweiterung": 0,
    "reagieren/selbstschließend-komp": 1,
    "react/jsx-schließende-Klammer-Position": 0,
    "react/prop-types": 0, // Vermeiden Sie das Einfügen von Eigenschaften wie Redux},

  // Legen Sie die globalen Variablen fest, die hier verwendet werden können "globals": {
    "Fenster": wahr,
    "holen": wahr,
    "__DEV__": wahr,
    "__APP__": wahr,
    "__ANDROID__": wahr,
    "__IOS__": wahr
  }
};

Hier konfigurieren wir hauptsächlich die Plug-Ins und Erkennungsregeln. Einige Anweisungen:

• Regelliste
• Die 0 nach der Regel bedeutet „Aus“, 1 bedeutet „Warnung anzeigen“ und 2 bedeutet „Fehler anzeigen“. Einige Regeln können mit Parametern konfiguriert werden. Weitere Einzelheiten finden Sie im Regellistendokument oben.
• Es gibt einige einfache Fehler, die vscode automatisch beheben kann (wenn ein Glühbirnensymbol angezeigt wird, bedeutet dies, dass der Fehler automatisch behoben werden kann).

Die Regeln hier sind im Wesentlichen die aus der Praxis zusammengefassten Best Practices zum Schreiben von JS-Code. Wenn Sie auf einen Erkennungsfehler stoßen, suchen Sie direkt nach den Regeln und lesen Sie die Anweisungen.

Schalten Sie es nicht einfach ab.

Nach der Installation des Eslint-Plugins für vscode:

Und noch mehr:

Sie können das Pre-Commit-Tool verwenden, um eslint auszuführen und den Code vor jeder Übermittlung zu überwachen. Wenn dies fehlschlägt, wird die Übermittlung verboten.

Debuggen

Nachdem Sie das Plug-In „React-Native-Tools“ in vscode installiert haben, können Sie chromDevTools zum Debuggen des Codes verwenden.

Eine Debugging-Methode, die näher am nativen Verfahren liegt.

Die Methoden, die wir häufig verwenden, sind:

• Öffnen Sie den Paketserver im Terminal
• vscode-Auswahl, dbug, an Packager anhängen
• Rufen Sie im Terminal das Debug-Menü auf und wählen Sie JS remote debuggen

Zusammenfassen

Wenn Sie Ihre Arbeit gut machen möchten, müssen Sie zuerst Ihre Werkzeuge schärfen. Es lohnt sich.

Eine gute Entwicklungsumgebung sorgt für Effizienz und gewährleistet gleichzeitig Qualität.

Gute Entwicklungserfahrung kann Ihnen beim Programmieren Freude bereiten.

Dies ist das Ende dieses Artikels, in dem Sie lernen, wie Sie mit vscode eine React-Native-Entwicklungsumgebung erstellen. Weitere relevante Inhalte zum Erstellen von React-Native mit vscode finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!