前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)

說(shuō)到VSCode CLI工具，可能大家比較陌生，因?yàn)樵谌粘９ぷ髦兴皇潜仨毜摹５b于它有些功能還比較實(shí)用，并且最近我在技術(shù)上的一些想法剛好可以借助它來(lái)實(shí)現(xiàn)，所以這篇文章就來(lái)聊聊VSCode CLI那些實(shí)用的功能。【推薦學(xué)習(xí)：《vscode入門教程》】

VSCode CLI的shell命令叫做code，后面都會(huì)用code來(lái)指代VSCode CLI工具。

code實(shí)用功能

打開(kāi)最近一個(gè)會(huì)話

code后面不帶任何選項(xiàng)或參數(shù)執(zhí)行，會(huì)打開(kāi)VSCode最近一個(gè)會(huì)話。比如，如果你最近打開(kāi)了projectA，無(wú)論現(xiàn)在projectA是否被其他窗口覆蓋或者你已經(jīng)退出VSCode，下面的命令都能快速打開(kāi)projectA：

$ code

如果你正在使用shell，這個(gè)命令應(yīng)該能幫助你迅速打開(kāi)VSCode或者定位到剛才編輯的文件。

打開(kāi)特定的項(xiàng)目

在這里我想問(wèn)大家平時(shí)都是怎樣用VSCode打開(kāi)某個(gè)項(xiàng)目的，都是按以下步驟執(zhí)行嗎？

• 點(diǎn)擊VSCode圖標(biāo)

• 點(diǎn)擊菜單欄File

• 點(diǎn)擊Open

• 在Mac的Finder里找到并打開(kāi)

我就不是，我習(xí)慣了使用shell，覺(jué)得命令行操作比在Finder里查找要快。

code .命令是我平時(shí)用得最多的，它可以快速地在VSCode打開(kāi)當(dāng)前目錄的項(xiàng)目。

我的所有項(xiàng)目都是放在一個(gè)固定的目錄下，所以我只要先cd到項(xiàng)目目錄下，再執(zhí)行code .就好了。

當(dāng)然，你也可以使用code <folder>的方式打開(kāi)項(xiàng)目，效果是一樣的。

跳轉(zhuǎn)到文件的行列

code -g <file>:<line>:<character>命令可以快速跳轉(zhuǎn)到文件某一行的某個(gè)字符。比如，下面這個(gè)命令會(huì)打開(kāi)index.ts文件，光標(biāo)定位到第18行，index為8的字符前面的位置。

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

現(xiàn)在的一些dev工具比如react-dev-inspector和vue-devtools，它們能夠讓開(kāi)發(fā)者點(diǎn)擊DOM元素即可在VSCode打開(kāi)并定位到對(duì)應(yīng)的源碼位置。原理都是在dev server運(yùn)行的時(shí)候獲取源碼的位置信息并插入到DOM元素上，然后開(kāi)發(fā)者點(diǎn)擊DOM時(shí)給dev server發(fā)送位置信息，dev server再調(diào)用code的能力跳轉(zhuǎn)源碼。

文件對(duì)比

如果你想快速對(duì)比兩個(gè)文件，可以使用以下命令：

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

這對(duì)習(xí)慣使用VSCode對(duì)比文件差異以及解決沖突的同學(xué)來(lái)說(shuō)應(yīng)該比較有用。

插件操作

這是我近期發(fā)現(xiàn)的最讓我喜歡的功能了，包括以下幾個(gè)點(diǎn)：

• code --list-extensions --show-versions：以<publisher>.<extensionName>@<version>的形式羅列所有已安裝的插件；
• code --install-extension <ext>：安裝插件，可以加上--force選項(xiàng)防止彈窗提示；
• code --uninstall-extension <ext>：卸載插件。

想象一下，如果讓你來(lái)開(kāi)發(fā)一個(gè)前端工程的腳手架，你會(huì)做哪些事情？

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

settings.json還好說(shuō)，可以在.vscode目錄下創(chuàng)建settings.json實(shí)現(xiàn)團(tuán)隊(duì)成員間配置的共享以及覆蓋本地配置，省去團(tuán)隊(duì)成員手動(dòng)配置的麻煩和避免開(kāi)發(fā)配置不一致的問(wèn)題。

至于VSCode插件，一般來(lái)說(shuō)，我們會(huì)讓用戶自己去安裝或者默認(rèn)他已經(jīng)安裝了。但對(duì)于前端小白或者新入職的同事來(lái)說(shuō)，這無(wú)疑是痛苦的，也是優(yōu)秀的腳手架開(kāi)發(fā)者不能容忍的。這時(shí)，上面幾個(gè)命令就發(fā)揮作用了。

--list-extensions查看用戶是否安裝了某個(gè)插件，如果沒(méi)有，則使用--install-extension安裝。

可以想象，借助上面幾個(gè)操作插件的命令，配合.vscode，腳手架可以完全無(wú)感地幫用戶配置好開(kāi)發(fā)環(huán)境，并且能夠保證團(tuán)隊(duì)里每個(gè)人的配置都是一樣的，不用擔(dān)心突然有一天某個(gè)新同事跑過(guò)來(lái)說(shuō)他的eslint不生效。

注意：插件操作相關(guān)的命令權(quán)力有點(diǎn)大，要小心使用。

code的安裝

有的同學(xué)可能會(huì)說(shuō)，要使code生效，不得手動(dòng)將code命令安裝到全局環(huán)境變量PATH上嗎？

在Mac上是這樣的，但我們也能通過(guò)/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code這個(gè)路徑直接調(diào)用code。

對(duì)于Windows、Linux系統(tǒng)，VSCode安裝時(shí)code就會(huì)自動(dòng)添加到PATH，可以直接調(diào)用code。

所以，腳手架可以做一定的封裝，避免用戶手動(dòng)添加環(huán)境變量。

總結(jié)

這篇文章只介紹了VSCode CLI的一些我認(rèn)為比較實(shí)用的功能，其他的諸如切換語(yǔ)言、性能監(jiān)控等功能并沒(méi)有介紹，大家可以通過(guò)文末資料里的鏈接跳轉(zhuǎn)官網(wǎng)去查看。

最近我在簡(jiǎn)單封裝code相關(guān)的命令，希望提供一套基礎(chǔ)的能力給其他node工程直接調(diào)用，項(xiàng)目地址在：github.com/avennn/vsc-…，歡迎大家使用和pr。如果覺(jué)得還不錯(cuò)的話，也歡迎給個(gè)star。