Eine kurze Analyse des VSCode CLI-Tools, es erweist sich als sehr nützlich!

Apropos vscode CLI-Tool: Möglicherweise sind Sie damit nicht vertraut, da es in der täglichen Arbeit nicht erforderlich ist. Da einige seiner Funktionen jedoch recht praktisch sind und einige meiner jüngsten technischen Ideen einfach damit umgesetzt werden können, geht es in diesem Artikel um die praktischen Funktionen der VSCode-CLI. [Empfohlene Studie: „Vscode-Einführungs-Tutorial“]

Der Shell-Befehl der VSCode-CLI heißt code, und code wird später verwendet, um auf die VSCode-CLI zu verweisen Werkzeug. code，后面都会用code来指代VSCode CLI工具。

code实用功能

打开最近一个会话

code后面不带任何选项或参数执行，会打开VSCode最近一个会话。比如，如果你最近打开了projectA，无论现在projectA是否被其他窗口覆盖或者你已经退出VSCode，下面的命令都能快速打开projectA：

$ code

如果你正在使用shell，这个命令应该能帮助你迅速打开VSCode或者定位到刚才编辑的文件。

打开特定的项目

在这里我想问大家平时都是怎样用VSCode打开某个项目的，都是按以下步骤执行吗？

• 点击VSCode图标

• 点击菜单栏File

• 点击Open

• 在Mac的Finder里找到并打开

我就不是，我习惯了使用shell，觉得命令行操作比在Finder里查找要快。

code .命令是我平时用得最多的，它可以快速地在VSCode打开当前目录的项目。

我的所有项目都是放在一个固定的目录下，所以我只要先cd到项目目录下，再执行code .就好了。

当然，你也可以使用code <folder>的方式打开项目，效果是一样的。

跳转到文件的行列

code -g <file>:<line>:<character>命令可以快速跳转到文件某一行的某个字符。比如，下面这个命令会打开index.ts文件，光标定位到第18行，index为8的字符前面的位置。

$ code -g /project-path/src/index.ts:18:8

现在的一些dev工具比如react-dev-inspector和vue-devtools，它们能够让开发者点击DOM元素即可在VSCode打开并定位到对应的源码位置。原理都是在dev server运行的时候获取源码的位置信息并插入到DOM元素上，然后开发者点击DOM时给dev server发送位置信息，dev server再调用code的能力跳转源码。

文件对比

如果你想快速对比两个文件，可以使用以下命令：

$ code -d file-path-a file-path-b

这对习惯使用VSCode对比文件差异以及解决冲突的同学来说应该比较有用。

插件操作

这是我近期发现的最让我喜欢的功能了，包括以下几个点：

• code --list-extensions --show-versions：以<publisher>.<extensionName>@<version>的形式罗列所有已安装的插件；
• code --install-extension <ext>：安装插件，可以加上--force选项防止弹窗提示；
• code --uninstall-extension <ext>：卸载插件。

想象一下，如果让你来开发一个前端工程的脚手架，你会做哪些事情？

仿照市面上大部分的脚手架，当然会给用户提供editorConfig、eslint、prettier等代码格式相关的配置。但完成这些，脚手架只有90分。实际上，要想eslint等生效，用户还得安装相应的VSCode插件和配置settings.json。

settings.json还好说，可以在.vscode目录下创建settings.json实现团队成员间配置的共享以及覆盖本地配置，省去团队成员手动配置的麻烦和避免开发配置不一致的问题。

至于VSCode插件，一般来说，我们会让用户自己去安装或者默认他已经安装了。但对于前端小白或者新入职的同事来说，这无疑是痛苦的，也是优秀的脚手架开发者不能容忍的。这时，上面几个命令就发挥作用了。

--list-extensions查看用户是否安装了某个插件，如果没有，则使用--install-extension

praktische Funktionen codieren

Neueste Konversation öffnen

code wird ohne Optionen oder Parameter ausgeführt und die neueste Sitzung von VSCode wird geöffnet. Wenn Sie beispielsweise kürzlich projectA geöffnet haben, unabhängig davon, ob projectA von anderen Fenstern verdeckt wird oder Sie VSCode beendet haben, kann der folgende Befehl projectA code>：🎜rrreee🎜Wenn Sie eine Shell verwenden, sollte Ihnen dieser Befehl dabei helfen, VSCode schnell zu öffnen oder die gerade bearbeitete Datei zu finden. 🎜<h3 data-id="heading-2"><strong>Öffnen Sie ein bestimmtes Projekt</strong></h3>🎜Hier möchte ich Sie fragen, wie Sie normalerweise VSCode verwenden, um ein Projekt zu öffnen. Sie drücken immer „Do“. Befolgen Sie die folgenden Schritte? 🎜<ul style="list-style-type: disc;"> <li>🎜Klicken Sie auf das VSCode-Symbol🎜</li> <li>🎜Klicken Sie auf die Menüleiste Datei🎜</li> <li>🎜Klicken Sie auf Öffnen🎜</li> <li>🎜Suchen und öffnen Sie es im Mac-Finder🎜</li> </ul>🎜Nichts für mich. Ich bin es nicht gewohnt, die Shell zu verwenden, und ich denke, Befehlszeilenoperationen sind schneller als Suchen im Finder. 🎜🎜<code>code . Befehl ist der, den ich normalerweise am häufigsten verwende. Er kann das Projekt schnell im aktuellen Verzeichnis in VSCode öffnen. 🎜🎜Alle meine Projekte werden in einem festen Verzeichnis abgelegt, daher muss ich nur zuerst cd in das Projektverzeichnis wechseln und dann code . ausführen. 🎜🎜Natürlich können Sie auch code <folder> verwenden, um das Projekt zu öffnen, und der Effekt ist der gleiche. 🎜

Springe zur Zeile der Datei

🎜code -g <file>:<line>:< Zeichen&gt Der Befehl ; kann schnell zu einem bestimmten Zeichen in einer bestimmten Zeile der Datei springen. Der folgende Befehl öffnet beispielsweise die Datei index.ts und positioniert den Cursor in Zeile 18, direkt vor dem Zeichen mit index gleich 8. 🎜rrreee🎜Einige aktuelle Entwicklungstools wie react-dev-inspector 🎜 und vue-devtools🎜, die es Entwicklern ermöglichen, auf ein DOM-Element zu klicken, um es in VSCode zu öffnen und Suchen Sie den entsprechenden Quellcodespeicherort. Das Prinzip besteht darin, die Standortinformationen des Quellcodes abzurufen, wenn der Entwicklungsserver ausgeführt wird, und sie in das DOM-Element einzufügen. Wenn der Entwickler dann auf das DOM klickt, werden die Standortinformationen an den Entwicklungsserver und dann an den Entwicklungsserver gesendet Ruft die Möglichkeit auf, zum code zu springen. 🎜

Dateivergleich

🎜Wenn Sie schnell zwei Dateien vergleichen möchten, können Sie den folgenden Befehl verwenden: 🎜rrreee🎜Dieses Paar wird verwendet zur Verwendung des VSCode-Vergleichs Es sollte für Schüler nützlicher sein, die Differenzen einreichen und Konflikte lösen möchten. 🎜

Plug-in-Bedienung

🎜Dies ist meine Lieblingsfunktion, die ich kürzlich entdeckt habe, einschließlich der folgenden Punkte: 🎜

• Code - -list-extensions --show-versions: Listet alle installierten Plug-Ins im Format <publisher>.<extensionName>@<version>;
auf
• code --install-extension <ext>: Um das Plug-in zu installieren, können Sie die Option --force hinzufügen, um Popup-Eingabeaufforderungen zu verhindern;
• code --uninstall-extension <ext>: Deinstallieren Sie das Plug-in.

🎜Stellen Sie sich vor, Sie würden gebeten, ein Front-End-Engineering-Gerüst zu entwickeln, was würden Sie tun? 🎜🎜Es imitiert die meisten Gerüste auf dem Markt und bietet Benutzern natürlich Konfigurationen im Zusammenhang mit Codeformaten wie editorConfig, eslint, prettier usw. Nach Abschluss dieser Punkte erhält das Gerüst jedoch nur noch 90 Punkte. Damit eslint wirksam wird, müssen Benutzer das entsprechende VSCode-Plug-in installieren und settings.json konfigurieren. 🎜🎜settings.json Glücklicherweise können Sie settings.json im Verzeichnis .vscode erstellen, um Konfigurationen zwischen Teammitgliedern zu teilen und lokale Konfigurationen zu überschreiben. Sie ersparen den Teammitgliedern die Mühe einer manuellen Konfiguration und vermeiden das Problem inkonsistenter Entwicklungskonfigurationen. 🎜🎜Was das VSCode-Plug-in betrifft, lassen wir es im Allgemeinen von Benutzern selbst installieren, oder es ist bereits standardmäßig installiert. Für Front-End-Neulinge oder neue Kollegen ist dies jedoch zweifellos schmerzhaft und für hervorragende Gerüstentwickler unerträglich. Zu diesem Zeitpunkt kommen die oben genannten Befehle ins Spiel. 🎜🎜--list-extensions Überprüfen Sie, ob der Benutzer ein Plug-in installiert hat. Wenn nicht, verwenden Sie --install-extension, um es zu installieren. 🎜

Es ist vorstellbar, dass das Gerüst mithilfe der oben genannten Befehle zum Betreiben des Plug-Ins in Kombination mit .vscode Benutzern dabei helfen kann, die Entwicklungsumgebung völlig sinnlos zu konfigurieren und sicherzustellen, dass jeder Wenn das Team die gleiche Konfiguration hat, müssen Sie sich keine Sorgen machen, dass eines Tages ein neuer Kollege vorbeikommt und sagt, dass sein Eslint keine Wirkung zeigt. .vscode，脚手架可以完全无感地帮用户配置好开发环境，并且能够保证团队里每个人的配置都是一样的，不用担心突然有一天某个新同事跑过来说他的eslint不生效。

注意：插件操作相关的命令权力有点大，要小心使用。

code的安装

有的同学可能会说，要使code生效，不得手动将code命令安装到全局环境变量PATH上吗？

在Mac上是这样的，但我们也能通过/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code这个路径直接调用code。

对于Windows、Linux系统，VSCode安装时code就会自动添加到PATH，可以直接调用code。

所以，脚手架可以做一定的封装，避免用户手动添加环境变量。

总结

这篇文章只介绍了VSCode CLI的一些我认为比较实用的功能，其他的诸如切换语言、性能监控等功能并没有介绍，大家可以通过文末资料里的链接跳转官网去查看。

最近我在简单封装code

Hinweis: Die Befehle im Zusammenhang mit Plug-In-Vorgängen sind etwas leistungsstark, daher sollten Sie sie mit Vorsicht verwenden.

Code-Installation

Einige Schüler sagen möglicherweise, dass Sie Code effektiv machen müssen. Sollten Sie den Befehl code nicht manuell in der globalen Umgebungsvariablen PATH installieren?

Das ist auf dem Mac so, aber wir können codeauch direkt über den Pfad /Applications/Visual Studio Code.app/Contents/Resources/app/bin/code aufrufen >.
Für Windows- und Linux-Systeme wird code automatisch zu PATH hinzugefügt, wenn VSCode installiert wird, und code kann direkt aufgerufen werden.

🎜So kann das Gerüst bis zu einem gewissen Grad gekapselt werden, um zu verhindern, dass Benutzer Umgebungsvariablen manuell hinzufügen. 🎜

Zusammenfassung

🎜In diesem Artikel werden nur einige meiner Meinung nach praktischere Funktionen der VSCode-CLI vorgestellt Leistungsüberwachung und andere Funktionen werden nicht vorgestellt. Sie können über den Link in den Informationen am Ende des Artikels zur offiziellen Website springen, um sie anzusehen. 🎜🎜Vor kurzem habe ich einfach code-bezogene Befehle gekapselt, in der Hoffnung, eine Reihe grundlegender Funktionen bereitzustellen, die von anderen Knotenprojekten direkt aufgerufen werden können. Die Projektadresse lautet: 🎜github.com/avennn/. vsc-…🎜, willkommen Jeder nutzt und pr. Wenn Sie es gut finden, können Sie ihm gerne einen Stern geben. 🎜🎜Weitere Informationen zu VSCode finden Sie unter: 🎜vscode-Tutorial🎜! 🎜🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des VSCode CLI-Tools, es erweist sich als sehr nützlich!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!