Einige häufig verwendete Plug-Ins und Tastenkombinationen in VSCode können Ihnen dabei helfen, die Entwicklungseffizienz zu verbessern! !

In diesem Artikel werden einige häufig verwendete Plug-Ins und Tastenkombinationen in VSCode vorgestellt, die Ihnen dabei helfen, die Effizienz der Softwareentwicklung erheblich zu verbessern. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

VS Code ist ein plattformübergreifendes Open-Source-Entwicklungstool und der bequemste Editor, den ich derzeit verwende. In diesem Artikel werden einige häufig verwendete Plug-Ins und Tastenkombinationen vorgestellt, die Ihnen dabei helfen, die Effizienz der Softwareentwicklung erheblich zu verbessern und Ihnen mehr Zeit für Eisen und Mädchen zu geben. [Empfohlenes Lernen: „vscode-Tutorial“]

Erste Einführung in VS Code

Stellen wir es zunächst auf die offizielle Website:

https://code.visualstudio.com/

Der vollständige Name von VSCode ist Visual Studio Code. Allein dem Namen nach zu urteilen, könnten einige Leute zunächst VSCode mit Visual Studio verwechseln. Beide sind Produkte von Microsofts Vaterunternehmen, und letzteres ist seit langem berühmt und steht seit langem an der Spitze Damit der neue Sohn von VSCode mit der Popularität mithalten kann, habe ich ihm einen ähnlichen Namen gegeben, genau wie Javascript für Java.

Es ist keine Übertreibung zu sagen, dass VSCode erst vor 4 Jahren geboren wurde. Im Vergleich zu den großen Herausgebern mit einer langen Geschichte ist es nur ein jüngerer Bruder. Aber in den letzten ein bis zwei Jahren ist es schnell gewachsen und sein Marktanteil ist weit vor anderen Editoren in die Höhe geschossen. Sublime Text ist rapide zurückgegangen, Atom war lauwarm und WebStorm verzeichnete aufgrund der Gebühren eine geringe Inlandsnutzung Aufgrund der hohen Lernkosten zieht sich Vim allmählich aus der historischen Phase zurück. Wenn Sie von einem anderen Editor zu VS Code wechseln, brauchen Sie sich keine Sorgen zu machen. Es bietet das entsprechende Keymap-Plugin, das Ihre Tastatureinstellungen migrieren kann und Ihnen den schnellen Einstieg erleichtert, ohne dass Sie Zeit für die Anpassung an die Tastenkombination aufwenden müssen Schlüssel.

Und es bietet gute Unterstützung für jede Sprache. Es bündelt die für die Entwicklung erforderlichen Erweiterungen. Grundsätzlich können Sie gute Unterstützung erhalten, indem Sie während der Entwicklung das entsprechende Erweiterungspaket herunterladen.

Microsofts Definition von VSCode lautet: kostenlos, Open Source und plattformübergreifend. Den Code-Editor neu definieren. In Verbindung mit der Übernahme von Github durch Microsoft im letzten Jahr zeigt dies alles, dass Microsoft immer mehr Versuche im Bereich Open Source unternommen hat.

Open Source ist für die langfristige Entwicklung eines Produkts äußerst wichtig. Unter den vier Editoren ist Sublime Closed Source, VS Code, Vim und Atom sind alle Open Source und VS Code kann als die beste Open Source bezeichnet werden.

VS-Code ist mehr als nur Open-Source-Code. Stattdessen basiert der gesamte Produktentwicklungsprozess auf Open Source, intensiver Zusammenarbeit mit der gesamten Community und dem Anhören von Benutzerfeedback auf GitHub, um VS Code immer besser zu machen:

Jedes Jahr wird das VS Code-Team auf dem veröffentlichen GitHub Wiki Roadmap, ein Plan für das ganze Jahr.

Zu Beginn jedes Monats, während der Produktdesignphase, veröffentlicht das VS Code-Team einen Iterationsplan auf GitHub Issue, in dem alle Features aufgelistet sind, die in diesem Monat durchgeführt werden Sehen Sie sich die Details des Designs und des Modells an und Sie können Ihre eigene Meinung äußern.

Am Ende jedes Monats, wenn die Produktveröffentlichung näher rückt, können Sie Endgame auf GitHub sehen und erfahren, wie VS Code Produkttests und -veröffentlichungen durchführt.

Nicht nur der Code ist Open Source, auch die gesamte Produktplanung, das Design und das Release-Management von VS Code sind „Open Source“: Jede Phase ist für jeden Benutzer offen und transparent. Sie können nicht nur Vorgänge öffnen und PRs senden Nehmen Sie sogar an der Gestaltung und Diskussion jedes Features teil!

In der Branche gab es eine Kontroverse über VSCode – handelt es sich um eine IDE? Für Visual Studio definiert Microsoft es direkt als die beste IDE ihrer Art, während Microsoft es für VSCode derzeit nur als Code-Editor definiert.

Visual Studio Code ist ein leichter, aber leistungsstarker Quellcode-Editor

Um dieses Problem zu lösen, müssen wir zunächst ein Konzept verstehen: Was ist eine IDE? Der vollständige Name lautet „Integrierte Entwicklungsumgebung“, was wörtlich „Integrierte Entwicklungsumgebung“ bedeutet. Dies bedeutet, dass einige der im Entwicklungsprozess verwendeten Hauptaktivitäten und Tools in eine Entwicklungsumgebung integriert sind, sodass wir Code in einem Programm schreiben und Code debuggen können , Ausführen von Befehlszeilen-, Versionskontroll- und anderen Entwicklungsprozessen.

Derzeit verfügt VSCode über eine starke API-Unterstützung und kann grundsätzlich IDE implementieren. Wir verwenden es zum Schreiben von Code, zum schnellen Ausführen der Befehlszeile mit dem integrierten Terminal, zum Herunterladen des Debug-Plug-Ins, zum Festlegen von Haltepunkten und zum einfachen Debuggen des Codes. Verwenden Sie das integrierte Git zur Versionskontrolle und verwalten Sie den Quellcode einfach. Unabhängig von der Sprache können Sie die entsprechende Plug-in-Sammlung herunterladen, verpacken und in einem Schritt installieren, und der gesamte Entwicklungsprozess kann in diesem einen Tool abgeschlossen werden. Dies definiert die Entwicklerumfrage 2018 von In Stack Overflow wirklich neu. VS Code ist zum beliebtesten Entwicklungstool geworden.

Grundlegende Plug-ins

In diesem Abschnitt werden einige Entwicklungs-Plug-ins vorgestellt, die unbedingt installiert werden müssen, damit Sie die Effizienz Ihrer Codebearbeitung deutlich verbessern können.

VS Code verfügt über ein reichhaltiges und schnell wachsendes Plug-in-Ökosystem. Heute gibt es mehr als 10.000 Plug-ins. Es gibt nicht nur einen zentralisierten Plug-in-Markt, sondern Sie können auch ganz einfach im VS-Code-Editor nach Plug-ins suchen und diese direkt installieren und verwalten. Im Vergleich dazu verfügt Sublime über weniger als 5.000 Plug-Ins, und es ist nicht einfach, Plug-Ins im Editor zu suchen und zu verwalten. Obwohl Vim über viele Plug-Ins verfügt, ist es schwierig, Plug-Ins zu finden, da es kein zentrales Plug-In gibt -In-Markt; Atom verfügt über mehr als 8.000 Plug-Ins. Obwohl Plug-Ins auch im Editor zu finden sind, sind die Such- und Suchfunktionen von VS Code besser.

Chinesisches (vereinfachtes) Sprachpaket für Visual Stidio Code Chinesisches Sprachpaket

Für einige Freunde, die nicht sehr gut Englisch können, ist das erste, was sie tun müssen, nach der Installation des chinesischen Sprachpakets zur chinesischen Sprachumgebung zu wechseln Plug-In, drücken Sie die Tastenkombination Strg+Umschalt+P, um das Befehlsfeld aufzurufen, geben Sie „Anzeigesprache konfigurieren“ ein, wählen Sie „zh-ch“ und starten Sie dann vs Code neu.

Open-in-Browser-Ansicht im Browser

VS-Code bietet keine integrierte Funktionalität, um Programme direkt im Browser auszuführen, daher müssen wir dieses Plug-in installieren, um die Ausführung unserer Programme anzuzeigen der Browser-Effekt.

Live-Server-Echtzeitvorschau

Nach der Installation dieses Plug-Ins ändern wir den Code im Editor und drücken zum Speichern die geänderten Effekte in Echtzeit synchronisiert und angezeigt Browser, keine manuelle Aktualisierung erforderlich.

Tag automatisch schließen Generieren Sie automatisch ein geschlossenes Tag, wenn Sie den Tag-Namen eingeben, was besonders praktisch ist.

Tag automatisch umbenennen Das geschlossene End-Tag wird synchron geändert

Gepaarte Tags automatisch erkennen und synchron ändern.

Bracket Pair Colorizer hebt passende Klammern in verschiedenen Farben hervor.

Farblich gepaarte Klammern zur einfachen Unterscheidung sind die Klammern einheitlich weiß.

Übereinstimmendes Tag hervorheben Markieren Sie passende Tags

Dieses Plug-in hilft uns automatisch, die ausgewählten passenden Tags hervorzuheben, sodass wir nicht mehr lange suchen müssen.

Vscode-icons VSCode-Dateisymbole

Dieses Plug-in kann uns helfen, entsprechende Symbole für verschiedene Dateitypen zu generieren, sodass wir Dateitypen direkt anhand der Symbole unterscheiden können, wenn wir die Dateiliste in der Seitenleiste anzeigen .

Freunde, die einen Mac verwenden, können Vscode-icons-mac herunterladen. Die grundlegenden Symbole ähneln Vscode-icons, aber der Ordner übernimmt den Mac-Stil.

TODO-Hervorhebung

Wenn wir beim Schreiben von Code irgendwo eine Markierung setzen und den Inhalt später verbessern oder ändern möchten, können wir ihn mit diesem Plug-in hervorheben, was uns später dabei helfen kann, die erforderlichen Änderungen schnell zu finden Codezeilen erstellt werden.

Code-Rechtschreibprüfung Word-Rechtschreibprüfung

Wenn wir Code schreiben, machen wir oft versehentlich Rechtschreibfehler, die dazu führen, dass die Software nicht funktioniert. Nach der Installation dieses Plug-Ins hilft es uns automatisch, Rechtschreibfehler zu erkennen Das Geben von Änderungsvorschlägen trägt wesentlich dazu bei, den Druck bei der Fehlersuche zu verringern.

... -in kann den Code der entsprechenden Sprache direkt ausführen, was sich sehr gut zum Erlernen oder Testen verschiedener Entwicklungssprachen eignet. Klicken Sie direkt mit der rechten Maustaste und wählen Sie „Code ausführen“. Es unterstützt eine große Anzahl von Sprachen, einschließlich Node.

Improt Cost Kostentipp

Dieses Plug-in kann Sie beim Importieren des Toolpakets nach der Größe des Pakets fragen. Wenn das Volumen zu groß ist, müssen Sie zur Vorbereitung eine Komprimierung des Pakets in Betracht ziehen später Online-Optimierung.

GitLens Git-Informationen anzeigen

Bewegen Sie den Cursor auf die Codezeile, um die neuesten Commit-Informationen und den Autor der aktuellen Zeile anzuzeigen. Dies ist sehr nützlich, wenn mehreren Personen die Verantwortung zugewiesen wird an jede Person, um zu verhindern, dass der Topf weggeworfen wird.

Lesezeichen

Setzen Sie ein Lesezeichen für den Code und springen Sie über Tastenkombinationen schnell zur Lesezeichenposition.

Spezifische Tastenkombinationen können in den Tastaturkürzeln angepasst werden:

Erweiterungs-Plug-Ins

In diesem Teil werden hauptsächlich einige Plug-Ins für bestimmte Entwicklungsumgebungen vorgestellt

Vscode-element-helper

Wer die Element-UI-Bibliothek verwendet, kann dieses Plug-In installieren, das beim Schreiben von Tags automatisch den Element-Tag-Namen auffordert.

Version Versionsinformationen zum Lens-Tool-Paket

Zeigt die Versionsinformationen des npm-Tool-Pakets an, das Sie heruntergeladen und in package.json installiert haben, und informiert Sie auch über die neueste Version des aktuellen Pakets.

Vetur VUE-Sprachpaket

VUE ist heutzutage eines der beliebtesten js-Frameworks, die sich dafür entscheiden, Produkte auf Basis von VUE zu entwickeln.

Vor der Installation des Plug-Ins war der Code beim Schreiben einer Datei mit dem Suffix .vue weiß

Schreiben Sie nach der Installation des Plug-Ins die Vue-Datei und geben Sie s ein um die Vorlage automatisch zu vervollständigen.

WakaTime berechnet die Code-Arbeitslast

Dies ist ein Zeiterfassungstool, mit dem Sie effektive Programmierzeit in vs-Code aufzeichnen können.

Und die Daten werden in Form eines Liniendiagramms angezeigt, um Ihnen den Arbeitstrend innerhalb einer Woche zu zeigen. Ich habe höchstens 12 Stunden am Tag programmiert und Bemühungen.

Gleichzeitig wird auf seiner offiziellen Website auch der Zeitanteil, den Sie mit dem Schreiben jeder Sprache verbringen, sowie der Zeitanteil, den Sie mit jedem Projekt verbringen, in Form eines Fächerdiagramms angezeigt ist ein sehr guter Datenbericht. Wenn das Projekt endet, können Sie im Dashboard deutlich sehen, wie Ihre Zeit zugewiesen ist.

Einstellungen VSCode-Einstellungen mit Gist synchronisieren

Manchmal kommen wir in ein neues Unternehmen oder wechseln einen neuen Computer und müssen eine neue Entwicklungsumgebung konfigurieren. Derzeit ist es sehr mühsam, Plug-Ins herunterzuladen um eins und konfigurieren Sie den vs-Code dann möglicherweise nicht vollständig. Mit diesem Plug-in können wir die Konfiguration im aktuellen vs-Code in Gist hochladen und sie dann über Gist herunterladen, um alle Konfigurationen mit der neuen Umgebung zu synchronisieren.

Klicken Sie auf der Github-Startseite auf den Avatar und wählen Sie Einstellungen, um die Einstellungsseite aufzurufen.

Klicken Sie in der linken Seitenleiste auf Entwicklereinstellungen, um die Entwicklereinstellungen einzugeben.

Wählen Sie Persönliche Zugriffstokens aus und klicken Sie rechts auf Neues Token generieren.

Geben Sie den Token-Namen ein und überprüfen Sie das Wesentliche unten.

Klicken Sie unten auf die Schaltfläche „Token generieren“, um ein neues Token zu generieren.

Speichern Sie den generierten neuen Token.

Installieren Sie das Settings Sync-Plug-in in vscode, geben Sie Strg+Umschalt+p ein, um Sync aufzurufen, und wählen Sie Konfiguration aktualisieren/hochladen.

Geben Sie das in Github generierte Token ein und klicken Sie auf Enter.

Eine Reihe von IDs wird automatisch in der Konsole generiert, und dann kann die Konfiguration über Token und ID synchronisiert werden.

Geben Sie Strg+Umschalt+p ein, um die Synchronisierung aufzurufen, wählen Sie die Download-Konfiguration aus, geben Sie Token und ID ein, um den Download synchron durchzuführen.

Die in diesem Artikel vorgestellte vs-Codekonfiguration wurde vollständig mit Gist synchronisiert. Freunde in Not können sie herunterladen.

token:b3c5f29c0e6f9f49b23b44ce89467226cd91c9c6

Id:338d5dfb6b7784c980250cffe8365899

Sie können wählen, ob in der Konfigurationsdatei automatisch hochgeladen und heruntergeladen werden soll

"sync.removeExtensions": true,
      "sync.syncExtensions": true,
      "sync.autoDownload": true,
      "sync.autoUpload": true,
      "sync.gist": "338d5dfb6b7784c980250cffe8365899"

Farbthema

Als Programmierer verbringe ich den größten Teil meines Tages damit, vor dem Computer zu sitzen und Code einzugeben, und muss mich mit dem befassen Editor für eine lange Zeit Die Wahl eines gut aussehenden Farbthemas für unseren vscode kann das Vergnügen beim Schreiben von Code erheblich verbessern. Um die Augen zu schützen, finden Sie hier ein Installationspaket für dunkle Themen, das die folgenden Skins enthält.

Meine persönlichen Favoriten sind die folgenden zwei dunklen Themen, die Sie im Allgemeinen verwenden und die Sie nicht hin und her ändern können. Wählen Sie also einfach eines aus, das für Sie angenehm ist.

Dracula Offizielles Vampir-Theme (das, das ich derzeit verwende)

One Dark Pro

常用快捷键

编辑器与窗口管理

Ctrl+Shift+P: 打开命令面板。

Ctrl+Shift+N: 新建窗口。

Ctrl+Shift+W: 关闭窗口。

切分窗口：Ctrl+1/Ctrl+3/Ctrl+3

Ctrl+H：最小化窗口

Ctrl+B：显示/隐藏侧边栏

Ctrl+"+/-"：放大/缩小界面

文件操作

Ctrl+N：新建文件

Ctrl+W：关闭文件

Ctrl+Tab：文件切换

格式调整

Ctrl+C/Ctrl+V：复制或剪切当前行/当前选中内容

Alt+Up/Down：向上/下移动一行

Shift+Alt+Up//Down：向上/下复制一行

Ctrl+Delete：删除当前行

Shift+Alt+Left/Right：从光标开始向左/右选择内容

代码编辑

Ctrl+D：选中下一个相同内容

Ctrl+Shift+L：选中所有相同内容

Ctrl+F：查找内容

Ctrl+Shit+F：在整个文件夹中查找内容

常用设置

我们可以在settings.json中手动进行一些设置，让我们的编辑器更好用。

关闭标签介绍信息

我们在编写代码的时候鼠标移动到某个标签上，经常会自动弹出一些介绍信息，挡住部分代码，给我们的阅读带来了很大的困难，一直没有找到关闭它的方法，目前可以通过设置时间延迟暂时实现这个效果，我设置的5000毫秒，你可以设置的更大一些，基本上它就不会弹出来了。

"editor.hover.delay": 5000

自动折行

设置代码根据编辑器窗口大小自动折行

"editor.wordWrap": "on"

字体设置

      // 一款适合代码显示的字体包（需要将字体包下载到本地）
      "editor.fontFamily": "Source Code Pro, 'Source Code Pro'",
      // 设置代码字体大小
      "editor.fontSize": 15,

自动保存

目前有四个选项：

• off：关闭自动保存。
• afterDelay：当文件修改后的时间超过"Files：Auto Save Delay"中配置的值时自动进行保存。
• onFocusChange：编辑器失去焦点时自动保存更新后的文件。
• onWindowChange：窗口失去焦点时自动保存更新后的文件。

"files.autoSave": "off"

关闭代码提示

"editor.quickSuggestions": { "other": false, "comments": false, "strings": false }

更多编程相关知识，请访问：编程教学！！

Das obige ist der detaillierte Inhalt vonEinige häufig verwendete Plug-Ins und Tastenkombinationen in VSCode können Ihnen dabei helfen, die Entwicklungseffizienz zu verbessern! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!