說到vscode CLI工具,可能大家比較陌生,因為在日常工作中它不是必須的。但鑑於它有些功能還比較實用,並且最近我在技術上的一些想法剛好可以藉助它來實現,所以這篇文章就來聊聊VSCode CLI那些實用的功能。 【推薦學習:《vscode入門教學》】
VSCode CLI的shell指令叫做code
#,後面都會用code
來指VSCode CLI工具。
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
選項防止彈窗提示;:卸載外掛程式。
settings.json。
settings.json還好說,可以在
.vscode目錄下創建
settings.json實現團隊成員間配置的共享以及覆蓋本地配置,省去團隊成員手動配置的麻煩和避免開發配置不一致的問題。
--list-extensions查看使用者是否安裝了某個插件,如果沒有,則使用
--install-extension安裝。
可以想像,借助上面幾個操作插件的命令,配合.vscode
,腳手架可以完全無感地幫用戶配置好開發環境,並且能夠保證團隊裡每個人的配置都是一樣的,不用擔心突然有一天某個新同事跑過來說他的eslint不生效。
注意:插件操作相關的命令權力有點大,要小心使用。
有的同學可能會說,要使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工程直接調用,項目地址在:github.com/avennn/vsc -…,歡迎大家使用和pr。如果覺得還不錯的話,也歡迎給star。
更多關於VSCode的相關知識,請造訪:vscode教學!
以上是淺析VSCode CLI工具,原來它這麼有用!的詳細內容。更多資訊請關注PHP中文網其他相關文章!