VsCode分享
此次分享主要來自知乎上的《VsCode從入門到進階》，一個朋友給我分享了一下，於是我聽了一下，做了一些筆記，藉此分享給大家。
VsCode官網地址為:
//code.visualstudio.com/
感興趣的朋友可以下載體驗一下:
內容大綱
1. VS Code 的優勢
2. VS 和 VS Code 到底有什麼關係？
-
微軟從 VS 組裡面抽了一撥人做 VS Code，是真的嗎？
-
VS 支援 Java ？背後的真相到底是怎樣的？
3. 你真的會用 VS Code 了嗎？
-
VS Code Insiders 版本
-
常用的配置項
-
命令面板
-
麵包屑導航/大綱/縮略圖
-
主題
-
快捷鍵
-
集成終端
4. 如何更好地學習 VS Code ？
-
學會提問
-
學會搜索
-
學會學習
5. 一起改進 VS Code，你也能成為 VS Code 的 Contributor
6. VS Code 的核心組件
-
Electron
-
Monaco Editor
-
Language Server Protocol
-
Debug Adapter Protocol
7. VS Code 怎麼做開源的？
8. 進階
-
命令行
-
玩轉 Git
-
打造自己的主題
-
快速創建屬於你的 Code Snippet
-
玩轉 Tasks，把重複的工作自動化
-
調試
-
遠程開發
9. 插件
-
插件管理
-
好用的插件推薦
-
你也可以開發一款屬於你的插件
一、VS Code 的優勢
-
開源
-
跨平台
-
輕量級
-
智慧提示
-
程式碼調試
-
內置Git支援
-
多語言支援
-
豐富的插件
1.學習曲線
2.用戶體驗(Terminal、調試器、版本控制、前端開發、擴展插件)
3.開源(一切皆開源，不止程式碼開源)
4.性能
(1)比IDE和Atorm要快
(2)與Vim和Sublime相比，略有差異
(3)不斷的性能優化(主要解決VsCode為什麼越用越慢問題):
a.插件進程與主進程的隔離
b. 插件的延遲載入
c.Text Buffer的優化，提升大文件和載入和編輯速度，減少記憶體使用率
5.豐富的插件(10000+以上插件，編輯器插件管理方便)
6.強大的生態
(1)強大的組件生態
a.Monaco Editor
b.Languge Server Protocol
c.Debug Adapter Protocol
(2)Visual Studio Family
a.Visual Studio Live Share:極大地方便了協作編程–實時共享編輯、跟隨游標、團隊調試、分享本地伺服器、共享終端等等。
b.Visual Studio IntelliCode:通過AI賦能，跟隨上下文給出編程建議和智慧提示，提高開發者的效率。
二、 VS 和 VS Code 到底有什麼關係？
相當於Java和JavaScript的關係，看上去有關係，實際上半毛錢關係都沒有，只是名字相似而已。
三、 你真的會用 VS Code 了嗎？
1.VsCode Insider版本
(1)每天獲取最新版本的VsCode
(2)與穩定版並存
2.命令面板
(1)快速列出所有命令
(2)快捷鍵:Ctrl+Shift+P或F1
3.常用的配置項
(1)Windows/Linux 文件-首選項-設置
(2)macOS Code-首選項-設置
4.麵包屑導航/大綱/縮略圖
5.主題
-
文件->首選項->顏色主題
-
文件->首選項->文件圖標主題
-
插件市場
6.常用快捷鍵
-
Ctrl+P 文件跳轉
-
Ctrl+Shift+Tab 在所有打開的文件中跳轉
-
Ctrl+Shift+P 命令面板
-
Ctrl+Shift+O 跳轉到文件中的Symbol
-
Ctrl+T 搜索所有的Symbols
-
Ctrl+G 跳轉到某一行
-
Alt+<-/->向後/向前跳轉
怎麼多命令怎麼記得住？
別怕，按照如下操作即可:
點擊幫助->鍵盤快捷方式參考
7.集成終端
打開集成終端:
-
使用Ctrl+快捷鍵
-
通過菜單欄 查看->終端
-
通過命令面板(Ctrl+Shift+P)，試圖:切換集成終端
四、如何更好地學習 VS Code ？
1.學會搜索
-
VsCode官網(//code.visualstudio.com/)
-
GitHub(//github.com/microsoft/vscode)
-
Google/Bing
-
Stack Overflow(//stackoverflow.com/)
2.學會提問
-
Environment
-
Repro steps
-
Actual behavior
-
Expected behavior
-
Code sample
-
Screenshot
上面所說的主要是關於如何提問，
環境->步驟->實際情況->預期情況->程式碼->截圖
目的:只為將一個問題描述清楚，減少回答者回答問題的時間成本。
3.學會學習
-
尋求幫助前，要有自己的思考
-
知其然知其所以然
-
舉一反三
五、一起改進 VS Code，你也能成為 VS Code 的 Contributor
-
提問
-
Issue
-
PRs
-
插件
-
翻譯
回饋渠道:
-
Bugs & feature request(Github Issue)
-
提問 (Stack Overflow)
-
討論 (Gitter Chat Room/Slack)
提問:
-
Stack Overflow
-
使用標籤
-
好的問題也能幫助別人搜索到
Issue:
-
Report bugs
-
Sumit feature request
-
Share you idea/feedback exising issues
-
幫助翻譯中文issue
PRs:
-
PR指南
-
哪些issue 可以發PR，有help-wanted或者bug標籤的issue、在發PR之前，先於相關的開發負責人討論
六、VS Code 的核心組件
1.Electron
-
GitHub地址(//github.com/electron/electron)
-
基於Node.js(作為後端)和Chromium(作為前端)
-
使用HTML、CSS、JavaScript開發跨平台桌面GUI應用程式
-
使用者:Atom，Skype、GitHub Desktop、Slack、Microsoft Teams
2.Monaco Editor
-
GitHub地址(//github.com/microsoft/monaco-editor)
-
基於瀏覽器的程式碼編輯器:IntelliSense、程式碼驗證、語法高亮、文件比較)
-
支援主流瀏覽器:IE11、Edge、Chrome、Firefox、Safari和Opera
-
使用者:Gitee Web IDE、Cloud Studio、Eclipse Che、Eclipse Theia、Azure DevOps、OneDrive、Edge Dev Tools
3.Language Server Protocol
-
Github地址(//github.com/microsoft/language-server-protocol)
-
它是Editor/IDE 與語言伺服器之間的一種協議，可以讓不同的Editor/IDE 方便嵌入各種程式語言，允許開發人員在最喜愛的工具中使用各種語言來編寫程式
-
支援LSP的開發工具:Eclipse IDE、 Eclipse Theia、Atorm、Sublime Text、Emacs
4.Debug Adapter Protocol
-
Github(//github.com/microsoft/debug-adapter-protocol)
-
DAP與LSP的目的類似，DAP把Editor/IDE與不同語言的debugger解耦，極大地方便了Editor/IDE與其他Debugger的集成
-
支援DAP的開發工具:Eclipse IDE、Eclipse Theia、Emacs、Vim
七、VS Code 怎麼做開源的？
開源的三個階段:
公開源程式碼、Issues &PRs、Planning & Design
1.開源的開發流程
VsCode不僅僅把程式碼開源出來，而是把整個產品的開發過程建立於開源之上。
-
每一年，VsCode團隊都會在GitHub Wiki 發布Roadmap，列出一整年的規劃圖
-
每個月初，在產品設計階段，VsCode團隊會在GitHub Issue上會發布Iteratioin Plan，列出這個月會做的每個功能，每一個功能基本會對應一個GitHub Issue，你可以看到詳細的設計以及mockup
2.開源的生態(以VsCode為例)
-
文檔(//github.com/microsoft/vscode/wiki)
-
Monaco Editor(參考前面GitHub鏈接)
-
Language Server Protocol(參考前面GitHub鏈接)
-
Debug Adapter Protocol(參考前面GitHub鏈接)
八、進階
1.命令行(支援命令行打開VsCode)
命令行–高級選項(VsCode啟動慢，查看插件記憶體使用情況)
2.玩轉Git
玩轉Git–合併衝突
3.打造自己的主題–顏色配置
可以自己編寫顏色插件，也可以去插件市場上下載自己中意的插件。
4.快速創建屬於你的Code Snippet
以我使用Idea為例，Idea中的Live Template與VsCode中的Code Snippet功能基本相同，都是將常用程式碼段抽取出來，通過自定義快捷鍵的方式調出來，減少重複編碼，提高效率。
5.玩轉Task，把重複的工作自動化
與WebStorm如圖功能一樣:
根本目的就是將常用命令抽取出來，不需要自己手動輸入
6.調試–lauch.json
7.遠程開發
Visual Studio Code Remote允許開發者將容器、遠程電腦或Windows Subsystem for Linux 作為完整的開發環境。
-
在部署環境相同的作業系統上進行開發，或者使用更大或更專業的硬體
-
把開發環境作為沙箱，以避免影響本地電腦配置
-
讓新手輕鬆上手，讓每個人都保持一致的開發環境
-
使用原本在本地環境不可用的工具或運行時，或者管理它們的多個版本
-
在WSL里開發Linux應用
-
從多台不同的電腦訪問現有的開發環境
-
調試在其他位置(比如客戶網站或雲端)運行的應用程式
九、插件
1.插件管理
a.web版插件市場
b.內置插件管理
c.命令行
2.好用的插件推薦(根據需求可自行去插件市場下載安裝使用)
a.Settings Sync:輕鬆同步VsCode所有配置
b.Code Runner:程式碼一鍵運行，支援超過40種語言
c.GitLens:Git管理利器
d.REST Client:也許是比Postman更好的選擇
e.Bracket Pair Colorizer:括弧顏色高亮
f.Browser Preview:把Chrome瀏覽器帶入VsCode中
g.LeetCode:Offer收割利器
h.Visual Studio Live Share:極大地方便了協作編程–實時共享程式碼編輯、跟隨游標、團隊調試、分享本地服務、共享終端等
i.Remote Development：基於SSH、Container或者WSL進行遠程開發
3.Visual Studio Code插件開發
-
設計
-
實現
-
推廣
-
維護
從設計->實現->推廣->維護，仔細想來與我們平常開發自己的軟體或者是公司的商業軟體，套路基本上都是相似的。
a.怎樣獲取靈感?
從自身需求出發
Auto Close Tag:GitHub Issue
其它編輯器/IDE的熱門插件
b.確定目標用戶
Code Runner(例子，CodeRunner插件可使用40種程式語言):
-
初學者
-
“懶人”
-
多語言用戶
4.有用資源
a.VsCode插件開發
(//code.visualstudio.com/api/get-started/your-first-extension)
b.VsCode插件樣例
(//github.com/developers-youcong/vscode-extension-dev)
c.我開發的插件
(//github.com/developers-youcong/youcongtech-blog)
5.開發環境
(1)Visual Studio Code
(2)Node.js
(3)Yeoman And VsCode Extension generator
(4)npm install -yo generator-code
a.VsCode介面功能擴展–Workbench
Tree View Container
Tree View
WebView
Status Bar Item
b.VsCode介面功能擴展–Editor area
CodeLens
Decoration
Gutter
Hover
Context Menu
6.推廣渠道
-
Stack Overflow、GitHub、Twitter、FaceBook、Google Plus、LinkedIn
-
部落格:V2ex、知乎、微信公眾號、開源中國、微博、CSDN
7.數據驅動
-
下載量、月活、日活
-
用戶的使用行為
-
優先順序
-
Fail fast
