六角 | 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 theme - 連結🔗

VSCode 字體

Firacode - 連結🔗

 

VSCode Code Snippet

 VS Code 中自訂程式碼片段的功能(pjchender)  - 連結🔗

 

推薦!!! | 快速建立VSCode Custom Code Snippet, 任何editor都適用!  - 連結🔗

 

VSCode 快捷鍵

Short Cuts

套件看個人 | 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

  • 工具型
  • 推薦給前端工程師
  • live reload | Local Web Server vs Static HTML 連結🔗
  • 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

  • 754