[Kompilierung und Freigabe] VSCode muss Plug-Ins für die Entwicklung von Vue-Projekten installieren

In diesem Artikel werden einige VSCodePlug-Ins erläutert, die für die Entwicklung von Vue-Projekten installiert werden müssen. Ich hoffe, dass er für alle hilfreich sein wird!

Ich habe Webstorm bereits zum Entwickeln von Projekten verwendet, es hat jedoch zwei große Mängel: Erstens bleibt es zu hängen, wenn ich ein Projekt auf dem Laptop öffne, den ich vor drei Jahren gekauft habe Es ist praktisch jeden Tag, es zu öffnen, und das zweite ist zwar kostenpflichtig, wird aber hin und wieder ungültig, was zu schmerzhaft ist.

Deshalb habe ich beschlossen, darauf zu verzichten und den leichten und kostenlosen vscode zu verwenden, dessen vollständiger Name Visual Studio Code ist. Nach vielen Tagen der Erkundung und nach der Installation der folgenden Plug-Ins in vs-Code hat es im Grunde den gleichen Effekt wie Webstorm oder sogar ein besseres Erlebnis erzielt. Von nun an muss ich mir keine Sorgen mehr über Verzögerungen und Ausfälle machen. [Empfohlenes Lernen: „vscode-Einführungs-Tutorial“]

Plug-in-Installation und Anweisungen

1. Chinesisch (vereinfacht) (vereinfachtes Chinesisch) Sprachpaket für Visual Studio Code

Funktion: Chinesische Version von VS Code

Installationsschritte:

Anleitung: Bei der Installation eines Plug-Ins ist Schritt 123 derselbe. Die meisten Plug-Ins verfügen nur über Schritt 123. Dieses Plug-In verfügt über einen zusätzlichen Schritt 4, sodass Sie bezahlen müssen besondere Aufmerksamkeit.

2. Vue-Sprachfunktionen (Volar)

Funktion: Die Standard-Vue-Dateien im vs-Code haben alle den gleichen Text und können nicht angeklickt werden. Dieses Plug-In ermöglicht die Farbcodierung des Inhalts von Vue-Dateien und unterstützt das Klicken auf relative Pfaddateien zum Springen und Stilpositionieren von Klassennamen (vorausgesetzt, Klassenname und Stil müssen sich in derselben Datei befinden)

3 . vue-helper

Funktion: Wenn Sie auf die Vue-Komponente, die Vue-Variable oder die Vue-Methode in der Vorlage klicken, können Sie die entsprechende Datei oder den entsprechenden Speicherort finden, wenn Sie auf den Vue klicken Komponente bedeutet, dass die Komponente mit einem relativen Pfad installiert wird (d. h. nicht Unterstützt die Einführung von Aliasnamen) und der Komponentenname mit dem Dateinamen der Komponente identisch ist. Der Name der Komponentendatei lautet beispielsweise select.vue, aber wenn die Komponente eingeführt wird, kann sie nicht angeklickt werden. Sie müssen den Namen der Komponentendatei in common-select.vue ändern

Funktion: Durch Klicken auf die Vorlage können Vue-Komponenten zur entsprechenden Datei springen und durch Aliase eingeführte Vue-Komponenten unterstützen. Beispielsweise wird diese Importmethode unterstützt: import commonSelect from „@/components/common-select“, was die Mängel von Plug-in 3 ausgleicht.

5. CSS-Peek

Funktion: Unterstützt dateiübergreifendes Klassennamenspringen, das heißt, der Klassenname und sein Stil befinden sich nicht in derselben Datei, wodurch die Mängel von Plug-in 2 ausgeglichen werden.

6. Alias-Pfadsprung

Funktion: Unterstützt die Anpassung der Einführungsmethode von Alias-Dateien, um die Mängel von Plug-in 2 auszugleichen (Projekte, die keine Aliase verwenden, müssen es nicht installieren)

7. Tag automatisch umbenennen

Funktion: Tags automatisch umbenennen, d Bei falsch geschriebenen Wörtern wird eine Wellenlinie angezeigt Vermeiden Sie es, die Schuld auf sich zu nehmen, wenn ein Codeproblem vorliegt

10. Git Graph

Funktion: Nach Abschluss der Installation erscheint in der unteren linken Ecke eine Git Graph-Schaltfläche, um die detaillierten Informationen aller Git-Commits anzuzeigen und die offensichtlichen Änderungen im Code jedes Commits. json

und kopieren Sie den folgenden Code hinein. Die ersten beiden Zeilen sind für das Plug-in erforderlich, und die letzten beiden sind für die Plug-ins 12 bzw. 13 erforderlich Wenn Sie die Plug-Ins 12 und 13 installieren, können Sie die letzten beiden Zeilen löschen. Wenn Sie andere Regeln konfigurieren möchten, können Sie den folgenden Code in das Stammverzeichnis des Projekts erstellen Die Bedeutung jeder Zeile ist: 1. Einfache Anführungszeichen, 2. Kein Komma im letzten Element des Objekts, 3. Keine Klammern, wenn die Pfeilfunktion nur einen Parameter hat, 4. Zeilenumbruch, wenn mehr als 100 Zeichen.

{
  "editor.formatOnSave": true, // 保存时是否格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 格式化插件
  "editor.tabSize": 2, // tab健空格
  "editor.fontSize": 14, // 字体大小
  "workbench.iconTheme": "vscode-great-icons",
  "workbench.colorTheme": "One Dark Pro"
}

12. VSCode Great Icons

Funktion: Sorgen Sie dafür, dass die Projektstruktur entsprechende Symbole davor hat, was schöner aussieht (nicht notwendig)

13. One Dark Pro

Funktion: Verschönert die Benutzeroberfläche (nicht erforderlich)

14. Markdown Preview Enhanced

Funktion: Normalerweise gibt es in jedem Projekt eine README-Datei. MD-Datei, nach der Installation kann mit der rechten Maustaste auf jede MD-Datei geklickt werden, um eine Vorschau des Effekts anzuzeigen.

15 generiert automatisch die konfigurierte Anmerkung. Wenn keine Konfiguration vorhanden ist, wird die Standardanmerkung des Plug-Ins generiert.

Tastenkombinationen für Dateikopfkommentare Fenster: Strg+Win+i, Mac: Strg+cmd+i

Funktionskommentar-Tastenkombinationen window: ctrl+win+t, mac: ctrl+cmd+t , Sie müssen zuerst den Cursor auf die Funktionszeile setzen und dann die Tastenkombination drücken.

window：ctrl+win+i，mac：ctrl+cmd+i

函数注释快捷键 window：ctrl+win+t,mac：ctrl+cmd+t

Konfigurationsdokument: https://github.com/OBKoro1/koro1FileHeader/wiki/Installation und Schnellstart

Weitere Informationen zu VSCode finden Sie unter:

vscode-Tutorial

!

Das obige ist der detaillierte Inhalt von[Kompilierung und Freigabe] VSCode muss Plug-Ins für die Entwicklung von Vue-Projekten installieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!