VS Code 使用教程詳解

1、寫在前面

一、爲何選擇 \(VS\) \(code\)

• 一款很是好用的代碼編輯器

• 標準化 \(Language\) \(Service\) \(Protocol\)

• 內置調試器和標準化 \(Debugger\) \(Adaptor\) \(Protocol\) —— 因此 \(VS\) \(code\) 能夠跨界搶 \(IDE\) 的市場……

• 相較於同市場的 \(Notepad++\) 和 \(Sublime\) \(Text\) ，\(VS\) \(code\) 的顏值和功能足以將它倆按在地上摩擦 （爲何不比較我神仙利器 \(Dev-C++\) ？由於它太神仙了）

• 摸魚插件千千萬，划水開船不易翻，它太香了鴨

二、 \(VS\) \(code\) 是個啥，有啥用

• 正如以上所說， \(VS\) \(code\) 是一款功能豐富且強大代碼編輯器 （固然你也可用他悄悄作一些別的事情） 。爲何說它是編輯器而不是編譯器，由於在用戶完成環境配置以前，它的做用僅僅至關於一個會變色的 \(text\) 文本文檔 （其實變色也還要用戶手動設置） 。

• \(VS\) \(code\) 特色：

  • 開源，免費；

  • 自定義配置

  • 集成 \(git\)

  • 智能提示強大

  • 支持各類文件格式（ \(html\) / \(jade\) / \(css\) / \(less\) / \(sass\) / \(xml\) ）

  • 調試功能強大

  • 各類方便的快捷鍵

  • 強大的插件擴展

    • 支持的語言拓展常見的包含以下：
      
    • 截至 \(2019\) 年 \(9\) 月， \(VS\) \(code\) 已經支持以下 \(37\) 種語言和文件：
      \(F\)#、\(HandleBars\) 、 \(Markdown\) 、 \(Python\) 、 \(Jade\) 、 \(PHP\) 、 \(Haxe\) 、 \(Ruby\) 、 \(Sass\) 、 \(Rust\) 、 \(PowerShell\) 、 \(Groovy\) 、 \(R\) 、 \(Makefile\) 、 \(HTML\) 、 \(JSON\) 、 \(TypeScript\) 、 \(Batch\) 、 \(Visual Basic\) 、 \(Swift\) 、 \(Less\) 、 \(SQL\) 、 \(XML\) 、 \(Lua\) 、 \(Go\) 、 \(C++\) 、 \(Ini\) 、 \(Razor\) 、 \(Clojure\) 、 \(C\)# 、 \(Objective-C\) 、 \(CSS\) 、 \(JavaScript\) 、 \(Perl\) 、 \(Coffee Script\) 、 \(Java\) 、 \(Dockerfile\)

• 學（hun）習（shui）寫（mo）碼（yu）這麼方便，沒理由不用

2、配置安裝（這裏以 C++ 爲例）

一、下載安裝

• 安裝包直接從官網下載便可
  
  注：因爲做者設備爲 \(Win10\) \(64\) 位，因此官網默認下載爲 \(64\) 位，其餘版本可點擊 Other downloads 進行下載。
  
  

• 安裝
  
  
  
  

二、配置基礎插件

• 漢化（英語大神能夠直接忽略）

  • 畢竟 \(VS\) \(code\) 不是國產的，畢竟是微軟開源的，畢竟微軟的母語不是漢語，因此在安裝完畢後它的界面是全英文界面

  • 可是它支持插件啊！

  • 點擊最右側一欄四個方格樣圖標，這就是 \(VS\) \(code\) 的插件拓展功能

  • 打開後在最上方搜索框搜索 Chinese 就會出現 Chinese (Simplified) Language Pack for Visual Studio Code 漢化標識

  • 點擊安裝（因爲做者已經安裝完成，因此並無顯示 安裝 按鈕）

  • 從新啓動 \(VS\) \(code\)
    

• 配置語言包

  • 在拓展商店搜索 C/C++ 語言包並安裝
    

三、配置系統環境（這步很重要！！！）

• 衆所周知， C++ 是要用 g++.exe 編譯的，是要用 gdb.exe \(Debug\) 的，這也是爲何講 \(VS\) \(code\) 是編輯器而不是編譯器的緣由。

• 下載編譯環境—— \(MinGW\) \(64\) 或 \(MinGW\) \(32\)

  • 良心 做者已經把 \(64\) 位的經常使用環境變量整合好了，能夠到網盤提取

  • 網盤地址： https://pan.baidu.com/s/1fBZr_NbIHuupodVbZ5-rhg

  • 提取碼： y8c9

  • 直接下載解壓到一個不容易被刪除的地方就好啦~

  • 注：解壓時必定要記清文件路徑！！！過會兒會用到

• 將編譯器文件路徑加入到系統的環境變量當中

  • 找到剛纔解壓的編譯器文件夾，找到目錄下的 bin 文件夾，例如個人就是 F:\x86_64-8.1.0-release-posix-seh-rt_v6-rev0\mingw64\bin ，將路徑複製下來（若是你足夠細心，你會注意到在 x86_64-8.1.0-release-posix-seh-rt_v6-rev0\mingw64 目錄下其實還有一個 x86_64-w64-mingw32 文件夾，這是爲了防止某些牛人的老爺機可能對 \(64\) 位不兼容，準備的 \(32\) 位。若是能夠，最好也將它子目錄下的 bin 文件夾路徑複製下來，又例如個人是 F:\x86_64-8.1.0-release-posix-seh-rt_v6-rev0\mingw64\x86_64-w64-mingw32\bin ）

  • 右鍵單擊 此電腦 \(\to\) 屬性 \(\to\) 高級系統設置 \(\to\) 高級 \(\to\) 環境變量 \(\to\) 單擊選中系統環境裏的 PATH \(\to\) 編輯 \(\to\) 新建 \(\to\) 將剛纔複製的路徑粘貼進去（必定要精確到 bin 文件夾！）
    
    

  • 而後一路 肯定 、 應用 點回來

  • 而後關機重啓這樣就完成了環境變量的配置

  • 最後來檢驗一下： Win+R 打開運行，輸入 cmd 回車，在命令提示符裏輸入 g++，若出現下面結果而不是 'g++'不是內部或外部命令，也不是可運行的程序或批處理文件則表示配置成功
    

四、配置 \(VS\) \(code\) 內部環境

• 打開 \(VS\) \(code\) ，點擊編輯器右上角 資源管理器 \(\to\) 打開文件夾 \(\to\) 在你準備保存代碼的地方新建一個文件夾，命名爲 .vscode （注意名字必定是 .vscode ，這是必須的。通常來講，每一個保存代碼的文件夾中都應有這麼一個 .vscode 配置文件）

• 注：將此文件夾放在經常使用文件夾頂層，就不須要重複配置了。

• 在 .vscode 文件夾中，新建兩個（只需兩個）配置文件，即 tasks.json 、 launch.json 。將下列內容複製進去便可：

  • \(tasks.json\) :

  {
    "version": "2.0.0",
    "tasks":
    [
        {
            "label": "g++",
            "command": "g++",
            "args":
            [
                "-g",
                "${file}",
                "-o",
                "${fileDirname}/${fileBasenameNoExtension}.exe"
            ],
            "problemMatcher":
            {
                "owner": "cpp",
                "fileLocation":
                [
                    "relative",
                    "${workspaceRoot}"
                ],
                "pattern":
                {
                    "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
                    "file": 1,
                    "line": 2,
                    "column": 3,
                    "severity": 4,
                    "message": 5
                }
            },
            "group":
            {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
  }

  • \(launch.json\) :

    • 注意： miDebuggerPath 這一條，要與你環境包安裝路徑一致，注意在路徑中 ''要替換爲'\',就像下面同樣。

  {
      "version": "0.2.0",
      "configurations":
      [
  
          {
              "name": "(gdb) Launch",    // 配置名稱，將會在啓動配置的下拉菜單中顯示
              "type": "cppdbg",         // 配置類型，這裏只能爲cppdbg
              "request": "launch",    // 請求配置類型，能夠爲launch（啓動）或attach（附加）
              "program": "${fileDirname}/${fileBasenameNoExtension}.exe",// 將要進行調試的程序的路徑
              "args": [],                // 程序調試時傳遞給程序的命令行參數，通常設爲空便可
              "stopAtEntry": false,     // 設爲true時程序將暫停在程序入口處，通常設置爲false
              "cwd": "${workspaceRoot}",// 調試程序時的工做目錄，通常爲${workspaceRoot}即代碼所在目錄
              "environment": [],
              "externalConsole": true,// 調試時是否顯示控制檯窗口，通常設置爲true顯示控制檯
              "MIMode": "gdb",
              "miDebuggerPath": "F:\\x86_64-8.1.0-release-posix-seh-rt_v6-rev0\\mingw64\\bin\\gdb.exe",// miDebugger的路徑，注意這裏要與MinGw的路徑對應
              "preLaunchTask": "g++",    // 調試會話開始前執行的任務，通常爲編譯程序，c++爲g++, c爲gcc
              "setupCommands":
              [
                  {
                      "description": "Enable pretty-printing for gdb",
                      "text": "-enable-pretty-printing",
                      "ignoreFailures": true
                  }
              ]
          }
      ]
  }

• 最後嘗試寫個小程序，按 F5 編譯運行。

  • 注：由於 \(VS\) \(code\) 的終端在執行完程序後默認退出，因此能夠選擇在 return 0; 處增長一個斷點或者加一句 system(pause); ;

3、個性化 \(VS\) \(code\)

（做者快累死了。。。未完待續，持續更新）