great-good-loading-dog

鬼谷設計

GREAT GOOD DESIGN

Visual Studio Code(VScode)外掛插件到底哪個好用? 34個插件推薦,從主題到撰寫工具滿足你不同需求

1年前

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

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

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

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

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

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

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

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

Visual Studio Code - Download

主題

Monokai Pro

- Visual Studio Marketplace

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

Cyberpunk

- Visual Studio Marketplace

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

Dracula Official

- Visual Studio Marketplace

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

Learn with Sumit Theme

- Visual Studio Marketplace

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

Rainglow

- Visual Studio Marketplace

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

Community Material Theme

- Visual Studio Marketplace

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

Icon

vscode-icons

- Visual Studio Marketplace

這個更改icon 對多數人來說應該是最直覺的,使用原先語法或程式的logo 提高辨識度,讓習慣看icon 的你一眼就可以知道屬於什麼內容

Material Icon Theme

- Visual Studio Marketplace

更改icon 的圖示,還可以更改資料夾的顏色讓分辨資料更方便

前端

前端插件 #js #alpinejs

Auto Close Tag

- Visual Studio Marketplace

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

Auto Rename Tag

- Visual Studio Marketplace

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

Path Intellisense

- Visual Studio Marketplace

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

JavaScript (ES6) 代碼片段

- Visual Studio Marketplace

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

Live Server

- Visual Studio Marketplace

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

cdnjs

- Visual Studio Marketplace

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

vscode-pigments

- Visual Studio Marketplace

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

htmltagwrap

- Visual Studio Marketplace

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

PHP & Laravel插件

後端插件 #php #laravel

PHP Intelephense

- Visual Studio Marketplace

php 智能除了提醒能夠使用的php 函數,再調用函數的時候也會提醒使用者要傳那些參數

PHP Namespace Resolver

- Visual Studio Marketplace

快速引入php檔案,若有多個名子相同的檔案,namespace就會在工作區指令區塊中顯示,並且快速選擇需要的檔案

Laravel Extra Intellisense

- Visual Studio Marketplace

能夠幫助使用者快速使用laravel所提供的函數

laravel-goto-components

- Visual Studio Marketplace

讓使用者快速找到組件檔案

Laravel goto view

- Visual Studio Marketplace

讓使用者快速找到檔案

好用的工具補充

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

Prettier-Code formatter

- Visual Studio Marketplace

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

Highlight Matching Tag

- Visual Studio Marketplace

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

Tabnine AI

- Visual Studio Marketplace

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

Alpine.js IntelliSense

- Visual Studio Marketplace

顯示AlpineJS片段的功能提示

Alpine.js Syntax Highlight

- Visual Studio Marketplace

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

Laravel Blade Spacer

- Visual Studio Marketplace

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

Code Runner

- Visual Studio Marketplace

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

GitLens — Git supercharged

- Visual Studio Marketplace

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

Image preview

- Visual Studio Marketplace

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

Chinese (Traditional) Language Pack

- Visual Studio Marketplace

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

Todo Tree

- Visual Studio Marketplace

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

Power Mode

- Visual Studio Marketplace

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

Bracket Pair Colorizer 2

- Visual Studio Marketplace

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

SFTP

- Visual Studio Marketplace

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

change-case

- Visual Studio Marketplace

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