本文章轉載轉載自 智傷帝的個人博客 - 原文鏈接
前言
其實一年多前就寫了一篇文章專門來安利 VScode 鏈接
那個時候還說 VScode 是個小眾編輯器，其實得益於前端開發剛猛的勢頭，這個編輯器也越來越流行了。
結合了最近一年多的使用經驗積累,我打算將自己使用 VScode 的經驗總結歸納一下。
希望大家受用 |ू･ω･` )B站也有別人錄下推薦的視頻(偏PHP后端方向的) av56583362
什么是 VScode
VScode 全稱為 Visual Studio Code ,是微軟公司開發的文本編輯器，由於名字過長，下面統統簡稱為 VScode。 百度百科
為什么推薦 VScode
其實這個問題已經不需要我回答，網上也有大量推薦 比如
他們給出的理由都很充分，有些東西也不需要我多加贅述。
不過作為寫給小白的教程，有些東西我還是需要明確一下。
在編程開發工具中，常用的代碼編寫工具有以下兩種分類:
- 集成開發環境(Integrated Development Environment)
- 腳本編輯器(Text Editor)
可能會有人對這兩個名詞很陌生,不過只要指出一些編程開發的工具相信大家就明白了。
集成開發環境(Integrated Development Environment)
- Visual Studio
- Android Studio
- Eclipse
- Xcode
- Netbeans
- JetBrains 全家桶
- PyCharm
- WebStorm
- Intellij IDEA
- ...
腳本編輯器(Text Editor)
- VisaulStudioCode
- Atom
- Sublime
- NotePad ++
- Vim
- Emacs
- HBuilder
關於這兩者的區別可以參照我初學編程的時候翻譯的教程 av15609748
因為當時初學所以翻譯質量不太好，請見諒_(:з」∠)_
在 3m50s 的地方 Simon 指出了 IDE 和 腳本編輯器 的區別。
腳本編輯器其實就是純文本編輯工具，它只是讓代碼更好地顯示，但是涉及到一些專門的測試環境就需要使用 IDE 這種復雜的開發環境。
用通俗的話來講就是 文本編輯器 是 導彈， 而 集成開發環境 是 核彈。
那更加強大的集成開發環境理應是最佳選擇，那我們為什么還會選擇導彈呢？
其實主要是因為殺雞焉用牛刀的原理。
集成開發環境通常集成過多的東西導致很臃腫，然而普通程序員又有多少人會用到全部的工具呢？
因此文件體積更小，啟動速度更快的腳本編輯器越來越受到程序員們的追捧。我們可以參照 VisualStudio 的大小 和 VisaulStudioCode 的文件大小比較就可以知道。
VisualStudio如果將所有語言的開發包都安裝上需要幾十個G
而VScode的安裝包大小只有不到 100M
由於集成開發環境的龐大臃腫，很多集成開發環境都是有自己的針對領域的，比如說 JetBrains 的全家桶IDE
每一個軟件都針對特定的開發環境需求進行優化，比如說 PyCharm 是針對 Python 而 Intellij IDEA 是針對 Java 的
而在這方面腳本編輯器因為其輕量化的特點通常還可以支持多種語言的編輯。但是話說回來，即便是殺雞焉用牛刀，隨着開發越來越復雜，導彈的威力很可能並不能滿足我們的開發需求的。
因此隨着時代的發展 Atom 和 Sublime 這種帶插件擴展的編輯器相繼出現，而其他編輯器也緊跟其后。
我們可以通過編輯器的插件獲取類似 IDE 的各種功能體驗，而且插件相當於擴展模塊，我們可以很輕松地開啟和關閉無關的功能，也滿足輕量化的需求。
如今 VScode 的插件的強大已經完全不輸於專業IDE，比如Google的新技術Flutter 就欽定了 VScode 和 Android Studio 兩個開發平台。
通過插件擴展的 VScode 開發 Flutter App 的體驗幾乎不輸於 Android Studio 這種專業 IDE 。當然由於這種高度定制化的插件功能擴展，如何搭配這些插件加快開發效率就得花很多時間去研究，不像 IDE 那樣一整套功能提供好了。
這里我總結一下 IDE 我不喜歡的點：
- 按鈕太多，功能太復雜，讓人勸退，對新手不友好
- 針對特定開發環境，無法兼容不同語言，不靈活
- 插件較少，一些自定義開發需求難以滿足
- 啟動緩慢，占用系統資源多
縱然 IDE 有些不便的地方，我們也沒必要全盤否定它，畢竟使用環境是不一樣的。
IDE適合大型開發，特別是需要編譯運行還要依賴各種環境的 C++ 或者 Java ，IDE的配套環境真的可以省去很多麻煩，調試使用 IDE 的工具也很省心。
腳本編輯器更加適合敏捷開發，比如 js python 這類的腳本語言。
而且現在很多IDE也支持插件開發進行功能擴展，並不是腳本編輯器特有的功能了。
以上就是我個人對 IDE 和 腳本編輯器 的看法，個人還是偏好 腳本編輯器 多一點另外必須強調 無論是 IDE 還是 腳本編輯器 都只是編程工具，編程最重要的是寫程序的人，因此沒有必要爭自己使用的工具來秀優越感，適合自己才是最好的。
最后在眾多腳本編輯器中 為什么 就選了 VScode呢？
其實幾年前還是 Sublime 和 atom 稱霸天下的時候。
不過后來 VScode 的插件生態建立起來之后，實現了彎道超車。
由於 atom 我沒用過，Sublime 我也只是用了很短一段時間，所以我自己也不好做出評價。
我總結一下目前對VScode積極的認識：
- 微軟爸爸的財大氣粗做后盾，維護很積極
- 圖形化圖標，交互比較友好
- 集成 Git 和 Cmd 以及 Debug 工具，我以前用 Sublime 的時候這些東西都沒有內置
- 安裝插件有圖形化界面，可以不敲命令行，對新手很舒服
- 插件超級豐富，社區極度活躍，有問題基本都可以在 Github Issue 以及 Stack Overflow 上查到答案
最重要一點是我自己也算是半個前端工程師，以前一直用 學校 教的 Dreamweaver ，自從接觸了 Sublime 之后就愛不釋手，后來另一個學前端的同學給我推薦了VScode真的就成了我編程開發的主力工具，大多數的開發都可以通過插件擴展實現在 VScode 上開發。
我印象最深刻的就是 VRML 語言，當時學校要求我們學習這個被淘汰的語言，而且還要用 VRML Pad 這種不知道是多少年前的開發工具，顏色高亮各種不清晰，操作各種不順手。
最后還是通過 VScode 的插件來完美解決這些的問題。
VScode 安裝
安裝VScode 特別是簡單，去百度搜索 VScode 點開第一個微軟的官方鏈接，點擊下載即可。
雙擊安裝包 點擊 安裝，基本上點擊下一步就可以了，幾個要點可以重點說一下
我接受協議必須勾選的- 路徑可以自定義，不過一般默認就可以了
添加到資源管理器上下文目錄這個操作可以添加右鍵 Code 打開當前目錄，非常方便。
將 Code 注冊為受支持的文件類型的編輯器這個操作會讓 VScode 支持的代碼文件全部編程變成 VScode 默認打開，文件圖標也會隨之更改，很好辨認。
安裝完成的界面如下圖
VScode 使用
通過上面的步驟，我們已經順利進入了軟件的啟動界面。
然而看到的全部是英文，可能有些人會覺得很難受，有沒有辦法轉換成中文界面呢？
當然是可以的，我們只需要安裝一個中文補丁就沒問題了。
那就可以好好講解一下 VScode 的界面的情況了
VScode 新手講解
注：經過更新之后，新版本UI有點不同，請見諒。
在歡迎使用的界面上，新手需要注意紅色框的區域
特別是下划線的部分的入門視頻和提示與技巧都是官方提供的說明講解。
當然里面都是英文的，有點遺憾。
另外右邊的
界面概覽可以清晰顯示出 VScode 各個區域的說明
交互式演練場 英文叫做 Interactive Playground 也是非常好的體驗文檔。
只可惜同樣沒有漢化。
關於交互式演練場的操作我將留到 VScode 的騷操作進行講解。
文件資源管理器
默認情況下 文件資源管理器 是空的，可以打開一個文件夾作為工作區。
點擊 打開文件夾 或者 拖拽文件夾進來都可以實現。
通過工作區可以管理當前文件夾里面的內容。
工作區上方的四個按鈕可以幫助你創建文件和文件夾。
對文件右鍵還有更多的刪除命令等等，也可以通過拖拽改變文件的位置。
跨文件搜索
通過跨文件搜索可以搜索當前工作區下的所有文件的內容。
通過這里找到的信息直接跳轉到相應文件的相關行。
源代碼管理
原代碼管理提供了簡單的 git 處理
基礎的功能諸如 push pull commit 都封裝好了
只需要點擊按鈕即可使用
啟動和測試
啟動和測試集成了 Debug 的模塊
和瀏覽器的 Debug 模塊基本相同。
這里可以通過 node.js 進行腳本測試
點擊 F5 就可以啟動 Debug 模式。
遇到設置紅色的斷點，代碼執行就會暫停。
終端集成
通過快捷鍵 ctrl+` 可以呼叫出來
默認是 windows 的 cmd 窗口，也可以切換
也可以切換成其他的終端啟動
總結
VScode的生態真的越來越強，各種語言開發的支持都很全面了。
當然還是如上文說的，一般還是前端用它比較多，蘿卜青菜各有所愛。
上面最后一張gif圖稍微顯示了一些 VScode 的便捷操作，關於這些騷操作以及插件運用我留到后面兩篇文章進行介紹