淺析VSCode CLI工具,原來它這么有用!

淺析VSCode CLI工具,原來它這么有用!

說到vscode CLI工具,可能大家比較陌生,因為在日常工作中它不是必須的。但鑒于它有些功能還比較實用,并且最近我在技術上的一些想法剛好可以借助它來實現,所以這篇文章就來聊聊vscode CLI那些實用的功能?!就扑]學習:《vscode》】

VSCode CLI的shell命令叫做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 的方式打開項目,效果是一樣的。

跳轉到文件的行列

code -g ::命令可以快速跳轉到文件某一行的某個字符。比如,下面這個命令會打開index.ts文件,光標定位到第18行,index為8的字符前面的位置。

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

現在的一些dev工具比如vscodevscode,它們能夠讓開發者點擊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:以.@的形式羅列所有已安裝的插件;
  • code –install-extension :安裝插件,可以加上–force選項防止彈窗提示;
  • code –uninstall-extension :卸載插件。

想象一下,如果讓你來開發一個前端工程的腳手架,你會做哪些事情?

仿照市面上大部分的腳手架,當然會給用戶提供editorConfig、eslint、prettier等代碼格式相關的配置。但完成這些,腳手架只有90分。實際上,要想eslint等生效,用戶還得安裝相應的VSCode插件和配置settings.json

settings.json還好說,可以在.vscode目錄下創建settings.json實現團隊成員間配置的共享以及覆蓋本地配置,省去團隊成員手動配置的麻煩和避免開發配置不一致的問題。

至于VSCode插件,一般來說,我們會讓用戶自己去安裝或者默認他已經安裝了。但對于前端小白或者新入職的同事來說,這無疑是痛苦的,也是優秀的腳手架開發者不能容忍的。這時,上面幾個命令就發揮作用了。

–list-extensions查看用戶是否安裝了某個插件,如果沒有,則使用–install-extension安裝。

可以想象,借助上面幾個操作插件的命令,配合.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相關的命令,希望提供一套基礎的能力給其他node工程直接調用,項目地址在:vscode,歡迎大家使用和pr。如果覺得還不錯的話,也歡迎給個star。

更多關于VSCode的相關知識,請訪問:vscode!

? 版權聲明
THE END
喜歡就支持一下吧
點贊5 分享