建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
前言
歡迎來(lái)到 vscode 的世界，開(kāi)發(fā)工具有很多，找準(zhǔn)自己的需求，才能找到合適的工具，而不是“手里有錘子，看啥都像釘子”;對(duì) VSCode 而言，定位在于編輯器而非 IDE，IDE 側(cè)重開(kāi)箱即用，因而體量龐大，如 Eclipse。
我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、耿馬ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的耿馬網(wǎng)站制作公司
而編輯器側(cè)重對(duì)語(yǔ)言和工作流的豐富支持與自由，因而更為輕量，這意味著它不會(huì)針對(duì)某個(gè)語(yǔ)言或某個(gè)方面為用戶(hù)做太多事情，但也意味著 TA 有很高的自由度，如插件機(jī)制、倉(cāng)庫(kù)配置機(jī)制等等，本文專(zhuān)注倉(cāng)庫(kù)配置分享，插件機(jī)制另起一文。
配置概述
VS Code 是基于文件夾來(lái)進(jìn)行管理的，但 VS Code 允許你創(chuàng)建幾個(gè)跟當(dāng)前文件夾或者跟項(xiàng)目有關(guān)的配置保存在這個(gè)文件夾中，便于團(tuán)隊(duì)內(nèi)部進(jìn)行共享。這個(gè)文件夾就是.vscode。
這個(gè)文件夾中可以包含以下幾種文件。
配置文件(settings.json)
只有當(dāng)前這個(gè)文件夾在 VS Code 中被打開(kāi)時(shí)才會(huì)生效。和我們說(shuō)的修改用戶(hù)設(shè)置是一樣的。
任務(wù)設(shè)置(tasks.json)
關(guān)于 VS Code 任務(wù)系統(tǒng)的配置文件。
調(diào)試設(shè)置(launch.json)
用于說(shuō)明如何調(diào)試當(dāng)前文件夾下的代碼。
vscode 倉(cāng)庫(kù)配置之配置文件(settings)
作為編輯器，自然需要考慮個(gè)人偏好設(shè)置和多人開(kāi)發(fā)時(shí)項(xiàng)目風(fēng)格統(tǒng)一問(wèn)題，諸如字體大小、換行符、自動(dòng)格式化插件配置等等，在 VSCode 中對(duì)應(yīng)功能是setting.json配置。
配置方式
基礎(chǔ)信息
User Settings ：用戶(hù)設(shè)置，為默認(rèn)配置，會(huì)關(guān)聯(lián)所有項(xiàng)目，權(quán)重低于工作區(qū)設(shè)置。
Workspace Settings：工作區(qū)設(shè)置，為項(xiàng)目配置，默認(rèn)沒(méi)有，可以自行在項(xiàng)目根路徑下創(chuàng)建，項(xiàng)目路徑/.vscode/settings.json。
用戶(hù)設(shè)置入口：使用 UI 設(shè)置界面
使用 Ctrl+,(mac 是 cmd+,) 或者點(diǎn)擊左下角齒輪圖標(biāo)并選擇設(shè)置。然后在文本編輯器中找到 settings.json。
用戶(hù)設(shè)置入口：使用命令面板
使用 Ctrl+Shift+P (mac 是 cmd+shift+P)或者點(diǎn)擊左下角齒輪圖標(biāo)，選擇命令面板。然后輸入 settings。
- Open User Settings 會(huì)打開(kāi) UI 設(shè)置界面。
- Open Settings (JSON) 會(huì)打開(kāi)用戶(hù)設(shè)置 settings.json 文件。
工作區(qū)設(shè)置入口：.vscode 文件夾
在打開(kāi)文件夾或者工作區(qū)時(shí)，手動(dòng)創(chuàng)建 .vscode 文件夾，并在其中創(chuàng)建 settings.json 文件。
工作區(qū)設(shè)置入口：使用命令面板
使用 Ctrl+Shift+P (mac 是 cmd+shift+P)或者點(diǎn)擊左下角齒輪圖標(biāo)，選擇命令面板。然后輸入 settings。
- Open Workspace Settings 也會(huì)打開(kāi) UI 設(shè)置界面。
- Open Workspace Settings (JSON) 會(huì)打開(kāi)工作區(qū)設(shè)置 settings.json 文件。
配置內(nèi)容
關(guān)于所有的配置項(xiàng)可以點(diǎn)此查看相應(yīng)文檔，這里給出常見(jiàn)設(shè)置分享和搜索相關(guān)配置思路。
常見(jiàn)設(shè)置：編輯器外觀
- editor.lineNumbers：編輯器左側(cè)是否顯示行號(hào)，默認(rèn)顯示設(shè)置即可。
- editor.renderWhitespace: all：以點(diǎn)形式渲染所有空白字符(空格、制表符等)。
- editor.renderIndentGuides：縮進(jìn)參考線(xiàn)，默認(rèn)以代碼塊連接設(shè)置即可。
- editor.rulers: [120]：垂直標(biāo)尺，會(huì)在指定列號(hào)處畫(huà)上豎線(xiàn)。
- editor.minimap.enabled: false：是否顯示右側(cè)小地圖，個(gè)人喜歡關(guān)閉。
- editor.cursorBlinking/cursorStyle/cursorWidth：光標(biāo)樣式。
- editor.renderLineHighlight: 'all'：設(shè)置當(dāng)前行高亮背景，行號(hào)也會(huì)被高亮。
常見(jiàn)設(shè)置：書(shū)寫(xiě)體驗(yàn)
自定義空白符和制表符。
{
editor.detectIndentation: false, // 關(guān)閉 VS Code 的自動(dòng)檢測(cè)來(lái)控制制表符或者空格鍵的使用
editor.tabSize: 1, // 制表符對(duì)應(yīng)的空格符長(zhǎng)度
editor.insertSpaces: 1 // 空格符對(duì)應(yīng)空白長(zhǎng)度
}自動(dòng)保存。
{
editor.formatOnSave: true
}新建文件的默認(rèn)類(lèi)型。
{
files.defaultLanguage: 'markdown'
}搜索相關(guān)配置思路
沒(méi)啥，記關(guān)鍵詞，編輯器相關(guān)如下;其他的，emmm，看相應(yīng)文檔。
- editor cursor， 是跟光標(biāo)渲染和多光標(biāo)相關(guān)的設(shè)置。
- editor find， 是與編輯器內(nèi)搜索相關(guān)的設(shè)置。
- editor font， 是與字體有關(guān)的設(shè)置。
- editor format， 是代碼格式化。
- editor suggest， 是和自動(dòng)補(bǔ)全、建議窗口等相關(guān)的配置。
然后在 setting UI 面板里搜索即可。
vscode 倉(cāng)庫(kù)配置之 tasks
任務(wù)系統(tǒng)的目的，是將各種形形色色的任務(wù)腳本盡可能地統(tǒng)一化，然后提供一套簡(jiǎn)單但又定制化強(qiáng)的方式操作它們。
配置任務(wù)
任務(wù)的來(lái)源有兩種：對(duì)項(xiàng)目的自動(dòng)檢測(cè) 以及 自定義的 task。
對(duì)項(xiàng)目的自動(dòng)檢測(cè)
VSCode 會(huì)自動(dòng)讀取項(xiàng)目下的配置文件，通過(guò)配置文件類(lèi)型生成task。
假設(shè)項(xiàng)目下有package.json，內(nèi)容為：
{
"name": "sample",
"scripts": {
"test": ""
}
}運(yùn)行時(shí)就會(huì)發(fā)現(xiàn)默認(rèn)有兩條跟 npm 相關(guān)的任務(wù)：
- npm install。
- npm test。
自定義的 task
首先我們?cè)诿蠲姘謇?，搜?“配置任務(wù)”(Configure Task)并執(zhí)行。
我們能夠看到一個(gè)下拉框，這里面提供了多個(gè)不同的選項(xiàng)。
此處存在兩種自定義 task 的方案。
根據(jù)命令生成task.json
如果我們選擇第一個(gè)，也就是npm: install這一項(xiàng)的話(huà)，VS Code 會(huì)立刻在 .vscode文件夾下創(chuàng)建一個(gè) tasks.json 文件，它的格式是 JSON，可讀性很好且易于修改。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "install",
"problemMatcher": []
}
]
}其中 tasks 屬性的值是一個(gè)數(shù)組，這就是我們可以在當(dāng)前文件夾下使用的所有任務(wù)，接下來(lái)我們?cè)斀馊蝿?wù)對(duì)象的信息。
但是這種類(lèi)型的任務(wù)，受限于 VS Code 或者插件所支持的腳本工具，缺乏一定的靈活性。
使用模板創(chuàng)建 tasks.json 文件
緊接著 VS Code 就問(wèn)我們了，希望使用哪種模板。這里模板的多少，同樣取決于你裝了哪些插件。默認(rèn)情況下，VS Code 為 MSBuild、Maven、.NET Core 提供了模板，而最后一個(gè) Others，則是一個(gè)通用的模板，我們一起來(lái)看下它。
選擇完 Others 之后，VS Code 在當(dāng)前文件夾根目錄下的 .vscode 文件夾中，創(chuàng)建了 tasks.json 文件。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "echo",
"type": "shell",
"command": "echo Hello",
"group": "none",
"presentation": {
"reveal": "always",
"panel": "new"
},
"options": {
"cwd": "",
"env": {},
"shell": {
"executable": "bash"
}
}
}
]
}
擴(kuò)展：group 屬性，運(yùn)行任務(wù)的分組
在task屬性中，還存在分組屬性group，這就需要先了解Run task了，我們?cè)诿蠲姘逯休斎隦un Task，會(huì)出現(xiàn)如下內(nèi)容。
運(yùn)行任務(wù)在上文已經(jīng)講解過(guò)了;關(guān)鍵是【運(yùn)行開(kāi)發(fā)任務(wù)】和【運(yùn)行測(cè)試任務(wù)】;功能都是一樣的，提供任務(wù)列表，供用戶(hù)選擇執(zhí)行，唯一不同就是vscode加了一個(gè)分類(lèi)，這樣便于用戶(hù)定義任務(wù)時(shí)進(jìn)行區(qū)分，而這個(gè)分類(lèi)就是通過(guò)group屬性定義的。
而一般我們的打包或者測(cè)試任務(wù)都是固定且唯一的，這就意味著我們可以省略掉【選擇命令】這一步，一鍵運(yùn)行。如何設(shè)置呢?
"group": {
"isDefault": true,
"kind": "test" // 這是 Run Test Task 的一鍵執(zhí)行命令；如果設(shè)定 Run Build Task 則 kind 的值為 build
}
擴(kuò)展：執(zhí)行命令時(shí)的參數(shù)
task 對(duì)象定義中有一個(gè)屬性args，是一個(gè)數(shù)組，在運(yùn)行指定 command 的時(shí)候，args 里的每個(gè)值都會(huì)被當(dāng)作其參數(shù)傳入，如：
{
"label": "echo",
"type": "shell",
"command": "echo 'Hello World'"
}我們可以改寫(xiě)為：
{
"label": "echo",
"type": "shell",
"command": "echo",
"args": [
"hello world"
]
}但對(duì)于命令而言，不同的執(zhí)行 shell 對(duì)空白符、$、引號(hào)等等都可能有不同的理解，這就意味著需要對(duì)參數(shù)進(jìn)行轉(zhuǎn)義規(guī)則的設(shè)定，所以 args 數(shù)組也可以存儲(chǔ)對(duì)象。
"args": [
{
"value": "Hello World",
"quoting": "escape"
}
]
對(duì)于quoting而言，存在三個(gè)值的情況。
舉例而言
escape 下執(zhí)行的腳本實(shí)際上是：
echo Hello\ World
strong 下執(zhí)行的腳本實(shí)際上是：
echo 'Hello World'
weak 下執(zhí)行的腳本實(shí)際上是：
echo "Hello World"
上面我們是以 bash 作為 shell 進(jìn)行分析的，那對(duì)于 cmd、powershell 等等呢?可以搜索 “quoting mechanism” 來(lái)查找，也可以查閱VS Code 關(guān)于 Task 參數(shù)轉(zhuǎn)義部分的文檔。
擴(kuò)展：多任務(wù)執(zhí)行
實(shí)現(xiàn)同時(shí)運(yùn)行多個(gè)任務(wù)，其實(shí)挺簡(jiǎn)單的，就是配置dependsOn屬性，是個(gè)數(shù)組，存儲(chǔ)著所有要執(zhí)行的任務(wù)的labe。
舉例，我希望執(zhí)行runOrderFirst時(shí)，幫我同時(shí)啟動(dòng)微應(yīng)用基座項(xiàng)目和其內(nèi)部的 order 項(xiàng)目。
那我們可以配置如下 tasks.json，其中包含【啟動(dòng)基座】、【啟動(dòng) order】的 task。
{
"label": "runMapp",
"type": "npm",
"script": "start:dev"
},
{
"type": "npm",
"script": "serve",
"path": "apps/order/",
"problemMatcher": [],
"label": "runOrder",
"detail": "啟動(dòng) order"
},然后我們新增一個(gè) task，用于聚合這兩個(gè)，tasks.json內(nèi)容變?yōu)槿缦拢?/p>
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "runMapp",
"type": "npm",
"script": "start:dev"
},
{
"type": "npm",
"script": "serve",
"path": "apps/order/",
"problemMatcher": [],
"label": "runOrder",
"detail": "啟動(dòng) order"
},
{
"label": "runOrderFirst",
"dependsOn": [
"runMapp",
"runOrder"
]
}
]
}運(yùn)行這個(gè) task 即可，效果如下：
這種啟動(dòng)項(xiàng)目的命令很常用，每次還得選下命令挺麻煩，我們可以利用分組的功能，將之設(shè)置為測(cè)試任務(wù)并默認(rèn)，這樣Run Test Task就可以直接執(zhí)行了。
{
"label": "runOrderFirst",
"dependsOn": [
"runMapp",
"runOrder"
],
"group": {
"kind": "test",
"isDefault": true
}
}效果如下：
運(yùn)行任務(wù)
在控制面板中使用命令Run Task;然后選擇對(duì)應(yīng)的命令即可。
比如選擇“echo”這個(gè)任務(wù)(這個(gè)就是我們?cè)?label 里寫(xiě)的名字)，按下回車(chē)后，VS Code 會(huì)問(wèn)我們 “選擇根據(jù)何種錯(cuò)誤和警告掃描任務(wù)輸出”，現(xiàn)在就選擇第一個(gè)選項(xiàng) “繼續(xù)而不掃描任務(wù)輸出” 好了。
例子
喚起 Chrome 瀏覽器，我們先實(shí)現(xiàn)在 mac 中喚起，再考慮通用。
首先：定義 task
{
"version": "2.0.0",
"tasks": [
{
"label": "chrome",
"type": "process",
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
}
]
}其次：運(yùn)行 task
我們運(yùn)行看看它的效果，在控制面板中使用命令Run Task，然后選擇chrome。
最后：考慮平臺(tái)不同
如果使用的系統(tǒng)是 Windows 或者 Linux，那么這個(gè)任務(wù)就沒(méi)法使用了，因?yàn)?Chrome 的地址完全對(duì)不上號(hào)。
所以我們可以修改task.json，為系統(tǒng)定制命令。
{
"version": "2.0.0",
"tasks": [
{
"label": "chrome",
"type": "process",
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"，
"windows": {
"command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
},
"linux": {
"command": "/usr/bin/google-chrome"
}
}
]
}vscode 倉(cāng)庫(kù)配置之調(diào)試設(shè)置(launch)
調(diào)試，是最必不可缺的一環(huán)功能，對(duì)于大多數(shù)的 IDE 而言，因?yàn)槭褂脤?duì)象確定而使用極其方便，比如 IDEA 之于 JAVA，甚至谷歌瀏覽器之于前端;而對(duì)于 vscode 這種區(qū)別于 IDE 的編輯器而言，這需要考慮更大的靈活性，這就需要配置文件實(shí)現(xiàn)了。
常規(guī)使用
考慮新手友好，vscode 會(huì)存在默認(rèn)設(shè)置，即開(kāi)箱即用的調(diào)試功能;以nodejs為例，分兩步：設(shè)置斷點(diǎn)，調(diào)試。
設(shè)置斷點(diǎn)
有兩個(gè)方案，可以在文件中輸入關(guān)鍵詞【debugger】;也可以在文件的左側(cè)可以點(diǎn)上紅點(diǎn)，效果一致。
調(diào)試
可以點(diǎn)擊左側(cè)的 debugger 按鈕【一只甲殼蟲(chóng)圖標(biāo)】，也可以使用快捷鍵【cmd + shift + D】。然后選擇要調(diào)試的程序類(lèi)型，這時(shí)默認(rèn)會(huì)對(duì)當(dāng)前打開(kāi)文件進(jìn)行調(diào)試處理。
高階使用：調(diào)試配置launch.json
那如果需求不止單文件，而是對(duì)一個(gè)項(xiàng)目進(jìn)行調(diào)試呢?或者對(duì)項(xiàng)目?jī)?nèi)的指定文件，這就需要launch.json文件了，同任務(wù)功能，這個(gè)文件也是在.vscode下。
如何創(chuàng)建
點(diǎn)擊左側(cè)的 debugger 按鈕【一只甲殼蟲(chóng)圖標(biāo)】，或者使用快捷鍵【cmd + shift + D】喚起 debugger 面板后，存在創(chuàng)建入口點(diǎn)擊，然后選中類(lèi)型即會(huì)自動(dòng)創(chuàng)建。
{
// 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動(dòng)程序",
"program": "${file}"
}
]
}
如何書(shū)寫(xiě)
對(duì)于書(shū)寫(xiě)launch.json文件，我們有兩個(gè)工具可以使用。
1.借助 VS Code 的調(diào)試器插件提供的模板。
在創(chuàng)建launch.json時(shí)，會(huì)要求選擇類(lèi)型，從而創(chuàng)建對(duì)應(yīng)的模板。
2.自動(dòng)補(bǔ)全功能。
另一個(gè)能夠幫助到我們的，就是在書(shū)寫(xiě)配置屬性的時(shí)候使用自動(dòng)補(bǔ)全功能。當(dāng)我們?cè)跁?shū)寫(xiě)新的屬性時(shí)，按下 Ctrl + Space，就能夠喚出建議列表，建議列表里提供了當(dāng)前調(diào)試配置里可以使用的所有屬性，然后我們就可以按需選用了。
尾聲
到此，倉(cāng)庫(kù)配置相關(guān)的分享就結(jié)束啦;這節(jié)的信息很多，而且因?yàn)榫庉嬈鞯哪J(rèn)設(shè)置肯定是符合大部分場(chǎng)景需求的，所以我們大多數(shù)人很有可能從未接觸過(guò)這些概念，但我們生來(lái)從不是為了多數(shù)人，至少我不是，我努力就是為了成為更好的自己。
舉個(gè)場(chǎng)景吧，不白撒雞血，前些日子開(kāi)一個(gè)項(xiàng)目，希望接入保存自動(dòng)格式化，也就是接入eslint+prettier，多數(shù)人入職時(shí)候這些就已經(jīng)在項(xiàng)目里配置好了，我也一樣，所以一開(kāi)始有點(diǎn)懵，但還是想嘗試，最后發(fā)現(xiàn)其實(shí)就是配置.vscode文件中setting.json文件，有興趣的同學(xué)可以參考文末【關(guān)于實(shí)現(xiàn)項(xiàng)目代碼風(fēng)格統(tǒng)一的參考貼】，人家寫(xiě)的很好，我就不重寫(xiě)一篇了。
文章題目：你不知道的Vscode之項(xiàng)目約束|倉(cāng)庫(kù)配置
鏈接分享：http://www.fisionsoft.com.cn/article/cosdidh.html
