Visual Studio Code(VSCode) 開發者必備的實用套件

前言

Visual Studio Code(VSCode) 其實有相當多好用的套件,但是礙於實在太多了!而且也相當多人在詢問我,所以我就基於自己是一名前端開發者的身份來分享我自己常用的 VSCode 套件有哪些吧~

圖示 icon 相關

vscode-icons

這是一款美化 VSCode 套件,因此原本的 VSCode icon 是沒有圖示的,增加了圖示之後其實也可以加快查找資料夾的辨識度。而且也可以辨別自己在單字輸入上是否正確

官方效果展示:

vscode-icons

套件下載:vscode-icons

Fluent Icons

Fluent Icons 也是一款很美的資料夾 icon 套件,跟 vscode-icons 相比 Fluent Icons 風格相對簡潔很多

效果展示:

Fluent Icons

套件下載:Fluent Icons

Material Icon Theme

如果你是 Material 愛好者,那麼就不能錯過這個 icon,因為這個套件就是基於 Material 製作的

效果展示:

Material Icon Theme

套件下載:Material Icon Theme

VSCode 語系

Chinese (Traditional) Language Pack for Visual Studio Code

這個套件我想就不用多介紹了,就是將 VSCode 中文化啦~

套件下載:Chinese (Traditional) Language Pack for Visual Studio Code

這邊我也有寫成文章分享過如何幾步驟快速中文化 VSCode

假字生成器

Chinese Lorem

VSCode 內建有假字生成器(Lorem),但是有時候我們會希望假字生成是中文的假字,那麼這時候就可以使用這個套件,使用方法也很簡單,將原本的 lorem 改成 ctlorem + tab 就可以了。

效果展示:

Chinese Lorem

套件下載:Chinese Lorem

JavaScript 相關

ESLint

VSCode 本身是不支援所謂的靜態分析的功能,也就是噴紅字提示,因此如果希望 VSCode 可以即時性可以告知你程式碼的不良風格處的話,那你就一定要安裝這個套件。

但這個套件我想身為前端工程師應該都不會很陌生,所以就不用太多廢話啦~

套件下載:ESLint

除此之外我也分享一下我先前寫的一些 VSCode ESLint 設定文章 VSCode 自動修正 ESLint 錯誤

JavaScript (ES6) code snippets

這個套件是可以幫助我們快速生成 ES6 的一些語法,例如來講當你輸入 imp,它就會快速生成 import fs from 'fs';,簡單來講概念類似 Emmet 也是相當的方便。

但是這邊要注意一下這個套件預設每一個都會加上「;」分號

套件下載:JavaScript (ES6) code snippets

快捷鍵在官方文件下方都有,就不一一介紹了。

如果你想要的是 StandardJS 風格的話,反而建議你改安裝「JavaScript (ES6) code snippets in StandardJS style」套件。

jQuery Code Snippets

如果你是長期會使用 jQuery 的人我建議可以安裝這個套件,你可以加速你的開發唷~

但我個人是已經移除了,因為我還是比較偏向原生寫法 XD

jQuery Code Snippets

套件下載:jQuery Code Snippets

es6-string-html

JavaScript 開發上一定很常使用到樣板字面值,但是在 VSCode 往往都是相同的橘色顏色,如果裡面剛好我們樣板字面值是 HTML 的話,時常會很難辨別,因此可以使用 es6-string-html 這個套件來將樣板字面值裡面的顏色高亮

效果展示:

es6-string-html

套件下載:es6-string-html

VueJS 相關

Vue Language Features (Volar)

Vue Language Features (Volar) 是主要支援 Vue3 的語法為主

套件下載:Vue Language Features (Volar)

Vue Snippets

Vue Snippets 你可以把它看成 emmet,它可以快速幫助我們生成 Vue 的 template 等,而目前有區分兩種版本

效果展示:

Vue 2 Snippets

套件下載:Vue 2 Snippets

效果展示:

Vue 3 Snippets

套件下載:Vue 3 Snippets

Vetur

Vetur 是 Vue Language Features (Volar) 的前身,也是一個相當強大的套件,絕大部分的程式碼它都有支援高亮,此外也有程式碼整理、emmet 等功能,是真的非常強大的套件之一

在它的說明文件中也有說明它這個套件有以下功能

  • Syntax-highlighting
  • Snippet
  • Emmet
  • Linting / Error Checking
  • Formatting
  • Auto Completion
  • Debugging

套件下載:Vetur

基本上 Volar、Vetur 我都有裝,而且這兩個是可以混用的。

CSS 相關

Bootstrap Code Snippets

Bootstrap 本身也有相關套件可以快速生成,但這邊要注意 Bootstrap 版本之差,因此在安裝上要多加注意一下

套件下載:

Tailwind CSS

至於 Tailwind CSS 的套件的話,唯一推薦就是官方所出的 Tailwind CSS IntelliSense了

Image

套件下載:Tailwind CSS IntelliSense

Sass/SCSS 相關

Live Sass Compiler

如果你想要入門學寫 Sass/SCSS 那麼這個套件就會是入門好幫手,這個套件除了可以編譯 Sass/SCSS 之外還擁有模擬伺服器的能力,可以說是相當不錯的工具唷!

效果展示:

Live Sass Compiler

編譯 Sass 按鈕以及開啟模擬伺服器按鈕

Live Sass Compiler

套件下載:Live Sass Compiler

另外如果你不想安裝 Sass 編譯,但是你很喜歡它的模擬伺服器的功能的話,也可以單獨安裝 Live Server

SCSS IntelliSense

這個套件基本上是他會去檢視你 VSCode 工作區的 SCSS,方便你可以快速打幾個單字 + Tab 就完成

底下就結論官方套件說明:

  • Code Completion Proposals (variables, mixins, functions) — description
  • Hover (variables, mixins, functions) — description
  • Signature Help (mixins, functions) — description
  • Code navigation
    • Go to (variables, mixins, functions) — description
    • Show all All Symbol Definitions in Folder (variables, mixin, functions) — description
  • Visual Studio reference comments: // <reference path="./variable.scss" />
  • Import files by @import “filepath”; from anywhere. Even outside of the open workspace.

套件下載:SCSS IntelliSense

Git 相關

Git Graph

Git Graph 是我個人最常拿來看分支狀況的套件,操作非常簡單

效果展示:

Git Graph

套件下載:Git Graph

Git History

Git History 也是滿多人使用的套件,主要原因是介面滿美的,而且操作上也非常簡單,但我個人是比較習慣使用簡單畫面的 Git Graph

效果展示:

Git History

Git History

Git History

Git History

Git History

套件下載:Git History

Git File History

這個套件…基本上就是很炫炮。

阿不是,在查找修改紀錄上非常的方便,因為它是採用動態方式呈現,因此我個人也很常使用這個套件來看修改了那些程式碼

效果展示:

Git File History

套件下載:Git File History

主題相關

Atom One Dark Theme

這是一個佈景主題的套件,我個人是比較少使用,但是卡斯伯老師就是使用該套件來美化自己的 VSCode 的,而我個人則是傾向使用內建的 dark Theme(已經習慣了)。

效果展示:

Atom One Dark Theme

主題下載:Atom One Dark Theme

主題類其實非常多,但我沒有特別列出其他是因為大多人比較喜歡用 Atom One Dark Theme 風格,或者就乾脆用內建的 dark Theme。

其他通用

[棄用] Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 這一套在早期是要安裝的,後來 VSCode 已經內建整合了,只是你要額外加一點設定來啟用而已

只需要到 setting.json 中加入以下就可以啟用了

1
2
3
4
5
{
// Bracket Pair Colorizer 2
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active",
}

cdnjs

cdnjs 非常之好用,身為網頁工程師一定很常使用 CDN 的做法來快速開發,但是往往我們找 CDN 都必須到官方網站,透過這個套件可以快速的插入 CDN。

效果展示:

cdnjs

使用方法也相當簡單,按下 F1 輸入 cdnjs,之後就可以開始搜尋你要的 CDN 啦~

套件下載:cdnjs

vscode-imgur

這個套件我先前有介紹過,但是我個人是覺得也是相當不錯,假使你是與我相同使用 VSCode 來撰寫 MD 的話,那麼我會建議你不要錯過這個套件,因為它可以直接透過 VSCode 將圖片上傳到 imgur 呢!

效果展示:

vscode-imgur

套件下載:vscode-imgur

我這邊也額外提供我先前的教學文章

VSCode 上直接黏貼上傳圖片到 Imgur

Polacode

是不是很常看到很多人貼出美美的程式碼截圖呢?沒錯就是用這個套件做的,我個人也非常喜歡這個套件,最主要在分享程式碼片段的時候很方便且有一定美觀度 <3

效果展示:

Polacode

Polacode

Polacode

Polacode

套件下載:Polacode

使用方式基本上就是 F1 然後輸入 Polacode 就可以開始程式碼截圖。

Preview on Web Server

Preview on Web Server 簡單來講就是模擬伺服器,有時候我們前端開發完畢之後通常要丟上伺服器測試,但是我們不可能每次一開發完就丟上伺服器測試狀況,所以 VSCode 這個套件就相當方便,可以幫助我們立即性模擬伺服器網頁。

Preview on Web Server

套件下載:Preview on Web Server

markdownlint

有在 VSCode 上撰寫 MarkDown 而且會希望寫出來的東西有一定規範?那麼你就不能錯過 markdownlint,markdownlint 它可以幫助我們修正一些不建議的寫法,可以增加將來的可讀性以及避免一些怪問題,我個人也相當喜好。

套件下載:markdownlint

Code Spell Checker

Code Spell Checker 可以說是神之好用,如果你跟我一樣打字英文單字很容易打錯的話,那麼會非常建議你安裝這個套件,因為 Code Spell Checker 會檢查你的單字是否正確

效果展示:

Code Spell Checker

Code Spell Checker

套件下載:Code Spell Checker

DotENV

env 算是很常見的副檔名,但是如果你沒有安裝擴充套件的話 VSCode 是無法辨識高亮的,因此如果你期望 env 檔案可以高亮的話,可以安裝 DotENV

效果展示:

DotENV

套件下載:DotENV

import Cost

import Cost 這個套件比較特別一點,他可以幫我們分析引入的套件檔案大小,幫助我們快速知道我們即將引入多大包的套件

效果展示:

import Cost

套件下載:Import Cost

vscode-spotify

vscode-spotify 套件就是讓你可以直接在 VSCode 操作 Spotify 選擇播放清單等,但部分功能你是必須要有 Spotify Pro 才可以使用的

效果展示:

vscode-spotify

套件下載:vscode-spotify

Excel Viewer

有時候我們會需要使用 VSCode 查看 CSV 檔案,那麼就可以使用該套件直接將 CSV 轉換成 Excel 檢視模式

效果展示:

https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer

套件下載:Excel Viewer

圖片來源

圖片來源居多都是來自原作者套件內,因為大部分作者的圖片展示就非常足夠啦~