站長資訊網本篇文章帶大家了解一下vscode中的倉庫配置，希望對大家有所幫助！
歡迎來到 vscode 的世界，開發工具有很多，找準自己的需求，才能找到合適的工具，而不是“手里有錘子，看啥都像釘子”；對 VSCode 而言，定位在于編輯器而非 IDE，IDE 側重開箱即用，因而體量龐大，如 Eclipse。
而編輯器側重對語言和工作流的豐富支持與自由，因而更為輕量，這意味著它不會針對某個語言或某個方面為用戶做太多事情，但也意味著 TA 有很高的自由度，如插件機制、倉庫配置機制等等，本文專注倉庫配置分享，插件機制另起一文。
那我們就開始叭，沖沖沖！
配置概述
VS Code 是基于文件夾來進行管理的，但 VS Code 允許你創建幾個跟當前文件夾或者跟項目有關的配置保存在這個文件夾中，便于團隊內部進行共享。這個文件夾就是.vscode。
這個文件夾中可以包含以下幾種文件。
配置文件（settings.json）
只有當前這個文件夾在 VS Code 中被打開時才會生效。和我們說的修改用戶設置是一樣的。
任務設置（tasks.json）
關于 VS Code 任務系統的配置文件
調試設置（launch.json）
用于說明如何調試當前文件夾下的代碼
vscode 倉庫配置之配置文件（settings）
作為編輯器，自然需要考慮個人偏好設置和多人開發時項目風格統一問題，諸如字體大小、換行符、自動格式化插件配置等等，在 VSCode 中對應功能是setting.json配置
配置方式
基礎信息
**User Settings **：用戶設置，為默認配置，會關聯所有項目，權重低于工作區設置
Workspace Settings：工作區設置，為項目配置，默認沒有，可以自行在項目根路徑下創建，項目路徑/.vscode/settings.json
用戶設置入口：使用 UI 設置界面
使用 Ctrl+,（mac 是 cmd+,） 或者點擊左下角齒輪圖標并選擇設置。然后在文本編輯器中找到 settings.json
用戶設置入口：使用命令面板
使用 Ctrl+Shift+P （mac 是 cmd+shift+P）或者點擊左下角齒輪圖標，選擇命令面板。然后輸入 settings
Open User Settings會打開 UI 設置界面；Open Settings (JSON)會打開用戶設置 settings.json 文件；
工作區設置入口：.vscode 文件夾
在打開文件夾或者工作區時，手動創建 .vscode 文件夾，并在其中創建 settings.json 文件。
工作區設置入口：使用命令面板
使用 Ctrl+Shift+P （mac 是 cmd+shift+P）或者點擊左下角齒輪圖標，選擇命令面板。然后輸入 settings
Open Workspace Settings也會打開 UI 設置界面；Open Workspace Settings (JSON)會打開工作區設置 settings.json 文件
配置內容
關于所有的配置項可以點此查看相應文檔，這里給出常見設置分享和搜索相關配置思路。
常見設置：編輯器外觀
editor.lineNumbers：編輯器左側是否顯示行號，默認顯示設置即可editor.renderWhitespace: all：以點形式渲染所有空白字符（空格、制表符等）editor.renderIndentGuides：縮進參考線，默認以代碼塊連接設置即可editor.rulers: [120]：垂直標尺，會在指定列號處畫上豎線editor.minimap.enabled: false：是否顯示右側小地圖，個人喜歡關閉editor.cursorBlinking/cursorStyle/cursorWidth：光標樣式editor.renderLineHighlight: 'all'：設置當前行高亮背景，行號也會被高亮
常見設置：書寫體驗
自定義空白符和制表符
{ editor.detectIndentation: false, // 關閉 VS Code 的自動檢測來控制制表符或者空格鍵的使用 editor.tabSize: 1, // 制表符對應的空格符長度 editor.insertSpaces: 1 // 空格符對應空白長度 }
自動保存
{ editor.formatOnSave: true }
新建文件的默認類型
{ files.defaultLanguage: 'markdown' }
搜索相關配置思路
沒啥，記關鍵詞，編輯器相關如下；其他的，emmm，看相應文檔
- editor cursor， 是跟光標渲染和多光標相關的設置；
- editor find， 是與編輯器內搜索相關的設置；
- editor font， 是與字體有關的設置；
- editor format， 是代碼格式化；
- editor suggest， 是和自動補全、建議窗口等相關的配置。
然后在 setting UI 面板里搜索即可
vscode 倉庫配置之 tasks
任務系統的目的，是將各種形形色色的任務腳本盡可能地統一化，然后提供一套簡單但又定制化強的方式操作它們
配置任務
任務的來源有兩種：對項目的自動檢測 以及 自定義的 task
對項目的自動檢測
VSCode 會自動讀取項目下的配置文件，通過配置文件類型生成task；
假設項目下有package.json，內容為
{ "name": "sample", "scripts": { "test": "" } }
運行時就會發現默認有兩條跟 npm 相關的任務：
- npm install
- npm test
自定義的 task
首先我們在命令面板里，搜索 “配置任務”（Configure Task）并執行。
我們能夠看到一個下拉框，這里面提供了多個不同的選項。
此處存在兩種自定義 task 的方案
根據命令生成task.json
如果我們選擇第一個，也就是npm: install這一項的話，VS Code 會立刻在 .vscode文件夾下創建一個 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 屬性的值是一個數組，這就是我們可以在當前文件夾下使用的所有任務，接下來我們詳解任務對象的信息。
| 屬性 | 含義 |
|---|---|
| type | 代表著你要使用哪個腳本工具 |
| script | 腳本工具執行的哪個腳本命令 |
| problemMatcher | 設定自動地去分析任務運行結果的規則，下文詳解 |
但是這種類型的任務，受限于 VS Code 或者插件所支持的腳本工具，缺乏一定的靈活性。
使用模板創建 tasks.json 文件
緊接著 VS Code 就問我們了，希望使用哪種模板。這里模板的多少，同樣取決于你裝了哪些插件。默認情況下，VS Code 為 MSBuild、Maven、.NET Core 提供了模板，而最后一個 Others，則是一個通用的模板，我們一起來看下它。
選擇完 Others 之后，VS Code 在當前文件夾根目錄下的 .vscode 文件夾中，創建了 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" } } } ] }
| 屬性 | 含義 | 是否必填 | 默認值 |
|---|---|---|
| label | 任務的名字，執行任務時選擇的 key | true |
| type | 這個類型可以有兩種選擇，一種是這個任務被當作進程來運行，另一種則是在 shell 中作為命令行來運行。 | |
| command | 代表著我們希望在 shell 中運行哪一個命令，可以聯合 args 屬性使用 | true |
| args | 數組，在運行指定 command 的時候，args 里的每個值都會被當作其參數傳入，注意事項很多，見下文 | [] |
| group | 分組，我們可以通過這個屬性指定這個任務被包含在哪一種分組當中。這涉及到運行時的類別：運行測試任務” (Run Test Task) 、“運行生成任務” （Run Build Task） | |
| presentation | 用于控制任務運行的時候，是否要自動調出運行的界面 | |
| options | 用于控制任務執行時候的幾個配置，比如控制任務腳本運行的文件夾地址 “cwd”，控制環境變量 “env”，或者控制任務腳本運行的時候使用哪個 shell 環境。 | |
| dependsOn | 實現多任務執行 | |
| path | 相對項目根路徑的相對路徑，運行腳本時會先切換到這下面 |
擴展：group 屬性，運行任務的分組
在task屬性中，還存在分組屬性group，這就需要先了解Run task了，我們在命令面板中輸入Run Task，會出現如下內容
運行任務在上文已經講解過了；關鍵是【運行開發任務】和【運行測試任務】；功能都是一樣的，提供任務列表，供用戶選擇執行，唯一不同就是vscode加了一個分類，這樣便于用戶定義任務時進行區分，而這個分類就是通過group屬性定義的；
| group 屬性值 | 含義 | 對應執行命令 |
|---|---|---|
| build | 將這個任務劃分在打包任務列表中 | Run Build Task |
| test | 將這個任務劃分在測試任務列表中 | Run Test Task |
| none | 將這個任務劃分在默認任務列表中 | Run Task |
而一般我們的打包或者測試任務都是固定且唯一的，這就意味著我們可以省略掉【選擇命令】這一步，一鍵運行。如何設置呢？
"group": { "isDefault": true, "kind": "test" // 這是 Run Test Task 的一鍵執行命令；如果設定 Run Build Task 則 kind 的值為 build }
擴展：執行命令時的參數
task 對象定義中有一個屬性args，是一個數組，在運行指定 command 的時候，args 里的每個值都會被當作其參數傳入，如
{ "label": "echo", "type": "shell", "command": "echo 'Hello World'" }
我們可以改寫為
{ "label": "echo", "type": "shell", "command": "echo", "args": [ "hello world" ] }
但對于命令而言，不同的執行 shell 對空白符、$、引號等等都可能有不同的理解，這就意味著需要對參數進行轉義規則的設定，所以 args 數組也可以存儲對象
"args": [ { "value": "Hello World", "quoting": "escape" } ]
| key | value |
|---|---|
| value | 參數內容 |
| quoting | 決定了該如何處理這段字符串 |
對于quoting而言，存在三個值的情況
| 值 | 含義 |
|---|---|
| escape | 默認值，任務系統會根據我們所使用的 shell 的要求，對這段字符串進行轉義 |
| strong | 在 bash 里， 我們將會使用單引號包裹這段字符串 |
| weak | 在 bash 里我們則會使用雙引號來包裹這段字符串 |
舉例而言
escape 下執行的腳本實際上是
echo Hello World
strong 下執行的腳本實際上是
echo 'Hello World'
weak 下執行的腳本實際上是
echo "Hello World"
上面我們是以 bash 作為 shell 進行分析的，那對于 cmd、powershell 等等呢？可以搜索 “quoting mechanism” 來查找，也可以查閱VS Code 關于 Task 參數轉義部分的文檔。
擴展：多任務執行
實現同時運行多個任務，其實挺簡單的，就是配置dependsOn屬性，是個數組，存儲著所有要執行的任務的label；
舉例，我希望執行runOrderFirst時，幫我同時啟動微應用基座項目和其內部的 order 項目；
那我們可以配置如下 tasks.json，其中包含【啟動基座】、【啟動 order】的 task
{ "label": "runMapp", "type": "npm", "script": "start:dev" }, { "type": "npm", "script": "serve", "path": "apps/order/", "problemMatcher": [], "label": "runOrder", "detail": "啟動 order" },
然后我們新增一個 task，用于聚合這兩個，tasks.json內容變為如下
{ // 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": "啟動 order" }, { "label": "runOrderFirst", "dependsOn": [ "runMapp", "runOrder" ] } ] }
運行這個 task 即可，效果如下
這種啟動項目的命令很常用，每次還得選下命令挺麻煩，我們可以利用分組的功能，將之設置為測試任務并默認，這樣Run Test Task就可以直接執行了
{ "label": "runOrderFirst", "dependsOn": [ "runMapp", "runOrder" ], "group": { "kind": "test", "isDefault": true } }
效果如下
運行任務
在控制面板中使用命令Run Task；然后選擇對應的命令即可；
比如選擇“echo”這個任務（這個就是我們在 label 里寫的名字），按下回車后，VS Code 會問我們 “選擇根據何種錯誤和警告掃描任務輸出”，現在就選擇第一個選項 “繼續而不掃描任務輸出” 好了。
例子
喚起 Chrome 瀏覽器，我們先實現在 mac 中喚起，再考慮通用。
首先：定義 task
{ "version": "2.0.0", "tasks": [ { "label": "chrome", "type": "process", "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" } ] }
其次：運行 task
我們運行看看它的效果，在控制面板中使用命令Run Task，然后選擇chrome；
最后：考慮平臺不同
如果使用的系統是 Windows 或者 Linux，那么這個任務就沒法使用了，因為 Chrome 的地址完全對不上號。
所以我們可以修改task.json，為系統定制命令。
{ "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 倉庫配置之調試設置（launch）
調試，是最必不可缺的一環功能，對于大多數的 IDE 而言，因為使用對象確定而使用極其方便，比如 IDEA 之于 JAVA，甚至谷歌瀏覽器之于前端；而對于 vscode 這種區別于 IDE 的編輯器而言，這需要考慮更大的靈活性，這就需要配置文件實現了。
常規使用
考慮新手友好，vscode 會存在默認設置，即開箱即用的調試功能；以nodejs為例，分兩步：設置斷點，調試。
設置斷點
有兩個方案，可以在文件中輸入關鍵詞【debugger】；也可以在文件的左側可以點上紅點，效果一致；
調試
可以點擊左側的 debugger 按鈕【一只甲殼蟲圖標】，也可以使用快捷鍵【cmd + shift + D】。然后選擇要調試的程序類型，這時默認會對當前打開文件進行調試處理。
高階使用：調試配置 launch.json
那如果需求不止單文件，而是對一個項目進行調試呢？或者對項目內的指定文件，這就需要launch.json文件了，同任務功能，這個文件也是在.vscode下。
如何創建
點擊左側的 debugger 按鈕【一只甲殼蟲圖標】，或者使用快捷鍵【cmd + shift + D】喚起 debugger 面板后，存在創建入口點擊，然后選中類型即會自動創建。
{ // 使用 IntelliSense 了解相關屬性。 // 懸停以查看現有屬性的描述。 // 欲了解
