六角 | Big Boy Can Code
2019.09.24
- 自我介紹
- VScode相關知識 | 技術
- VSCode 套件
- 總結
自我介紹一下
自我介紹一下
- 2017.03-學程式 (HTML, CSS, JS, React)
- 2017.07-Junior Frontend Developer
- 2018.04-Frontend Developer (Remote)
- 2018.04-開始了 Big Boy Can Code Youtube/FB
- 2019.03-全職接案者
VSCode 介紹
- 2015/11 launched
- Electron 開發的 (Slack)
- 優點: 非常輕量, 客製化,強大(git, terminal)
- 缺點: 有一點複雜,新手有一點點難入手
我跟VSCode的故事
VSCode 主題
VSCode 字體
Firacode - 連結🔗
VSCode Code Snippet
VS Code 中自訂程式碼片段的功能(pjchender) - 連結🔗
推薦!!! | 快速建立VSCode Custom Code Snippet, 任何editor都適用! - 連結🔗
VSCode 快捷鍵
Short Cuts
window - http://i.imgur.com/WNRXFVD.png
套件看個人 | Short Cuts 每一個人都可以適用
VSCode 快捷鍵
Short Cuts
- MultiSelect (多選項) - alt + 滑鼠點擊 | command + D
- 快速移動 - alt + 鍵盤箭頭
- 快速複製 - Command + Shift + D
- File Folding
VScode #0 - Emmet
- 開發類型
- 推薦給所有工程師
- 快速建立HTML
- Emmet - 官網連結
VScode #1
CSS Peak
- 開發類型
- 推薦給重度CSS使用者
- 快速找到CSS
- CSS Peak 連結🔗
VScode #2
Live Server
VScode #3
Path Intelligence
- 開發類型
- 推薦給所有工程師, 尤其是Javascript
- 快速找到檔案路徑 |跟 VScode 內建 intellisense 很像
- Path Intelligence 連結🔗
VScode #4
Color Highlights
- 開發類型 |美觀類型
- 推薦給CSS開發者
- 快速看懂顏色 + 快速選擇顏色
- Color Highlights 連結🔗
VScode #5
Bracket Pair Colorizer
- 開發類型 |美觀類型
- 推薦給所有開發者
- 快速看懂你的掛號
- Bracket Pair Colorizer 連結🔗
VScode #7
Guides
- 開發類型
- 推薦給所有開發者
- 快速看懂你的縮排(Indentation)
- Guides 連結🔗
VScode #8
BookMarks
- 工具類型
- 推薦給所有開發者
- 快速找到你的Code | 大專案 |解決 Bug
- Bookmarks 連結🔗
VScode #9
Todo
- 工具類型
- 推薦給所有開發者
- 快速找到你的Todo & Fixed| 大專案 |解決 Bug
- Todo Highlight 連結🔗
VScode #10
Project Manager
- 工具類型
- 推薦給管理很多專案的人 |接案的人
- 快速找到你的專案
- Project Manager 連結🔗
VScode #10
其他Extension
總結 Part I
- Extension 最後都只是工具, 它不會讓你變高手
總結
- Extension 最後都只是工具, 它不會讓你變高手
- 沒有最好的工具,只有適合你的工具
總結
- Extension 最後都只是工具, 它不會讓你變高手
- 沒有最好的工具,只有適合你的工具
- funfunfunction 的故事
總結 Part II
- 不要放太多extension, VScode 會變慢
- 建議10-15個就好了
總結 Part III
F&Q
Big Boy VScode
By Danny Huang
Big Boy VScode
- 749