一、關於Vscode
1.1 VsCode是個啥
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).
支持的拓展常見的包含如下：
1.2 VSCode的學習網址
VSCode幫助文檔鏈接
怎么找到它，其實也及其的簡單，僅僅需要。
二、How to Use
2.1 調試代碼和安裝插件
如何開始調試代碼，這里以python為例
Step1:首先在商店中搜索python
Step2: 之后就可以直接在主頁面啟動調試F5
注意以下頁面，其中如果是IDE內部使用如下對應窗口塊的進行
文件和調試塊的指示
三、熟識常用的快捷鍵
3.1 調試常見的快捷鍵
F9 打開和停止調試斷點
F11 單步調試
F5 啟動調試
調試的具體頁面如圖所示
二、使用一波
2.1
Vscode是一個輕量的編譯器，所以默認是通過打開文件夾的功能來打開對應的工程。而且下面會列舉出最近打開的工程，方便打開用戶打開最近打開的工程進行編輯和修改。
這里默認打一個工程，可以看到如下提示。
蘋果電腦Mac如何輸入⌘、⌥、⇧、⌃、等特殊字符 反正我是復制的，偷懶一下。
科普一波：
⌘ command鍵
⌥ option/alt
⇧ shift按鍵
^ 表示的是control鍵
打開一個工程
2.2 查詢未知的快捷鍵
首先鍵入⇧ ⌘ P，之后出現如圖所示的界面，我們在這里面輸入對應關鍵字“調試”，可以快速搜索你需要使用到快捷鍵
2.3 ⇧ ⌘ F 整個工程中查找關鍵字
作用之后效果，如下圖。其實和直接點擊左邊的放大鏡效果是等同的。
2.4 ⌘ P 快速你需要查看的文件，並且能快速跳轉到
2.5 ^ ` 調取和關閉終端
快速吊起終端，對於我們這種，對於需要應用終端的代碼，比如python或者vue-cli以及RN，Flutter都是特別方便。
2.6 大綱的功能
關於git部分的默認支持，如果當前工程存在着改動，那么修改清晰可見。
打開其中一個Vue文件，其中大綱功能是是個非常贊的功能，這個問題件文件脈絡清晰明顯
2.6.1 html樹
2.6.2 less的層序
2.6.3js部分
可以說唯一小小遺憾是沒有按照compute和methods之類的對function進行分類，但是如此的順序很OK了(這一點不如WebStrom)
2.7 快速強大的編碼功能
能夠快速捕捉程序中的問題並突出顯示。支持多光標編輯，參數提示以及其他快速編碼特性。
2.8 IntelliSense功能
根據文檔上下文為變量類型、函數定義和導入模塊提供代碼智能補全功能。
2.9 代碼導航和重構
使用peek和navigate to definition功能可以查閱瀏覽你的源代碼，代碼重構變得輕而易舉。
2.10 更多更常見的功能
2.11 關於后退和前進的意義
在一個文檔中我們可以首先在A處進行編輯，如下圖增加一個標簽
之后我們在B處開始設置該div的css樣式
此時我們通過^ -就可以回到A區域
在A區域使用^ ⇧ -就會回到B取悅
如果聯系多次按下回退是能夠跨文件的，這個功能也很棒。
2.12 方便的放大和縮小整個界面的字體
通過 ⌘ + 還有 ⌘ + 很容易的實現整個頁面所有字體大小
2.13 格式化文件快捷鍵
2.14 用VSCode的固定窗口模式
使用習慣了WebStorm的人都能很明顯的感受到，webStorm打開一個.js都會比如像是下面如圖：
而正常打開一個窗口，單擊的時候，通常會替換之前的窗口
要實現和webStorm一樣的方式，其實可以直接在如上箭頭所示的標題部分雙擊即可完成固定的效果。
注意觀察會發現，此時標題字體將變成正體。
三、新建一個html直接采用Chrome來進行調試的實現方案
3.1 首先安裝,如下圖。方法已經特別具體，再此不再贅述。
3.2 在自己的html工程目錄下面點擊f5,或者在左側選擇調試按鈕
但是直接打開的chrome將會出現如下錯誤
3.3.解決以上問題
首先在彈出來的launch.json中添加以下內容
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "啟動 Chrome 並打開 localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch index.html (disable sourcemaps)",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/index.html"
}
]
}
3.4 然后在調試頁面中選擇對應的scheme
，在上方
，選擇下拉按鈕，會有一個添加，選擇chrome
四、附錄其他
4.1 MAC上F功能按鍵
由於采用MACPro開發，默認的F1到F12分別將會被系統調節按鈕替代，如何將F1到F12設置為默認功能。
Mac上的F鍵標准功能和按鍵上的特殊功能之間調換
設置 --》 鍵盤 --》 勾選將F1、F2
4.2 實現TODO的指示功能
首先安裝對應的插件
其次重啟Vscode,就可以看到如圖所示的TODO的樹形結構
五、參考鏈接和書籍
https://www.cnblogs.com/shujuan841019/p/5501083.html
https://www.cnblogs.com/mxk-star/p/7279785.html