vs Code -Konfigurationshandbuch für die effiziente Reaktionsentwicklung: Verbesserung Ihrer Codierungseffizienz
React -Entwickler benötigen einen Code -Editor, der React -Code effizient schreiben kann. Es gibt Tausende von freien Erweiterungen auf dem Markt für VS -Code, mit denen Sie Ihren Entwicklungsworkflow verbessern können. Dieser Artikel konzentriert sich auf einige Erweiterungen und Einstellungen, die Ihre React -Codierungseffizienz auf professionelle Ebene bringen.
Einige der im Artikel aufgeführten Erweiterungen sind nicht reagspezifisch, aber sie können dennoch Ihre Effizienz und Ihre Codierungsgeschwindigkeit verbessern. Tatsächlich gibt es nur wenige Erweiterungen, die in Ihrer täglichen Codierung wirklich nützlich sind.
Die in diesem Artikel aufgeführten Tools und Technologien können Ihnen Stunden der Entwicklungsarbeit ersparen - diese Zeit wäre bei der Lösung vieler kleiner, aber entscheidender Probleme verschwendet worden. Sie können Ihnen auch helfen, Codierungsfehler zu reduzieren. Der Schlüssel zur Verbesserung der Produktivität liegt darin, so viele Aufgaben wie möglich zu automatisieren. Die folgenden Erweiterungen und Einstellungen helfen Ihnen dabei, dieses Ziel zu erreichen.
Schlüsselpunkte
Sprachunterstützung
Wenn Sie zum ersten Mal vs Code installieren, erhalten Sie viele Funktionen außerhalb des Boxs.
Folgendes ist ein Schnappschuss der Registerkarte "Begrüßung". Sie können es immer unter dem Hilfmenü finden.
Sie müssen das erste Setup hier durchführen. Da unser Fokus reagiert, werden wir zunächst JavaScript -Spracherweiterungen einrichten, die uns zusätzliche Funktionen bieten, die für unseren Workflow für Codierungseffizienz von wesentlicher Bedeutung sind.
Klicken Sie im Abschnitt "Tools und Sprachen" der Registerkarte "Begrüßung" auf den Link JavaScript, um ihn zu installieren. Es wird eine Nachladeaufforderung angezeigt, und Sie sollten darauf klicken, um die neue Funktion wirksam zu machen.
JavaScript -Sprachweiterung bietet eine Vielzahl von Funktionen, einschließlich:
Eine vollständige Liste und Dokumentation dieser Funktionen finden Sie in der VS -Code -Dokumentation. Ich empfehle Ihnen dringend, jede Funktion zu lesen, um zu verstehen, wie Sie sie in Ihrem Entwicklungsworkflow verwenden können.
Die folgende Abbildung ist ein Beispiel für den tatsächlichen Betrieb von IntelliSense und automatischer Import.
Wenn die Registerkarte gedrückt wird, wird die Header -Komponente nach oben importiert. Das Endsymbol muss eingegeben werden und der Code wird automatisch abgeschlossen wie:.
Nach der Installation von JavaScript -Sprachfunktionen kann der VS -Code Sie auffordern, eine jsconfig.json -Datei im Stammverzeichnis des Projekts anzugeben. Dies ist nicht erforderlich, aber das Setzen dieser Datei hilft IntelliSense, genauere Tipps zu geben. Hier ist eine Beispielkonfiguration:
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code>Die obige Konfiguration gibt dem JavaScript -Sprachserver mit, welche Dateien zu Ihrem Quellcode gehört und welche Dateien nicht angehören. Dies stellt sicher, dass der Sprachdienst nur Ihren Quellcode analysiert, sodass die Leistung schnell ist. Die vollständige Konfiguration wird hier dokumentiert und erklärt alle möglichen Werte, die in jsconfig.js verwendet werden können.
Wenn Sie vorhaben, große, komplexe Reaktionsprojekte zu erstellen, wird die Verwendung von Typscript dringend empfohlen. Dies liegt daran, dass TypeScript Typensicherheit bietet und die Möglichkeit der Bereitstellung von Fehlercodes in Front-End-Anwendungen verringert. VS Code bietet typeScript -Sprachunterstützung außerhalb des Box, indem viele Funktionen bereitgestellt werden (z. B. ::::
Bitte beachten Sie, dass VS -Code keinen Typscript -Compiler bereitstellt. Sie müssen eine in der Global Node.js -Umgebung wie folgt installieren:
<code>npm install -g typescript</code>
fließen
(Der folgende Teil ähnelt dem Originaltext, aber die Formulierung und die Satzstruktur wurden angepasst, um den Zweck der Pseudooriginalität zu erreichen.)
Key Mapping -Einstellungen
Wenn Sie von einem anderen Code -Editor zum VS -Code migrieren, werden Sie sich freuen zu wissen, dass Sie weiterhin dieselben Tastaturverknüpfungen verwenden können, an die Sie bereits gewöhnt sind. Wenn Sie mit dem Code -Editor nicht vertraut sind, überspringen Sie diesen Abschnitt bitte. Wenn Sie jedoch zuvor einen Code -Editor verwendet haben, wissen Sie möglicherweise, dass das Umschulungs -Muskelgedächtnis ineffizient ist und Zeit für die Anpassung benötigt.
In dem Abschnitt "Einstellungen und Schlüsselbindung" der Registerkarte "Begrüßung" werden Links zur Installation von VIM-, Sublime-, Atom- und anderen Tastaturverknüpfungen angezeigt. Wenn Sie auf den Link "Andere" klicken, erhalten Sie eine vollständige Liste der Keymaps, die installiert werden können.
Ich war früher ein Atombenutzer, bevor ich zu VS -Code gewechselt habe. Das Einrichten von Atoms Schlüsselzuordnung im VS -Code ist so einfach wie das Klicken auf den Atom -Link. Dadurch wird die Atom Keymap -Erweiterung für mich installiert. Die folgende Konfiguration ist in Settings.json erforderlich, um VS -Code eher wie "Atom" zu erstellen:
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code>Bitte lesen Sie die Anweisungen Ihrer Tastaturverknüpfungsverlängerung, um zu erfahren, wie Sie Ihre Abkürzungsschlüssel festlegen. Dokumente finden Sie durch einfaches Klicken auf die Keymap -Erweiterung in der Erweiterungsleiste.
emmet jsx -Unterstützung
emmet ist ein Webentwicklungs -Toolkit, mit dem Sie den HTML -Code effizienter schreiben können. Wenn Sie mit Emmet nicht vertraut sind, sehen Sie sich die Demo an, um zu sehen, wie es funktioniert.
gegen Code hat ein integriertes EMMET und unterstützt bereits die JSX-Syntax. Leider verwenden die meisten React -Starterprojekte die .js -Erweiterung. Das Problem ist, dass VS -Code keine Dateien wie React -Code erkennt, sodass die JSX -Funktion nicht aktiviert wird. Es gibt zwei Lösungen:
<code>npm install -g typescript</code>
Gehen Sie einfach auf Settings.json auf die Registerkarte "oberes Menü" und klicken Sie auf "Anzeigen"> "Befehlsfeld". Geben Sie die Option "Einstellungen" ein und wählen Sie die Option "Einstellungen: Einstellungen (JSON)". Alternativ können Sie Strg p drücken und "setts.json" eingeben, um die Datei schnell zu öffnen. Sie können auch die Verknüpfungsschlüssel Strg , verwenden, um die SET UI -Version auf der neuen Registerkarte zu öffnen. Wenn Sie in der ersten oberen rechten Ecke auf die Schaltfläche Symbol klicken, wird die Einstellungen geöffnet. JSON.
Die zweite Option scheint der einfachste Weg zu sein. Leider verursacht dies Probleme mit anderen Tools für JavaScript-Entwicklung wie Eslint-Config-Airbnb , bei dem ein Regelsatz vorliegt, der die Verwendung von .jsx-Dateierweiterungen für React-Code erzwingt. Das Deaktivieren dieser Regel später kann andere Probleme verursachen.
Das offizielle React -Team empfiehlt die Verwendung der .js -Erweiterung für React -Code. Nach meiner persönlichen Erfahrung ist es am besten, alle Dateien mit React -Code in .JSX umzubenennen und die Erweiterung .js für Dateien mit reinem JavaScript -Code zu verwenden. Auf diese Weise können Sie alle Entwicklungstools leichter verwenden.
Format
Schreiben von hochwertigem Code müssen Sie konsistentes Code schreiben. Als Entwickler sind wir Menschen und es ist leicht, die für uns selbst festgelegten Standards zu vergessen. In diesem Abschnitt erfahren wir einige wesentliche Tools, mit denen wir automatisch konsistente Code schreiben können.
editorConfig ist eine einfache Konfigurationsdatei, die nur Formatierungsregeln enthält. Sie müssen eine Erweiterung installieren, damit VS Code diese Regeln lesen und ihre eigenen Regeln überschreibt. Befolgen Sie einfach die folgenden Schritte, um es einzurichten:
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code>vs Code folgt nun diese Regeln, um Ihren Code zu formatieren. Lassen Sie uns schnell über Newlines diskutieren. Windows verwendet CRLF, um die Beendigung von Zeilen anzugeben, während Unix-basierte Systeme LF verwenden. Wenn Sie zufällig eine Datei mit gemischten Zeilenpausen verwenden, haben Sie bei der Übermittlung der Datei viele Probleme. Sie können konfigurieren, wie Git Newlines umgeht.
Meine bevorzugte Methode ist es, alle Projektdateien dazu zu zwingen, LF -Newlines auf einer beliebigen Plattform zu verwenden. Beachten Sie, dass EditorConfig keine Zeilenumbrüche in vorhandene Dateien konvertiert. Es wird nur LF für die neue Datei festlegen. Um alle vorhandenen Dateien umzuwandeln, haben Sie zwei Optionen:
Als nächstes schauen wir uns hübscher an.
hübscher ist die einfachste Codeformaterin, die für JavaScript -Code eingerichtet werden kann. Es unterstützt JavaScript, TypeScript, JSX, CSS, SCSS, Less und GraphQL. Um es einzurichten, befolgen Sie die folgenden Schritte:
<code>npm install -g typescript</code>
<code>// 控制提示是否显示 "atomKeymap.promptV3Features": true, // 更改多光标鼠标绑定 "editor.multiCursorModifier": "ctrlCmd", // 在新窗口中打开文件夹（项目），而不会替换当前窗口 "window.openFoldersInNewWindow": "on",</code>
<code> "emmet.includeLanguages": {
"javascript": "javascriptreact"
}</code>Für die Schritte 3-5 müssen Sie dies für jedes Projekt tun, das schöner unterstützt werden soll. Sie können jetzt auf den Befehl format unter dem Skriptbereich des NPM -Skripts im VS -Code klicken, wie im folgenden Screenshot gezeigt.
Alternativ können Sie das Befehl NPM -Auslaufformat ausführen, um schöner auszuführen.
Dies führt dazu, dass alle Dateien gemäß den Standardregeln von Prettier und den Regeln, die Sie in den Dateien .PrettierRC und .DitorConfig überschreiben, korrekt und konsequent neu formatiert werden. Linienbrüche bleiben ebenfalls konsistent.
Sie haben möglicherweise festgestellt, dass sich die Codeformatierung jetzt an drei verschiedenen Orten befindet. Sie fragen sich vielleicht, was passieren würde, wenn wir widersprüchliche Regeln hätten. Nach der Aktivierung von schöneren wird diese Regeln gemäß den folgenden Prioritäten behandelt:
Im Falle eines Konflikts wird die schönere Konfiguration bevorzugt.
Jeder echte Entwickler weiß, dass es üblich ist, den HTML -Code von irgendwo im Internet zu kopieren und in Ihren React -Code einzufügen. Dies erfordert normalerweise, dass Sie HTML -Attribute in eine gültige JSX -Syntax konvertieren. Glücklicherweise gibt es eine Erweiterung namens HTML an JSX, die die Konvertierung für Sie durchführt. Nach der Installation kann es leicht:
Dies bedeutet, dass Eigenschaften wie die Klasse in Klassenname konvertiert werden. Dies ist eine sehr gute zeitsparende Methode.
(Der Rest des Inhalts ähnelt dem Originaltext, aber die Formulierung und die Satzstruktur werden angepasst, um den Zweck der Pseudooriginalität zu erreichen. Halten Sie das Bildformat unverändert.)
Das obige ist der detaillierte Inhalt vonSo richten Sie VS -Code für die React -Entwicklung ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
