VS Code Plug-in - Entwicklung Übersicht

Vorwort

VS Code wird von Entwicklern immer beliebter als ein scharfes Tool für die Codeentwicklung. Wie bei meinem Frontend werden 80% der täglichen Entwicklungsarbeit in VS Code durchgeführt. Mit der Nutzung von Menschen, die es nicht mehr erfüllt, diese grundlegende Bedürfnisse der einfachen, eleganten, komfortablen Schreiben von Code. Manche Leute nutzen es, um zu fischen, zu lesen Romane, zu überprüfen Aktien, zu lesen Artikel, zu spielen Schach. Wenn Sie das Wort Fishing in den Plugin-Marktplatz von VS Code eingeben, gibt es mehr als 20 Plugins zur Auswahl. Dieser Artikel gibt Ihnen einen Überblick über die Möglichkeiten von VS Code und hilft Ihnen dabei, Ihre Plugin-Dokumentation schnell zu indexieren.

Plug-in - Funktionen

Plug-ins ermöglichen die folgenden Funktionen

• Anpassung der Symbole und Themenfarben für verschiedene Arten von Dateien
• Hinzufügen benutzerdefinierter Komponenten und Benutzeroberfläche
• Erstellen einer funktionsreichen Webview mit HTML
• Unterstützung für neue Programmiersprachen
• Unterstützt spezielle Debugger

Die großen Module der Komponenten

Große Fälle Sammlung

Das offizielle Plug-In - Programm ist zusammengestellt. https://github.com/microsoft/vscode-extension-samples Wenn Sie sich die hier vorgestellten Fälle ansehen, können Sie das Entwicklungsparadigma für die meisten Szenarien verstehen.

Der Verzeichnis für jedes Plugin ist ungefähr identisch, und dies ist auch offiziell als Standard-Plugin - Verzeichnis vereinbart.

Fälle

UI-Komponenten

vscode bietet eine sehr standardisierte Benutzeroberfläche, die bei der Erstellung von Plug-ins streng an die Anforderungen angepasst wird, wie z. B. eine SVG-Datei mit Symbolgröße 16 * 16.

Hier ist die offizielle UI-Regionalteilung.

Befehlszeilen-Tool

yomitgenerator-code

Folgen

# 安装依赖
npm install -g yo generator-code
yo code # 新建项目

Tasten-Positionen

Sie können Plug-ins nutzen, um viele benutzerdefinierte Tasten in verscode zu injizieren, an verschiedenen Positionen. Die Standorte, die von VScode unterstützt werden, sind diesehttps://code.visualstudio.com/api/references/contribution-points#contributes.menus

Schritte zur lokalen Entwicklung von Komponenten

Die Schritte zur lokalen Entwicklung sind sehr einfach.

# 安装依赖
npm install -g yo generator-code
yo code # 新建项目

Fall 2

Nach der Installation der Abhängigkeiten öffnet das Drücken der F5 - Taste ein neues Fenster, das für das Debuggen verwendet wird. Nach der Änderung des Codes wird das Reload wirksam.

Veröffentlicht https://code.visualstudio.com/api/working-with-extensions/publishing-extension

npm install -g @vscode/vsce

vsce package

vsce login <publisher name>

vsce publish

Wenn die Bedingungen

Bei der Injektion von Schaltflächen ist manchmal eine Bedingung erforderlich, zum Beispiel, wenn eine bestimmte Art von Datei geöffnet ist, wird eine Schaltfläche angezeigt. Die Erstellung dieser Urteile sollte dem folgenden Dokument folgen. https://code.visualstudio.com/api/references/when-clause-contexts

Übersicht über das Plug-In https://code.visualstudio.com/api/extension-guides/overview

Das Schreiben von Komponenten kann mit der Geschäftslogik von VS Code API verwendet werden https://code.visualstudio.com/api/references/vscode-api#tasks.registerTaskProvider