首頁 > 開發工具 > VSCode > 主體

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

青灯夜游
發布: 2022-10-08 11:00:50
轉載
2700 人瀏覽過

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

跳到檔案的行列

code -g <file>:<line>:<character>指令可以快速跳到文件某一行的某個字元。例如,下面這個指令會開啟index.ts文件,遊標定位到第18行,index為8的字元前面的位置。

$ code -g /project-path/src/index.ts:18:8
登入後複製

現在的一些dev工具例如react-dev-inspectorvue-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 :卸載外掛程式。
想像一下,如果讓你來開發一個前端工程的鷹架,你會做哪些事情?

仿照市面上大部分的鷹架,當然會給用戶提供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中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板