VSCode 的奇技淫巧



Yukai Huang

Study4TW .NET Conf 2019


Note: 誠惶誠恐,先感謝一番


關於我

  • Yukai
  • HackMD 開發者 & 粉專小編
  • VSCode Taiwan 粉專小編

信仰

  • 我用 neovim VSCode 寫扣!
  • 我用 空格 TAB 縮排!

VSCode 的奇技淫巧



總之就是炫炮


Outline

VSCode 簡介的部分

VSCode 獨步全球的部分

VSCode 奇技淫巧的部分


VSCode 簡介的部分


做個小調查

Note: 每次都來問一下,現場朋友用 VSCode 當做主力編輯器的能不能幫我舉個手?好謝謝


打開 VSCode 的官方網站




程式碼編輯

重新定義


原來是重新定義的部分啊!


build 2015 - A Deep Dive on the Redefined Code Editor for OS X, Linux and Windows


Editor

  • 輕量
  • 可以「支援」多種語言的語法上色
  • 鍵盤為中心
  • 自己的工作流程自己弄
  • vim, emacs, sublime,

IDE

  • 專案系統
  • 程式碼理解:跳轉定義、重構
  • 內建除錯
  • 介面設計
  • Visual Studio, XCode, JetBrains 系列

VSCode 呢?


從 Editor 往 IDE 靠近

  • 維持編輯器的輕量高效
  • 導入專案的概念
  • 除錯器
  • 語言支援(不只是程式碼上色)
  • 任務管理

Technical Stack


Note: GitHub TypeScript percentage


93.3% TypeScript


TypeScript 不是拿來寫網頁的嗎?


Note: VSCode with Chrome Devtools Open


驚不驚喜?

意不意外?


  • Built with Electron Framework

  • Cross Platform (Windows/macOS/Linux)

  • Open source under MIT License

    • VSCodium

Electron Framework



用網頁技術打造跨平臺的桌面應用程式

HTML/CSS/JavaScript


  • Slack
  • Discord
  • Microsoft Teams
  • Figma
  • GitKraken

欸!那你有聽過 Atom 嗎?


Electron Framework

就是因此誕生


說回來 VSCode

對比 Atom 如何呢?


yukaii.tw/extension-stats


Stackoverflow survey 2019


Note: vivisual studio code


何德何能


VSCode 獨步全球的部分


VSCode 獨步全球的部分之一


Language Server Protocol


語言Language伺服器Server通訊協定Protocol


編輯器或 IDE

語言Language伺服器Server

溝通的協定


欸所以語言伺服器又是什麼?


Open Standard


實作 IDE 的各種功能

  • Code completion
  • Hover
  • Jump to def
  • Workspace symbols
  • Find references
  • Diagnostics

(langserver.org)

Note: - Code completion 程式碼自動補全 - Hover 懸浮資訊(定義、API 文件) - Jump to def 跳轉到定義 - Workspace symbols 工作空間符號 - Find references 尋找引用 - Diagnostics 診斷


寫 1 套語言伺服器

支援 n 套編輯器/IDE


or


寫 1 套編輯器/IDE

支援 n 種語言


LSP





LSP       EVERYWHERE


目前支援幾種語言?



91 種!


支援哪些 Editor/IDEs?


  • Neovim: coc.nvim (neovim,激推!)
  • Sublime: Sublime LSP
  • Atom: Atom IDE


要把 VIM 改裝成 真 IDE

就靠 LSP 啦!

歡迎大家跳槽 neovim


還有個東西叫

Debug Adapter Protocol


LSP 的 Debugger 版

再等一等


VSCode 獨步全球的部分之二


Visual Studio Live Share


  • Code
  • Terminal
  • Server
  • Audio
  • Chat


Live Share Whiteboard

Note: Live share Whiteboard


打造 Live Share 大平台!


Bonus: 解包 VSLS


~/.vscode/extensions


~/.vscode/extensions


Note:

cd ~/.vscode/extensions/ms-vsliveshare.vsliveshare-1.0.1123/out/prod/



denandz/sourcemapper


go get -u -v github.com/denandz/sourcemapper

ruby -run -e httpd -- . -p 8000

sourcemapper \
    -url http://localhost:8000/extension-prod.js.map \
    -output src

Bang!


OT 演算法Algorithm


Operational Transformation


  • 即時協作演算法
  • ex: Google Docs

from wikipedia


說到 OT 就讓我想到



Note: 史蒂夫和戴夫都使用 HackMD 協作共筆 史蒂夫鑽研如何使用最新 .NET Core 3 功能 戴夫精研如何成為跑跑卡丁車車神 史蒂夫追蹤 HackerNews 動態,掌握最新技術消息 戴夫關注最新遊戲直播 為什麼戴夫和史蒂夫一樣都是程式高手? 因為戴夫選擇 HackMD 在 HackMD 上閱讀史蒂夫的筆記


Hack M D

大會共筆麻煩略過這一段謝謝
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


VSCode 獨步全球的部分之三


Remote Development

遠端開發


用本機的 VSCode

連線到遠端的機器做開發


Microsoft Docs


Language Server, Debugger, Workspace Extension Process

放到 Remote 跑

介面那些還是放在本機


支援的 Remote 環境

  • SSH

  • Container

  • WSL



Visual Studio Online


Visual Studio Online "Monaco"(2013)


Monaco Editor


再回到 VSCode


Visual Studio Online (2019)


“那真是太諷刺了,紹安,你離開你師傅繞了一大圈,最後到達的境界,竟然是你不想學 ... 還是要回到故鄉來的,這個四千里長江的盡頭上海,或許正是你的極限也說不定。”

欸不是啦!


集大成者


噢對了 Visual Studio Online 有自架版 (self-hosted)


Alternatives

  • code server
  • theia IDE (gitpod)
  • CodeSandbox
  • Eclipse Che
  • Cloud9

VSCode 獨步全球的部分

  • Visual Studio Live Share

  • Remote Development

  • Visual Studio Online


跳一下


VSCode 奇技淫巧的部分


Git/GitHub 擴充功能大補帖

  • GitLens

  • GitHub Pull Requests

  • Git Graph


Git/GitHub 擴充功能大補帖

  • → GitLens

  • GitHub Pull Requests

  • Git Graph



  • Git Blame

  • File History

  • Browse commit


三個我最常用的功能

  • 檢視某個 commit 下的原始碼

  • 檔案修改歷史

  • 整個目錄比較


檢視某個 commit 下的原始碼 (Explore Repository from Revision)


免 git subtree!

Note: Repository added to workspace


檔案修改歷史




好!


整個目錄比較

Compare Ancestry with Working Tree





本機預覽 PR 的變更

fancy way


Git/GitHub 擴充功能大補帖

  • GitLens

  • → GitHub Pull Requests

  • Git Graph



在 VSCode

發 PR

審 PR

合 PR


Git/GitHub 擴充功能大補帖

  • GitLens

  • GitHub Pull Requests

  • → Git Graph



在 VSCode 看 Git 線圖!


Live DEMO


說到 GitLen

還是得吹一下





想要新功能卻等不及?

自己來!


hackmdio/codimd


VSCode 奇技淫巧的部分之二


打造自己的 VSCode 介面


Level 1

Colors & Font


vscodethemes.com

選一套超讚的主題


在 Programming Fonts

選一套超讚的字體


Cascadia Code


順帶一題

我用的是 Menlo (Editor) + Iosevka (Terminal)



Level 2

混合特調 (Mix)


Mix?



A UI colors + B syntax colors

寫進 preference overwrite


Level 3

Custom UI


Vibrancy


Custom UI


Custom CSS


Essence (already dead

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
)


VSCode 奇技淫巧的部分之三


在公司想看 PTT 怎麽辦?

就直接看啊


用 VSCode 來看啊!



上 VSCode Marketplace 搜尋 PTT


自己的擴充功能自己寫!

譁眾取寵


map-replace.js



來寫 VSCode Extensions!

  • 用 VSCode 開發
  • TypeScript 絕佳開發體驗
  • 有點紅海了

來!


VSCode 簡介的部分

VSCode 獨步全球的部分

VSCode 奇技淫巧的部分


通通都給我各來一份!


Fin


VSCode 台灣 Markdown 台灣
https://bit.ly/33v2MmA https://bit.ly/2MNfisR
Select a repo