淺析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 <folder></folder>的方式來開啟項目，效果是一樣的。

跳到檔案的行列

code -g <file>:<line>:<character></character></line></file>指令可以快速跳到文件某一行的某個字元。例如，下面這個指令會開啟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></version></extensionname></publisher>的形式羅列所有已安裝的插件；
• # code --install-extension <ext></ext>：安裝插件，可以加上--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工程直接調用，項目地址在：github.com/avennn/vsc -…，歡迎大家使用和pr。如果覺得還不錯的話，也歡迎給star。

更多關於VSCode的相關知識，請造訪：vscode教學！

以上是淺析VSCode CLI工具，原來它這麼有用！的詳細內容。更多資訊請關注PHP中文網其他相關文章！