一、關於 Vscode#
1.1 VsCode 是個啥#
Visual Studio Code 是一個 輕量但強大的源代碼編輯器，可以在您的桌面上運行，並且可用於 Windows、macOS 和 Linux。它內建支持 JavaScript、TypeScript和Node.js，並擁有 豐富的擴展生態系統，支持其他語言（如C++、C#、Java、Python、PHP、Go）和運行時（如.NET和Unity）。
支持的擴展常見的包含如下：
image.png
1.2 VSCode 的學習網址#
VSCode 幫助文檔鏈接
怎麼找到它，其實也及其的簡單，僅僅需要。
image.png
二、如何使用#
2.1 調試代碼和安裝插件#
如何開始調試代碼，這裡以 python 為例#
Step1: 首先在商店中搜索 python
image.png
Step2: 之後就可以直接在主頁面啟動調試 F5
注意以下頁面，其中如果是 IDE 內部使用如下對應窗口塊的進行
image.png
文件和調試塊的指示
image.png
三、熟識常用的快捷鍵#
3.1 調試常見的快捷鍵#
F9 打開和停止調試斷點
F11 單步調試
F5 啟動調試
image.png
調試的具體頁面如圖所示
image.png
二、使用一波#
2.1#
Vscode 是一個輕量的編譯器，所以默認是通過打開文件夾的功能來打開對應的工程。而且下面會列舉出最近打開的工程，方便用戶打開最近打開的工程進行編輯和修改。
image.png
這裡默認打開一個工程，可以看到如下提示。
蘋果電腦 Mac 如何輸入⌘、⌥、⇧、⌃、等特殊字符 反正我是複製的，偷懶一下。
科普一波：
⌘ command 鍵
⌥ option/alt
⇧ shift 按鍵
^ 表示的是 control 鍵
打開一個工程
2.2 查詢未知的快捷鍵#
首先鍵入⇧ ⌘ P，之後出現如圖所示的界面，我們在這裡面輸入對應關鍵字 “調試”，可以快速搜索你需要使用到的快捷鍵
image.png
2.3 ⇧ ⌘ F 整個工程中查找關鍵字#
作用之後效果，如下圖。其實和直接點擊左邊的放大鏡效果是等同的。
image.png
2.4 ⌘ P 快速你需要查看的文件，並且能快速跳轉到#
image.png
2.5 ^ ` 調取和關閉終端#
快速吊起終端，對於我們這種，對於需要應用終端的代碼，比如 python 或者 vue-cli 以及 RN，Flutter 都是特別方便。
2.6 大綱的功能#
關於 git 部分的默認支持，如果當前工程存在著改動，那麼修改清晰可見。
image.png
打開其中一個 Vue 文件，其中大綱功能是個非常讚的功能，這個問題件文件脈絡清晰明顯
image.png
2.6.1 html 樹#
image.png
2.6.2 less 的層序#
image.png
2.6.3js 部分#
可以說唯一小小遺憾是沒有按照 compute 和 methods 之類的對 function 進行分類，但是如此的順序很 OK 了 (這一點不如 WebStrom)
image.png
2.7 快速強大的編碼功能#
能夠快速捕捉程序中的問題並突出顯示。支持多光標編輯，參數提示以及其他快速編碼特性。
image
2.8 IntelliSense 功能#
根據文檔上下文為變量類型、函數定義和導入模塊提供代碼智能補全功能。
image.png
2.9 代碼導航和重構#
使用 peek 和 navigate to definition 功能可以查閱瀏覽你的源代碼，代碼重構變得輕而易舉。
image.png
2.10 更多更常見的功能#
image.png
2.11 關於後退和前進的意義#
在一個文檔中我們可以首先在 A 處進行編輯，如下圖增加一個標籤
image.png
之後我們在 B 處開始設置該 div 的 css 樣式
image.png
此時我們通過^ -就可以回到 A 區域
在 A 區域使用^ ⇧ -就會回到 B 區域
如果聯繫多次按下回退是能夠跨文件的，這個功能也很棒。
image.png
2.12 方便的放大和縮小整個界面的字體#
通過 ⌘ + 以及 ⌘ + 很容易的實現整個頁面所有字體大小
image.png
image.png
2.13 格式化文件快捷鍵#
⌥ ⇧ F
image.png
2.14 用 VSCode 的固定窗口模式#
使用習慣了 WebStorm 的人都能很明顯的感受到，webStorm 打開一個.js 都會比如像是下面如圖：
webStorm 的展示.png
而正常打開一個窗口，單擊的時候，通常會替換之前的窗口
image.png
要實現和 webStorm 一樣的方式，其實可以直接在如上箭頭所示的標題部分雙擊即可完成固定的效果。
image.png
注意觀察會發現，此時標題字體將變成正體。
三、新建一個 html 直接採用 Chrome 來進行調試的實現方案#
3.1 首先安裝，如下圖。方法已經特別具體，再此不再贅述。#
image.png
3.2 在自己的 html 工程目錄下面點擊 f5，或者在左側選擇調試按鈕#
image
image.png
但是直接打開的chrome將會出現如下錯誤
image.png
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#
image.png
，在上方
image
，選擇下拉按鈕，會有一個添加，選擇 chrome
四、附錄其他#
4.1 MAC 上 F 功能按鍵#
由於採用 MACPro 開發，默認的 F1 到 F12 分別將會被系統調節按鈕替代，如何將 F1 到 F12 設置為默認功能。
Mac 上的 F 鍵標準功能和按鍵上的特殊功能之間調換
設置 --》 鍵盤 --》 勾選將 F1、F2
4.2 實現 TODO 的指示功能#
首先安裝對應的插件
image.png
其次重啟 Vscode，就可以看到如圖所示的 TODO 的樹形結構
image.png
五、參考鏈接和書籍#
Visual Studio Code 中文文檔（一）- 快速入門
VS Code - Debugger for Chrome 調試 js