Teilen von vscode-Plugins: 6 wichtige Plug-ins für die Vue3-Entwicklung

Dieser Artikel stellt 6 VSCode-Plugins zusammen, die für die Vue3-Entwicklung unerlässlich sind. Sie können sie direkt über das VSCode-Plugin-Center installieren und verwenden.

1. Teilen von vscode-Plugins: 6 wichtige Plug-ins für die Vue3-Entwicklung

1,53 Millionen Downloads+

Ich glaube, dass Studenten, die VSCode zur Entwicklung von Vue2 verwenden, mit dem Vetur-Plug-in als unterstützendem VSCode-Plug-in vertraut sein werden Seine Hauptfunktion besteht darin, Hervorhebung, Syntaxunterstützung und Syntaxerkennung für Vue-Einzeldateikomponenten bereitzustellen. [Empfohlenes Lernen: vscode-Tutorial, Programmierlehre, vuejs-Video-Tutorial]

Mit der Veröffentlichung der offiziellen Version von Vue3 empfiehlt das Vue-Team offiziell das Teilen von vscode-Plugins: 6 wichtige Plug-ins für die Vue3-Entwicklung-Plug-in als Ersatz für das Vetur-Plug-in. in, das nicht nur die Vue3-Sprachhervorhebung unterstützt, sondern auch die Syntaxerkennung unterstützt TypeScript und Typprüfungsfunktionen basierend auf vue-tsc.

Hinweis bei der Verwendung:

• Deaktivieren Sie zunächst das Vetur-Plugin, um Konflikte zu vermeiden.

• Es wird empfohlen, css/less zu verwenden / scss als Sprache von <style></style>, da diese auf basieren vscode-css-Languagecss/less/scss 作为 <style></style>的语言，因为这些基于 vscode-css-language 服务提供了可靠的语言支持；

• 如果使用 postcss/stylus/sass 的话，需要安装额外的语法高亮扩展。postcss 使用 language-postcss，stylus 使用 language-stylus 拓展，sass 使用 Sass 拓展；

• Teilen von vscode-Plugins: 6 wichtige Plug-ins für die Vue3-Entwicklung 不包含 ESLint 和 Prettier，而官方的 ESLint 和 Prettier 扩展支持 Vue，所以需要自行安装。

2. Vue VSCode Snippets

下载数 152 万+

Vue VSCode Snippets 插件旨在为开发者提供最简单快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。简直是 Vue3 开发必备神器。

该插件支持：Teilen von vscode-Plugins: 6 wichtige Plug-ins für die Vue3-Entwicklung、Vue2 和 Vue3。

使用方式如下：

• 新建一个 .vue文件，输入 vbase会提示生成的模版内容：

• 输入 vfor快速生成 v-for指令模版：

• 输入 v3onmounted快速生成 onMounted-Dienst Bietet zuverlässige Sprachunterstützung;

Wenn Sie postcss/stylus/sass verwenden, müssen Sie es installieren zusätzliche Erweiterungen zur Syntaxhervorhebung. Postcss verwendet Sprache-postcss

, Stift verwendet Sprache -stylus

-Erweiterung, sass verwendet die Sass-Erweiterung;

Teilen von vscode-Plugins: 6 wichtige Plug-ins für die Vue3-Entwicklung enthält nicht ESLint und Prettier und die offizielle ESLint und Prettier-Erweiterung unterstützt Vue, daher müssen Sie es installieren es selbst.

2. Vue VSCode Snippets

1,52 Millionen Downloads+

Vue VSCode Snippets Plug-in wurde entwickelt, um Entwicklern das einfachste und einfachste zu bieten schnellste Generation Vue Mit der Code-Snippet-Methode können Sie über verschiedene Tastenkombinationen schnell verschiedene Code-Snippets in der Datei .vue generieren. Es ist einfach ein unverzichtbares Artefakt für die Vue3-Entwicklung.

Dieses Plugin unterstützt: Teilen von vscode-Plugins: 6 wichtige Plug-ins für die Vue3-Entwicklung, Vue2 und Vue3.

Wie folgt verwenden: 🎜🎜Erstellen Sie eine neue .vue-Datei, geben Sie vbase ein und Sie werden mit dem generierten Vorlageninhalt aufgefordert: 🎜🎜🎜🎜

🎜Geben Sie vfor ein, um schnell zu generieren v-forBefehlsvorlage: 🎜🎜🎜🎜
🎜Geben Sie v3onmount ein, um schnell die onMounted-Lebenszyklusfunktion zu generieren: 🎜🎜🎜🎜🎜🎜Andere werden nicht mehr demonstriert. Die Funktion ist zu leistungsstark und es gibt viele häufig verwendete Tastenkombinationen. Insbesondere können Sie die 🎜Dokumentation🎜 anzeigen. 🎜🎜🎜🎜🎜3. Auto-Close-Tag🎜🎜🎜🎜Anzahl der Downloads: 7,69 Millionen+🎜🎜🎜🎜Das Auto-Close-Tag🎜-Plugin ist eine sehr nützliche VS-Code-Erweiterung, die einen großen Einfluss auf die Produktivität hat. Wie der Name schon sagt, wird das schließende Tag hinzugefügt, wenn wir die schließende Klammer in das schließende Tag eingeben. Es unterstützt HTML, Handlers, XML, PHP, Vue, JavaScript, Typescript, JSX und mehr. 🎜🎜🎜🎜🎜🎜🎜🎜4. Vue Peek🎜🎜🎜🎜Anzahl der Downloads: 490.000+🎜🎜

Vue Peek Das Plug-in wird verwendet, um das Vue-Codebearbeitungserlebnis zu erweitern und ermöglicht uns einen schnellen Sprung zu Dateien, die durch Komponenten und Module definiert sind.



Verwendung wie folgt:

• Klicken Sie mit der rechten Maustaste auf die Komponentenbezeichnung und springen Sie zur Komponentendefinitionsdatei:



• Klicken Sie mit der rechten Maustaste auf die Komponentenbezeichnung und ein Popup-Fenster zeigt die Komponentendefinitionsdatei an : 5. Vue Theme . 6. Vite

Über 89.000 Downloads . Vorschau und Debug von Anwendungen. Unterstützt das Starten, Erstellen und Neustarten von Projekten mit einem Klick.

Zusammenfassung

Die 6 heute freigegebenen Plug-Ins können nach Bedarf installiert und verwendet werden. Wir empfehlen diese beiden Plug-ins wärmstens: Teilen von vscode-Plugins: 6 wichtige Plug-ins für die Vue3-Entwicklung

und

Vue VSCode Snippets.

Weitere Informationen zu VSCode finden Sie unter:

vscode Basic Tutorial!

Das obige ist der detaillierte Inhalt vonTeilen von vscode-Plugins: 6 wichtige Plug-ins für die Vue3-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!