skip to main content

VSCode常用的幾個插件 (Extension)

於2020年9月14日更新


VSCode常用的幾個插件 (Extension)影片
點擊圖片觀看影片版本

這次和你分享下我常用的幾個VSCode 插件(extension),他們對我的網站開發工,寫代碼的效率提高不少。事不延遲,就開始吧。

#1 MinifyAll

MinifyAll vscode插件

MinifyAll是用來壓縮HTML,CSS和JS檔案,它將不會影響運行的代碼拿走,例如空格來節省檔案大小,你可以選擇選擇的一部份壓縮或者壓縮整份文件也可以。

這樣的話你的網站能夠快點被訪客下載。

#2 Material Icon Theme

Material Icon Theme vscode插件

是個可以按照檔案類型,給予相關檔案獨特美觀的標誌,讓顯示更清楚。

#3 Live Sass Compiler

Live Sass Compiler vscode插件

將SASS或SCSS檔案轉譯成CSS的一個VSCode插件工具,他還可以讓你設定出來的是已經縮縮好的/沒壓縮的CSS檔案。

#4 Bracket Pair Colorizer 2

Bracket Pair Colorizer  2 vscode插件

寫慣程序的都知道,很多時候程序中那些括號通常是一對的。這插件會用顏色標記來讓你容易點知道你所標誌的開始括號的另一半,完成括號在那裏的一個插件。

#5 Indent rainbow

Indent rainbow vscode插件

所有的Indent空間(中文我也不知道叫甚麼),都會被加上顏色,方便程序員看清Indent空間。

如果你是寫一些以Indent空間為主要內容的程序語言例如Python的話,這插件對你來講可以說是個必備插件了。

#6 Rest Client

Rest Client vscode插件

讓你在VSCode內做出請求(Request) 回應(Response),回應的資料會即時生成一個檔案給你,非常方便

#7 SFTP

SFTP vscode插件

可以讓你設定FTP或SFTP的主機,然後直接在VSCode進行上下載,同步伺服器上代碼檔案。

#8 Emmet

這個不用裝 VSCode本身就有,這插件是利用簡單的語法產生HTML或CSS代碼,讓尤其是對專注前端開發的人很有幫助,這插件省掉很多重覆寫代碼的時間,我有另外一篇專門關於Emmet基礎語法的教學,有興趣學一學的話可以去看看。

另外如果你是剛剛使用VSCode的話,這裡有一篇VSCode入門教學,讓你可以快點上手。

希望本文章所介紹的VSCode插件能夠幫助你提升工作效率吧,感謝你的觀看,下次見,拜拜。

如果你覺得本文章或影片有用,想再看更多我寫關於DIY網站開發,Google SEO內容的話,可以按下面的按鍵,填上你的電郵然後訂閱

作者 :- 香港全端網站開發人員,中文Google SEO顧問

其他文章

響應試網站開發課程入門

DIY網站開發初階自學課程橫額