標籤: VS code 頁1

[VS Code 擴充套件] Buildt AI 透過文字描述搜尋，找到專案中的該功能的原始碼
網路資源

[VS Code 擴充套件] Buildt AI 透過文字描述搜尋，找到專案中的該功能的原始碼

Buildt AI 這個 VS Cod 擴充套件可以直接透過模糊的文字描述，直接找到你專案中的該功能的原始碼，在套件的介紹還有提到將來還會有幫你產生 code 以及優化 code 的功能，有興趣的可以使用看看。

Marp- 利用 Markdown 來製作投影片
網路資源

Marp- 利用 Markdown 來製作投影片

喜歡 Markdown 的朋友，如果有想要製作投影片的話，可以試試看 Marp 這個服務。

[VS Code 擴充套件] SVG- 方便的 SVG 標籤提示與預覽工具
網路資源

[VS Code 擴充套件] SVG- 方便的 SVG 標籤提示與預覽工具

在用 VS Code 寫網站時，如果有需要用到 SVG，推薦可以使用 SVG 這個 extension，只要安裝後就可以提示 SVG 的 code，以及有 SVG 的預覽功能。

透過 VS Code 的 Live Sass Compiler 客製化 Bootstrap 的 CSS
教學

透過 VS Code 的 Live Sass Compiler 客製化 Bootstrap 的 CSS

我們在網站要客製化 Bootstrap 的 CSS 其實最好是去修改 SCSS 會比較好，如果網站本身沒有編譯 SCSS 的環境，建議可以透過之前介紹的 VS Code 套件 Live Sass Compiler 來編譯，首先安裝完後，再去 Bootstrap 官網下載原始碼。

[VS Code 擴充套件] TODO Highlight- 幫你把待辦事項清楚標示出來
網路資源

[VS Code 擴充套件] TODO Highlight- 幫你把待辦事項清楚標示出來

TODO Highlight 是一個 VS Code 的擴充套件，安裝後可以藉由在註解時加上一些關鍵字讓樣式改變，方便提示開發者該做的事情。

[VS Code 擴充套件] PHP Intelephense- 格式化 PHP 程式碼
網路資源

[VS Code 擴充套件] PHP Intelephense- 格式化 PHP 程式碼

PHP Intelephense 是一個簡單好用的 VS Code 格式化擴充套件，只要安裝後按右鍵就可以格式化 PHP 的程式碼，或是按下 Shift+Alt+F 透過熱鍵格式化文件。

[VS Code 擴充套件] vscode-pets 在 VS Code 上面養個寵物吧
網路資源

[VS Code 擴充套件] vscode-pets 在 VS Code 上面養個寵物吧

vscode-pets 這是一個輕鬆的 VS Code 套件，安裝後就能夠在 VS Code 上面養寵物，而且也能透過設定替換主題喔。

[VS Code 擴充套件] Material Icon Theme- 使用 Material Icon 當你的檔案圖示
網路資源

[VS Code 擴充套件] Material Icon Theme- 使用 Material Icon 當你的檔案圖示

Material Icon Theme 是可以把 VS Code 的檔案圖示替換成 Material Icon 的樣子，喜歡漂亮介面的朋友可以使用看看。

[VS Code 擴充套件] 使用 Live Sass Compiler 套件自動編譯 SASS/SCSS
網路資源

[VS Code 擴充套件] 使用 Live Sass Compiler 套件自動編譯 SASS/SCSS

SASS/SCSS 是寫 CSS 的好幫手，不過一般要寫的話都需要先安裝好相關的環境才能開始寫，不過還好 VS Code 有人就開發出可以直接自動編譯的套件 Live Sass Compiler，安裝後就算不弄環境也可以直接撰寫 SASS/SCSS 了。

[VS Code 擴充套件] Git Graph- 視覺化 Git 套件
網路資源

[VS Code 擴充套件] Git Graph- 視覺化 Git 套件

Git Graph 是 VS Code 視覺化 Git 的擴充套件，也可以自訂調整 UI 的樣式。

[VS Code 擴充套件] Settings Sync- 同步 VS Code 設定的好套件
網路資源

[VS Code 擴充套件] Settings Sync- 同步 VS Code 設定的好套件

Settings Sync 是一個可以方便幫你同步 VS Code 設定跟套件的好工具，因為該套件是使用 Github 帳號儲存資料，所以安裝好後登入 Github，之後不管是換電腦或是要在別的地方使用 VS Code，只要透過這個套件就能輕鬆同步了。

[VS Code 擴充套件] Polacode- 簡單幫你直接把程式碼轉存成圖片
網路資源

[VS Code 擴充套件] Polacode- 簡單幫你直接把程式碼轉存成圖片

Polacode 是一個簡單就能幫你直接把程式碼轉存成圖片，如果有想要把程式碼用截圖的方式分享給其他人，可以試試這個套件。

[VS Code 擴充套件] Better Comments- 讓程式的註解有不同的樣式
網路資源

[VS Code 擴充套件] Better Comments- 讓程式的註解有不同的樣式

Better Comments 是可以在 VS Code 裡讓註解不是只有千篇一律樣式的擴充套件。

[VS Code 擴充套件] 利用 Project Manager 幫你管理開發專案
網路資源

[VS Code 擴充套件] 利用 Project Manager 幫你管理開發專案

在 VS Code 我們要開發專案時，應該都會指向某一個資料夾，但同時開發的專案多了管理起來就比較麻煩，這時候就可以透過 Project Manager 這個 VS Code 的擴充套件來協助管理專案。

[VS Code 擴充套件] Auto Close Tag- 自動幫你封閉 HTML 標籤
網路資源

[VS Code 擴充套件] Auto Close Tag- 自動幫你封閉 HTML 標籤

Auto Close Tag 是一個當你打好 HTML 標籤前半邊，就會自動生成後半邊的 VS Code 擴充套件，也是很實用的套件建議大家都可以裝一下。

[VS Code 擴充套件] Auto Rename Tag- 變更標籤名稱時自動幫你設定前(後)標籤的內容
網路資源

[VS Code 擴充套件] Auto Rename Tag- 變更標籤名稱時自動幫你設定前(後)標籤的內容

Auto Rename Tag 可以讓你在要修改 HTML 標籤的時候，自動幫你修改封閉標籤前(後)的名稱。

[VS Code 擴充套件] Live Server- 讓網頁在開發的時候可以即時看到更新狀態
網路資源

[VS Code 擴充套件] Live Server- 讓網頁在開發的時候可以即時看到更新狀態

VS Code 擴充套件 推薦，使用 Live Server 讓網頁在開發的時候可以即時看到更新狀態。

把專案推到 github 上後，並透過 github page 建置靜態頁面
教學

把專案推到 github 上後，並透過 github page 建置靜態頁面

github page 是一個由 github 提供的服務，只要在上面開專案並把 code push 上去後，就能在網路上看到這個專案的內容了，使用的方法也很簡單，這邊教大家用 VS Code 的方法來建構專案。