推薦的 VS Code Extensions 整理(2019/2月更新)

Angel

·

Follow

Published in

Its Ok to Make Mistakes

·

4 min read

·

Feb 19, 2019

--

Share

1. 安裝 VS Code

2. VS Code 介面主題

3. HTML / 路徑 / 排版 / 檔案切換 / 瀏覽器開啟 / 錯字檢查

4. CSS / SASS / 色彩 / 圖片

5. Git 版本控管

6. NPM / Yarn / Dependencies

7. 標記書籤

VS Code 介面主題

• Material Icon Theme: 基於 Material Desgin 的檔案主題icon Link →

HTML / 路徑 / 排版 / 檔案切換 / 瀏覽器開啟 / 錯字檢查

• Auto Close Tag: 自動關閉HTML Tag產</> Link →
• Auto Rename Tag: 自動更改相同的 HTML tags. Link →
• Prettier: 自動編排 HTML / JavaScript / TypeScript / CSS 格式 Link →
  ⌘ + P + > + Format Document
  => 可以與ESlint複合使用 教學
• Path Intellisense: 輸入路徑時自動補完路徑 Link →
• Paste and Indent: 貼上程式碼時自動縮排 Link →
• Project Manager: 在不同專案間快速切換 Link →
  儲存要快速切換的專案 > ⌘ + P + > + Project Manager: save project
  切換專案 > ⌘ + P + > + Project Manager: List projects to open 教學
• open in browser: option(Alt) + B 打開html檔案在browser Link →
• Code Spell Checker: 檢查英文拼字錯誤 Link →

CSS / SASS / Styled-components / 色彩 / 圖片

• Color Highlight： 強調 CSS 顏色 Link →
• SVG Viewer: 右鍵看SVG圖形 Link →
• IntelliSense for CSS class names: 自動在html完成css的class Link →
• Sass Formatter: Sass / Scss 排版 Link → shift + option(Alt) + F
• Sass: Sass的縮排、高亮、自動完成和快速縮寫 Link →
• Live Sass Compiler: SASS編譯 Link → 建議使用 sass-loader 取代
• Live Server: 動態頁面更新 Link → 建議使用 live-server 取代
• styled-components-snippets: Styled-component 縮寫模版 Link →

Git 版本控管

• gi: 設定gitignore Link → 教學 Shift+Cmd+P >>gi>node>append 來設定gitignore
• Git Lens：看Git中code的狀態和git blame Link →
• Git History: Git圖形化介面 Link →

NPM / Yarn / Dependencies / 寫 Code 風格統一

• Version Lens: 在 Package.json 檔案中可以看到安裝的套件是否為最新版本 Link → 教學
• Import Cost: 計算 imports 進來的檔案大小 Link →
• npm: 管理 npm commands Link →
  ⌘ + P + > + npm
• npm Intellisense: 自動完成 npm modules Link →
• ESLint: 找出語法錯誤/寫 Code 風格統一 Link →
  教學1
  教學2

標記書籤

• Bookmarks: 標記書籤在正在編輯的行數前面 Link →
  教學command(Ctrl)+option(Alt)+K就可加書籤;command(Ctrl)+option(Alt)+L下一個書籤;command(Ctrl)+option(Alt)+J上一個書籤

Say hello! 我是 Angel,這裏的內容如果有幫到你，希望能獲得一些拍手作為鼓勵 
工作上的合作歡迎隨時透過 Mail 聯繫我 contact@aneglho.design– 
Thanks for watching!