一、關于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).
支持的拓展常見的包含如下：

image.png

1.2 VSCode的學習網(wǎng)址

VSCode幫助文檔鏈接
怎么找到它，其實也及其的簡單，僅僅需要。

image.png

二蒸殿、How to Use

2.1 調試代碼和安裝插件

如何開始調試代碼椅野，這里以python為例

Step1:首先在商店中搜索python

image.png

image.png

image.png

三、熟識常用的快捷鍵

3.1 調試常見的快捷鍵

F9 打開和停止調試斷點
F11 單步調試
F5 啟動調試

image.png

image.png

二雕蔽、使用一波

2.1

Vscode是一個輕量的編譯器折柠，所以默認是通過打開文件夾的功能來打開對應的工程。而且下面會列舉出最近打開的工程批狐，方便打開用戶打開最近打開的工程進行編輯和修改。

image.png

? command鍵
? option/alt
? shift按鍵
^ 表示的是control鍵

打開一個工程

2.2 查詢未知的快捷鍵

首先鍵入? ? P，之后出現(xiàn)如圖所示的界面迁霎，我們在這里面輸入對應關鍵字“調試”吱抚，可以快速搜索你需要使用到快捷鍵

image.png

2.3 ? ? F 整個工程中查找關鍵字

作用之后效果，如下圖考廉。其實和直接點擊左邊的放大鏡效果是等同的秘豹。

image.png

2.4 ? P 快速你需要查看的文件，并且能快速跳轉到

image.png

2.5 ^ ` 調取和關閉終端

快速吊起終端昌粤，對于我們這種既绕，對于需要應用終端的代碼，比如python或者vue-cli以及RN涮坐，F(xiàn)lutter都是特別方便凄贩。

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 快速強大的編碼功能

能夠快速捕捉程序中的問題并突出顯示债查。支持多光標編輯，參數(shù)提示以及其他快速編碼特性瓜挽。

image

2.8 IntelliSense功能

根據(jù)文檔上下文為變量類型盹廷、函數(shù)定義和導入模塊提供代碼智能補全功能。

image.png

2.9 代碼導航和重構

使用peek和navigate to definition功能可以查閱瀏覽你的源代碼久橙，代碼重構變得輕而易舉俄占。

image.png

2.10 更多更常見的功能

image.png

2.11 關于后退和前進的意義

在一個文檔中我們可以首先在A處進行編輯，如下圖增加一個標簽

image.png

image.png

image.png

2.12 方便的放大和縮小整個界面的字體

通過 ? + 還有 ? + 很容易的實現(xiàn)整個頁面所有字體大小

image.png

image.png

2.13 格式化文件快捷鍵

? ? F

image.png

2.14 用VSCode的固定窗口模式

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

webStorm的展示.png

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

image.png

image.png

注意觀察會發(fā)現(xiàn)鹰贵，此時標題字體將變成正體。

三康嘉、新建一個html直接采用Chrome來進行調試的實現(xiàn)方案

3.1 首先安裝,如下圖碉输。方法已經(jīng)特別具體，再此不再贅述亭珍。

image.png

3.2 在自己的html工程目錄下面點擊f5,或者在左側選擇調試按鈕

image

image.png

image.png

3.3.解決以上問題

首先在彈出來的launch.json中添加以下內容

{
    // 使用 IntelliSense 了解相關屬性敷钾。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息肄梨，請訪問: 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開發(fā)纱控，默認的F1到F12分別將會被系統(tǒng)調節(jié)按鈕替代辆毡，如何將F1到F12設置為默認功能。
Mac上的F鍵標準功能和按鍵上的特殊功能之間調換
設置 --》 鍵盤 --》 勾選將F1甜害、F2

4.2 實現(xiàn)TODO的指示功能

首先安裝對應的插件

image.png

其次重啟Vscode,就可以看到如圖所示的TODO的樹形結構

image.png

五舶掖、參考鏈接和書籍

Visual Studio Code中文文檔（一）-快速入門
VS Code - Debugger for Chrome調試js