changed 6 years ago  
Published Linked with GitHub

VSCode 的奇技淫巧



Yukai Huang

Study4TW .NET Conf 2019

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

關於我

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

信仰

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

VSCode 的奇技淫巧

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 →

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 →

總之就是炫炮

Outline

VSCode 簡介的部分

VSCode 獨步全球的部分

VSCode 奇技淫巧的部分

VSCode 簡介的部分

做個小調查

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

打開 VSCode 的官方網站…

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 →

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 →

程式碼編輯

重新定義

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

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 →

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 如何呢？

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 →

yukaii.tw/extension-stats

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 →

Stackoverflow survey 2019

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 →

Note: vi…visual 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

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 →

Note:

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

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 →

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 →

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!

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 →

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

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 →

Visual Studio Online

Visual Studio Online "Monaco"(2013)

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 →

Monaco Editor

再回到 VSCode

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 →

Visual Studio Online (2019)

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

欸不是啦！

集大成者

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 →

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 →

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

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 →

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 →

免 git subtree!

Note: Repository added to workspace

檔案修改歷史

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 →

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 →

好！

整個目錄比較

Compare Ancestry with Working Tree

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 →

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 →

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 →

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 →

本機預覽 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

還是得吹一下

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 →

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 →

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 →

想要新功能卻等不及？

自己來！

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 →

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

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 →

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 →
)

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

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 →

自己的擴充功能自己寫！

譁眾取寵

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 →

map-replace.js

來寫 VSCode Extensions!

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

來！

VSCode 簡介的部分

VSCode 獨步全球的部分

VSCode 奇技淫巧的部分

通通都給我各來一份！

Fin

VSCode 台灣 Markdown 台灣
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 →
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 →
https://bit.ly/33v2MmA https://bit.ly/2MNfisR
Select a repo