VS code 你們都在用嗎？或許你們需要看一下(基礎)篇

一、關於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 格式化文件快捷鍵

⌥ ⇧ F

2.14 用VSCode的固定窗口模式

使用習慣了WebStorm的人都能很明顯的感受到，webStorm打開一個.js都會比如像是下面如圖：

webStorm的展示.png

而正常打開一個窗口，單擊的時候，通常會替換之前的窗口

要實現和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的樹形結構