關於我

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

信仰

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

VSCode 的奇技淫巧

總之就是炫炮

Outline

VSCode 簡介的部分

VSCode 獨步全球的部分

VSCode 奇技淫巧的部分

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

93.3% TypeScript

TypeScript 不是拿來寫網頁的嗎？

驚不驚喜？

意不意外？

• 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

何德何能

VSCode 獨步全球的部分

VSCode 獨步全球的部分之一

Language Server Protocol

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

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

Open Standard

實作 IDE 的各種功能

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

(langserver.org)

寫 1 套語言伺服器

支援 n 套編輯器/IDE

or…

寫 1 套編輯器/IDE

支援 n 種語言

目前支援幾種語言？

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

打造 Live Share 大平台！

Bonus: 解包 VSLS

~/.vscode/extensions

~/.vscode/extensions

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 就讓我想到…

大會共筆麻煩略過這一段謝謝

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

• Link to GitHub

• …

三個我最常用的功能

• 檢視某個 commit 下的原始碼

• 檔案修改歷史

• 整個目錄比較

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

免 git subtree!

檔案修改歷史

好！

整個目錄比較

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 )

VSCode 奇技淫巧的部分之三

在公司想看 PTT 怎麽辦？

就直接看啊

用 VSCode 來看啊！

上 VSCode Marketplace 搜尋 PTT

自己的擴充功能自己寫！

譁眾取寵

map-replace.js

來寫 VSCode Extensions!

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

來！

VSCode 簡介的部分

VSCode 獨步全球的部分

VSCode 奇技淫巧的部分

通通都給我各來一份！

Fin