Visual Studio Code(VSCode) 必備實用套件

前言

這陣子滿多人詢問 Visual Studio Code(VSCode) 有哪些實用套件,所以這一篇我就來分享一下我自己的實用套件。

適用場景

由於我本身是前端工程師,所以絕大部分的套件會比較多是前端相關。

通用相關

vscode-icons

這一個套件是我個人非常喜好的套件,因為在原本的 VSCode icon 是沒有圖示的,增加了圖示之後其實也可以加快查找資料夾的辨識度。

vscode-icons

vscode-icons

Chinese (Traditional) Language Pack for Visual Studio Code

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

Chinese (Traditional) Language Pack for Visual Studio Code

Chinese Lorem

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

Chinese Lorem

Bracket Pair Colorizer 2

這個也是我個人非常偏好的 VSCode 套件之一,最主要可以增加程式碼區塊的辨識度,否則程式碼越寫越長時,其實很難辨識這是哪一個區塊的程式碼

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2

此外你在擴充套件裡面搜尋時可能會找到兩個版本的 Bracket Pair Colorizer,Bracket Pair Colorizer 是舊版的版本,而 Bracket Pair Colorizer 2 則是修正了一些問題的版本,但是基本上我自己使用是與 Bracket Pair Colorizer 沒有太大差異的。

cdnjs

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

cdnjs

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

cdnjs

Atom One Dark Theme

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

Atom One Dark Theme

Atom One Dark Theme

vscode-imgur

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

vscode-imgur

vscode-imgur

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

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

Polacode-2019

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

Polacode-2019

Polacode-2019

使用方式基本上就是 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

JavaScript 相關

ESLint

這個我想身為前端工程師應該都不會很陌生,通常我們都會使用一些規範工具來統一我們的程式碼風格進而增加可讀性,所以就不用太多廢話啦~

ESLint

JavaScript (ES6) code snippets

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

JavaScript (ES6) code snippets

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

jQuery Code Snippets

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

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

jQuery Code Snippets

jQuery Code Snippets

Vue 相關

vue

如果你是 Vue 開發者,那麼就一定要安裝這個套件,它可以幫助我們 .vue 檔案的程式碼高亮

vue

vue

Vue 2 Snippets

Vue 2 Snippets 你可以把它看成 emmet,它可以快速幫助我們生成 Vue 的 template 等

Vue 2 Snippets

Vue 2 Snippets

Vetur

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

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

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

Vetur

基本上 vue、Vue 2 Snippets、Vetur 這三個各有好處,所以我都有裝。

Sass/SCSS 相關

Live Sass Compiler

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

Live Sass Compiler

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

Live Sass Compiler

Live Sass Compiler

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

SCSS IntelliSense

這個套件基本上也是 emmet 概念

  • 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

PHP 相關

PHP Intelephense

如果你跟我一樣偶爾會寫一下 PHP 的話,那麼不妨也可以安裝這個套件,基本上也是跟 Emmet 一樣會智能提示就是了

PHP Intelephense

圖片來源

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

0%