最佳 Visual Studio Code (VSCode) 插件推薦:34 款必備工具提升工作效率

Visual Studio Code 是很多工程師跟編碼者喜歡使用的撰寫工具

微軟開發、跨平台又免費,誰能不愛呢?

為了能讓開發環境更舒適、更便利, Visual Studio Code 還有許多好用的插件可以使用,下面我們整理了 34 個好用插件,包含主題插件、icon 圖示插件以及前後端開發的好用工具

Visual Studio Code

Visual Studio Code由此免費下載,近幾年Visual Studio Code已經成為撰寫程式的愛好首選之一,使用優點很多

1.Windows、Mac、Linux都可以使用,支援的作業系統完整

2.完全支援Commonjs及ES6 import,讓開發者使用更接近時代趨勢

3.內建Git,團隊案件開發更方便

4.大量擴充插件,主題樣式、icon識別、AI檢測、排版工具等等,都是各方神人為了讓你能有更舒適環境設計的

Visual Studio Code - Download

主題
這個插件主題跟icon 都有包含,如果真的對你來說有選擇障礙,那這個可以更換主題還能更改icon 的一定很適合你
Monokai Pro

這個插件主題跟icon 都有包含,如果真的對你來說有選擇障礙,那這個可以更換主題還能更改icon 的一定很適合你

這個主題的配色非常酷,賽鵬提克色系的搭配與復古的介面樣式,就像電影黑客一樣
Cyberpunk

這個主題的配色非常酷,賽鵬提克色系的搭配與復古的介面樣式,就像電影黑客一樣

這是一個很熱門的主體,顏色搭配跟斜體的使用
Dracula Official

這是一個很熱門的主體,顏色搭配跟斜體的使用

這個插件包含了很多經典的主題風格,不會過於花俏相信很多人都會喜歡
Learn with Sumit Theme

這個插件包含了很多經典的主題風格,不會過於花俏相信很多人都會喜歡

這個彩虹主題可以依照顏色來去做選擇,色彩非常多,對顏色有偏好的一定會很喜歡
Rainglow

這個彩虹主題可以依照顏色來去做選擇,色彩非常多,對顏色有偏好的一定會很喜歡

這個主題提供了很多常見的深色系,配色相當舒服,也非常耐看
Community Material Theme

這個主題提供了很多常見的深色系,配色相當舒服,也非常耐看

icon
前端

前端插件 #js #alpinejs

自動補上程式碼末端標籤,這絕對是程式工作者最大的福音
Auto Close Tag

自動補上程式碼末端標籤,這絕對是程式工作者最大的福音

當你的標籤寫錯了要更改又找不到末端標籤怎麼辦,這個會動記住你的末端標籤是誰並且聯動的更改
Auto Rename Tag

當你的標籤寫錯了要更改又找不到末端標籤怎麼辦,這個會動記住你的末端標籤是誰並且聯動的更改

需要引入文件或者其他資料時,這將會是你的好幫手
Path Intellisense

需要引入文件或者其他資料時,這將會是你的好幫手

使用縮寫快速產生ES6的語法
JavaScript (ES6) 代碼片段

使用縮寫快速產生ES6的語法

更改前端html 或 css 樣式的時候可以即時在瀏覽器預覽成果
Live Server

更改前端html 或 css 樣式的時候可以即時在瀏覽器預覽成果

可以直接搜尋需要的CDNJS來快速引入
cdnjs

可以直接搜尋需要的CDNJS來快速引入

16位元、顏色代號跟RGBA都可以簡易的知道這是代表什麼顏色
vscode-pigments

16位元、顏色代號跟RGBA都可以簡易的知道這是代表什麼顏色

可以單行或跨行多選,將所選的Html包在標記當中
htmltagwrap

可以單行或跨行多選,將所選的Html包在標記當中

PHP & Laravel插件

後端插件 #php #laravel

好用的工具補充

各類生產套件 #中文化 #代辦事項TODO #快速排版 #圖片預覽

格式化代碼,來讓排版一致
Prettier-Code formatter

格式化代碼,來讓排版一致

語法突顯提醒你目前所在的TAG以及相對應的前標或者後標
Highlight Matching Tag

語法突顯提醒你目前所在的TAG以及相對應的前標或者後標

AI提示代碼來自動完成,加快編碼速度支援非常多語言跟框架
Tabnine AI

AI提示代碼來自動完成,加快編碼速度支援非常多語言跟框架

顯示AlpineJS片段的功能提示
Alpine.js IntelliSense

顯示AlpineJS片段的功能提示

將Alpine 語法進行高亮 讓寫在html 的alpine語法能夠看得更清楚
Alpine.js Syntax Highlight

將Alpine 語法進行高亮 讓寫在html 的alpine語法能夠看得更清楚

讓使用者快速使用laravel插值語法
Laravel Blade Spacer

讓使用者快速使用laravel插值語法

可以不用另存新檔,直接運行代碼,可以再終端上看到執行效果
Code Runner

可以不用另存新檔,直接運行代碼,可以再終端上看到執行效果

git UI介面,可以將曾經commit 過的檔案 進行檔案回朔,記錄存儲的commit檔案時間
GitLens — Git supercharged

git UI介面,可以將曾經commit 過的檔案 進行檔案回朔,記錄存儲的commit檔案時間

滑鼠停留在路徑上可以預覽圖片
Image preview

滑鼠停留在路徑上可以預覽圖片

將Vscode中文化的插件,可以在網路上搜尋教學安裝
Chinese (Traditional) Language Pack

將Vscode中文化的插件,可以在網路上搜尋教學安裝

將待辦的項目做標示,利於日後修復或者標記工作排成時使用,也能自定義標籤名稱及顏色
Todo Tree

將待辦的項目做標示,利於日後修復或者標記工作排成時使用,也能自定義標籤名稱及顏色

內置的粒子效果,打擊感強烈,累計輸入次數看數字越多越有成就感
Power Mode

內置的粒子效果,打擊感強烈,累計輸入次數看數字越多越有成就感

括號太多太雜亂,這個工具可以清楚幫你分顏色編碼時就不會一團亂了(目前已內建)
Bracket Pair Colorizer 2

括號太多太雜亂,這個工具可以清楚幫你分顏色編碼時就不會一團亂了(目前已內建)

上傳下載太麻煩,那就讓你的FTP跟VScode同步吧
SFTP

上傳下載太麻煩,那就讓你的FTP跟VScode同步吧

命名方式需要統一,那就一次搞定吧,不論是駝峰還是下底線都可以解決你的命名問題
change-case

命名方式需要統一,那就一次搞定吧,不論是駝峰還是下底線都可以解決你的命名問題