---
title: VSCode 的奇技淫巧 - Yukai Huang @ Study4TW .Net Conf 2019
tags: talk
---

<style>
.reveal section img {
border: none;
background: transparent;
}

.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
text-shadow: 1px 1px 14px #0000007a;
}

html.dim .backgrounds {
filter: saturate(.7) brightness(.6);
transition: filter ease-in-out 500ms;
}
</style>

# VSCode 的奇技淫巧

<br>
<br>

### Yukai Huang

Study4TW .NET Conf 2019

---


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

---

## 關於我

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

---

## 信仰

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

---

# VSCode 的奇技淫巧

---


---


總之就是炫炮

---

# Outline

## VSCode 簡介的部分 <!-- .element: class="fragment" data-fragment-index="2" -->
## VSCode 獨步全球的部分 <!-- .element: class="fragment" data-fragment-index="2" -->
## VSCode 奇技淫巧的部分 <!-- .element: class="fragment" data-fragment-index="2" -->

---

# VSCode 簡介的部分

---

## 做個小調查

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

---

打開 VSCode 的官方網站....

---


---


---

# 程式碼編輯
# 重新定義 <!-- .element: class="fragment" data-fragment-index="2" -->

---

<!-- .slide: data-background="https://i.imgur.com/I7Kj3Bw.jpg" -->

## 原來是重新定義的部分啊！

---


<small>[build 2015 - A Deep Dive on the Redefined Code Editor for OS X, Linux and Windows](https://channel9.msdn.com/Events/Build/2015/3-680)</small>

---

## Editor

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

---

### IDE

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

---

## VSCode 呢？

---

### 從 Editor 往 IDE 靠近

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

---

## Technical Stack

---

<!-- .slide: data-background="https://i.imgur.com/5DC8Fjl.png" -->

Note:
GitHub TypeScript percentage

---

<!-- .slide: data-background="https://i.imgur.com/5DC8Fjl.png" data-state="dim" -->

# 93.3% TypeScript

---

### TypeScript 不是拿來寫網頁的嗎？

---

<!-- .slide: data-background="https://i.imgur.com/bLYlS87.png" -->

Note:
VSCode with Chrome Devtools Open

---

<!-- .slide: data-background="https://i.imgur.com/IE6H2x7.jpg" -->

### 驚不驚喜？
### 意不意外？

---

<!-- .slide: data-background="https://i.imgur.com/YeD2253.png" data-state="dim" -->

- ### Built with Electron Framework
- ### Cross Platform (Windows/macOS/Linux)
- ### Open source under MIT License
- VSCodium

---

# Electron Framework

<br><br>

### 用網頁技術打造跨平臺的桌面應用程式 <!-- .element: class="fragment" data-fragment-index="2" -->

### HTML/CSS/JavaScript <!-- .element: class="fragment" data-fragment-index="3" -->

---

- Slack
- Discord
- Microsoft Teams
- Figma
- GitKraken
- ...

---

<!-- .slide: data-background="https://i.imgur.com/RyxtQUu.png" -->

## 欸！那你有聽過 Atom 嗎？

---

## Electron Framework
## 就是因此誕生

---

## 說回來 VSCode
## 對比 Atom 如何呢？

---


<small>yukaii.tw/extension-stats</small>

---


<small>[Stackoverflow survey 2019](https://insights.stackoverflow.com/survey/2019#development-environments-and-tools)</small>

---


Note:
vi...visual studio code

---

## 何德何能

---

## VSCode 獨步全球的部分

<!-- .slide: data-background="https://i.imgur.com/DQAp2OM.jpg" -->

---

## VSCode 獨步全球的部分之一

---

## Language Server Protocol

---

## {語言|Language}{伺服器|Server}{通訊協定|Protocol}

---

<div style="text-align: left; position: absolute; top: 0; padding-left: 60px;">
<h3>
編輯器或 IDE
</h3>
<h2 style="writing-mode: vertical-rl; height: 7em; ">
<!-- .element: class="fragment" data-fragment-index="1" -->
與<ruby>語言<rt>Language</rt></ruby><ruby>伺服器<rt>Server</rt></ruby>
</h2>
<h1 style="margin-top: -1.8em; margin-left: 2em;">
溝通的協定
<!-- .element: class="fragment" data-fragment-index="2" -->
</h1>
</div>

---

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

---

## Open Standard

---

### 實作 IDE 的各種功能

- Code completion
- Hover
- Jump to def
- Workspace symbols
- Find references
- Diagnostics
- ...

<br>

<small>(langserver.org)</small>

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

---

## 寫 1 套語言伺服器
## 支援 n 套編輯器/IDE

---

or...

---

## 寫 1 套編輯器/IDE
## 支援 n 種語言

---

<!-- .slide: data-background="https://i.imgur.com/Ug0OZkF.jpg" -->

<style>
.reveal .narrow-h1 h1 {
letter-spacing: -5px;
}
</style>

<div class="narrow-h1">
<h1>
LSP
</h1>

<br><br><br><br>

<h1>
LSP &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; EVERYWHERE
</h1>

</div>

---

## 目前支援幾種語言？

---

<!-- .slide: data-background="https://i.imgur.com/05wm5PU.png" -->

---

<!-- .slide: data-background="https://i.imgur.com/05wm5PU.png" data-state="dim" -->

# 91 種！

---

## 支援哪些 Editor/IDEs?

---

- Neovim: coc.nvim (neovim，激推！)
- Sublime: Sublime LSP
- Atom: Atom IDE
- ...

---

<!-- .slide: data-background="https://i.imgur.com/7kn1OEE.png" -->

---

<!-- .slide: data-background="https://i.imgur.com/7kn1OEE.png" data-state="dim" -->

## 要把 VIM 改裝成 **真 IDE**
## 就靠 LSP 啦！

<small>歡迎大家跳槽 neovim</small>

---

## 還有個東西叫
## Debug Adapter Protocol

---

## LSP 的 Debugger 版

<small>再等一等</small> <!-- .element: class="fragment" data-fragment-index="1" -->

---

## VSCode 獨步全球的部分之二

<!-- .slide: data-background="https://i.imgur.com/DQAp2OM.jpg" -->

---

<!-- .slide: data-background="https://i.imgur.com/m9WkIEW.png" -->

## Visual Studio Live Share

---

- Code
- Terminal
- Server
- Audio
- Chat
- ...

---

<!-- .slide: data-background="https://i.imgur.com/t85SAoT.png" -->

---

<!-- .slide: data-background="https://user-images.githubusercontent.com/116461/50567457-dddaba00-0cf9-11e9-840b-1b0a984d5ad9.gif" -->

### Live Share Whiteboard <!-- .element: class="fragment" data-fragment-index="1" -->

Note:
Live share Whiteboard

---

## 打造 Live Share 大平台！

---

<!-- .slide: data-background="https://media.giphy.com/media/pO4UHglOY2vII/giphy.gif" -->

## Bonus: 解包 VSLS

---

## `~/.vscode/extensions`

---

<!-- .slide: data-background="https://i.imgur.com/puW9zHA.png" data-state="dim" -->

## `~/.vscode/extensions`

---


Note:

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

---


---


<small>[denandz/sourcemapper](https://github.com/denandz/sourcemapper)</small>

---

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

---

<!-- .slide: data-background="https://i.imgur.com/KFXT32M.png" data-state="dim" -->

# Bang!

---


OT {演算法|Algorithm}

---

## Operational Transformation

---

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

---


<small>from wikipedia</small>

---

## 說到 OT 就讓我想到...

---

<!-- .slide: data-background="https://i.imgur.com/voctA7q.png" -->

---

<!-- .slide: data-background="https://i.imgur.com/O6K97nD.png" -->

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

---

<!-- .slide: data-background="#ffffff" -->

<style>
.condensed-span > span {
margin-left: -.1em;
margin-right: -.1em;
}
</style>

<div style="font-size: 3em;" class="condensed-span">
<span style="color: #007EB2;">寫</span>
<span style="color: #FF8A00;">文</span>
<span style="color: #DB3623;">件</span>
<span style="color: #DB3623;">？</span>

</div>

<div style="font-size: 3em; margin-left: -0.2em;" class="condensed-span">
<!-- .element: class="fragment" data-fragment-index="1" -->
<span style="color: #007EB2;">Hack</span>
<span style="color: #FF8A00;">M</span>
<span style="color: #DB3623;">D</span>
</div>

---

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

---

## VSCode 獨步全球的部分之三

<!-- .slide: data-background="https://i.imgur.com/DQAp2OM.jpg" -->

---

## Remote Development
## 遠端開發

---

## 用本機的 VSCode
## 連線到遠端的機器做開發

---


<small>[Microsoft Docs](https://code.visualstudio.com/docs/remote/remote-overview)</small>

---

### Language Server, Debugger, Workspace Extension Process....
## 放到 Remote 跑
## 介面那些還是放在本機 <!-- .element: class="fragment" data-fragment-index="1" -->

---

## 支援的 Remote 環境

- ### SSH
- ### Container
- ### WSL

---


---

## Visual Studio Online

---


<small>Visual Studio Online "Monaco"(2013)</small>

---


<small>Monaco Editor</small>

---

再回到 VSCode

---


<small>Visual Studio Online (2019)</small>

---

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

</div>

~~欸不是啦！~~

<style>
.reveal .slides .text-left {
text-align: left;
}
</style>

---

## 集大成者


---


噢對了 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

---

<!-- .slide: data-background="https://i.imgur.com/lYe7eds.jpg" -->

## 跳一下

---

<!-- .slide: data-background="https://media.giphy.com/media/xT0xeJpnrWC4XWblEk/giphy.gif" -->

## VSCode 奇技淫巧的部分

---

## Git/GitHub 擴充功能大補帖

- ### GitLens
- ### GitHub Pull Requests
- ### Git Graph

---

## Git/GitHub 擴充功能大補帖

- ### → GitLens
- ### GitHub Pull Requests
- ### Git Graph

---

<!-- .slide: data-background="https://i.imgur.com/n7xQR0g.png" -->

---

- ## Git Blame
- ## File History
- ## Browse commit
- ## Link to GitHub
- ## ...

---

## 三個我最常用的功能

- ## 檢視某個 commit 下的原始碼
- ## 檔案修改歷史
- ## 整個目錄比較

---

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


---


## 免 git subtree!

<!-- .element: class="fragment" data-fragment-index="2" -->

Note:
Repository added to workspace

---

## 檔案修改歷史

---


---


---

# 好！

---

### 整個目錄比較

Compare Ancestry with Working Tree


---


---


---


---

## 本機預覽 PR 的變更

<small>fancy way</small>

---

## Git/GitHub 擴充功能大補帖

- ### GitLens
- ### → GitHub Pull Requests
- ### Git Graph

---

<!-- .slide: data-background="https://i.imgur.com/0geNQqi.png" -->

---

<!-- .slide: data-background="https://i.imgur.com/0geNQqi.png" data-state="dim" -->

## 在 VSCode
### 發 PR
### 審 PR
### 合 PR

---

## Git/GitHub 擴充功能大補帖

- ### GitLens
- ### GitHub Pull Requests
- ### → Git Graph

---

<!-- .slide: data-background="https://i.imgur.com/P16CsUA.png" -->

---

<!-- .slide: data-background="https://i.imgur.com/P16CsUA.png" data-state="dim" -->

## 在 VSCode 看 Git 線圖！

---

### Live DEMO

---

## 說到 GitLen
## 還是得吹一下

---


---


---


---

### 想要新功能卻等不及？
### 自己來！

---


<small>hackmdio/codimd</small>

---

<!-- .slide: data-background="https://media.giphy.com/media/xT0xeJpnrWC4XWblEk/giphy.gif" -->

## VSCode 奇技淫巧的部分之二

---

## 打造自己的 VSCode 介面

---

## Level 1

## Colors & Font

---

<!-- .slide: data-background="https://i.imgur.com/jjjsQyA.png" data-state="dim" -->

## 在 vscodethemes.com
## 選一套超讚的主題

---

<!-- .slide: data-background="https://i.imgur.com/kcXhuBP.png" data-state="dim" -->

## 在 Programming Fonts
## 選一套超讚的字體

---

<!-- .slide: data-background="https://i.imgur.com/hsGknHr.png" data-state="dim" -->

## Cascadia Code

---

<!-- .slide: data-background="https://i.imgur.com/xExBDfF.png" data-state="dim" -->

### 順帶一題
### 我用的是 Menlo (Editor) + Iosevka (Terminal)

---

<!-- .slide: data-background="https://i.imgur.com/F32McIj.png" -->

---

## Level 2

### 混合特調 (Mix)

---

## Mix?

---


---

### A UI colors + B syntax colors
### 寫進 preference overwrite

---

## Level 3

### Custom UI

---

<!-- .slide: data-background="https://i.imgur.com/sBZ3yJ6.jpg" -->

## Vibrancy

---

Custom UI


---

Custom CSS


---

<small>Essence (already dead :sob:)</small>


---

<!-- .slide: data-background="https://media.giphy.com/media/xT0xeJpnrWC4XWblEk/giphy.gif" -->

## VSCode 奇技淫巧的部分之三

---

### 在公司想看 PTT 怎麽辦？

~~就直接看啊~~ <!-- .element: class="fragment" data-fragment-index="1" -->

---

## 用 VSCode 來看啊！

---


---

上 VSCode Marketplace 搜尋 PTT


---

### 自己的擴充功能自己寫！

~~譁眾取寵~~

---


<small>map-replace.js</small>

---


---

## 來寫 VSCode Extensions!

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

---

# 來！

---

## VSCode 簡介的部分
## VSCode 獨步全球的部分
## VSCode 奇技淫巧的部分

---

<!-- .slide: data-background="https://i.imgur.com/Tha3EdX.jpg" data-state="dim" -->

## 通通都給我各來一份！

---

## Fin

---

<div class="big-table">

| VSCode 台灣 | Markdown 台灣 |
|:------------------------------------------:|:------------------------------------------:|
|  |  |
| https://bit.ly/33v2MmA | https://bit.ly/2MNfisR |

</div>

<style>
.reveal section .big-table img {
max-width: unset;
max-height: unset;
}

</style>