VSCode 必裝套件
VSCode 必裝套件 2021 年補充
Cascadia Code 字型
VSCode 安裝 Cascadia Code
Cascadia Code 微軟釋出免費等寬字型,開源更適合程式碼編輯器和終端機
Coding 用字體推薦:Fira Code、JetBrains Mono、Consolas、與 Input Sans
JetBrains Mono 更適合閱讀程式碼的等寬字型,內建四種字重斜體可商用
Material Icon Theme
好看的 icon 主題
Power Mode
打字有特效
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
記得在 喜好設定 > 設定 搜尋 powermode.enabled
開啟後才有特效
註解變色功能
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Better Comments
TODO Highlight
TODO: 與 FIXME: 提示變色
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
可以自行定義關鍵字
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
❤ Todo Tree
列出 TODO
Todo Tree
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
❤ Bookmarks
書籤功能
Bookmarks
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
支援 shell script 格式
shell-format
YAML
支援 YAML
YAML
Python
支援 Python
Python
Live Server Preview
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
右邊直接彈出視窗顯示 html 網頁內容
Chinese Lorem
由於 VSCode 內建有假字生成器(Lorem),但是有時候我們會希望生成中文的假字那麼就可以使用這個套件,使用方法也很簡單,將原本的 lorem 改成 ctlorem + tab 就可以了。
Bracket Pair Colorizer 2
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
這個也是我個人非常偏好的 VSCode 套件之一,最主要可以增加程式碼區塊的辨識度,否則程式碼越寫越長時,其實很難辨識這是哪一個區塊的程式碼
Auto Rename Tag
Auto Rename Tag
變更標籤時,結尾標籤自動修改
Image preview
Image preview
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
語法編輯時,圖片顯示預覽
indent-rainbow
indent-rainbow
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
語法編輯時,使用Tab空格時顯示顏色,表語法層次性
Path Intellisense
Path Intellisense
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
自動偵測可用的外部連結,僅限於HTML格式下作用。
AutoFileName
AutoFileName
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
GitLens — Git supercharged
GitLens — Git supercharged
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
游標所在會顯示誰簽入、時間與說明
Git Graph
Git Graph
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
有美美的分枝圖可以看
#region folding for VS Code
#region folding for VS Code
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
類似 C# 的註解方式
折疊時可以看到我們寫的註解
public static void Main(string args[])
{
}
與
都可以使用
- 使用方法:
滑鼠選取要註解的區域
按住 Ctrl 不放
依序再按住 M、R
就可以註解了
PS.可惜VSCodium目前還不能裝
Ctrl + P 輸入ext install regionfolder
一樣找不到
SVG Viewer
SVG Viewer
看 SVG 的工具
PS.可惜VSCodium目前還不能裝
JavaScript (ES6) code snippets
JavaScript (ES6) code snippets
可以縮寫打出長指令(查上表,如:clg -> console.log(object))
其實很多語言都有支援
jQuery Code Snippets
jQuery Code Snippets
同上喔
專為 jQuery 提供語法輸入
filesize
filesize
點選檔案左下會出現檔案大小
PS.可惜VSCodium目前還不能裝
Highlight Matching Tag
Highlight Matching Tag
點選 tag 結尾的 tag 字體下面會有底線
方便你知道 tag 的範圍
Highlight Line
Highlight Line
下底線出現在目前游標的位置
CSS Peek
CSS Peek
![CSS Peek 截圖](https://i.imgur.com/MIstc8V.gif)
滑鼠點選 id 或 class 按下 F12 就能跳到 scss 的位置了
IntelliSense for CSS class names in HTML
IntelliSense for CSS class names in HTML
![IntelliSense for CSS class names in HTML 截圖](https://i.imgur.com/EoxuLG4.gif)
可以在 class 中列出可選的 class
Prettier - Code formatter
自動排版 scss
Auto Close Tag
Auto Close Tag
自動補上 </tag>
Trailing Spaces
Trailing Spaces
程式碼後面的空白會變成紅色
Markdown Table Prettifier
Markdown Table Prettifier
Markdown 整理 Table (VSCodium 沒辦法安裝)
Vim
![Vim Logo 圖片](https://vscodevim.gallerycdn.vsassets.io/extensions/vscodevim/vim/1.16.0/1595264896849/Microsoft.VisualStudio.Services.Icons.Default)
Vim
提供替代滑鼠編輯功能的工具
藉此提高打字編輯效率
可以參考我的 vim自學筆記
記憶體優化
search.followSymlinks 設為
![截圖](https://i.imgur.com/U143cxH.png)
git.enabled: false
git.autorefresh: false
禁用
Gulp Tasks、CSS Peek(有安裝但停用了)、HTML CSS Support(有安裝但停用了)
這三個插件
效能優化
按下 Ctrl+, 進入「設定」
點擊右上圖示「開啟設定(JSON)」
打開 settings.json
"editor.minimap.renderCharacters": false
"editor.minimap.enabled": false
個人選「不渲染字體」反正字太小也看不到
"editor.smoothScrolling": false
"editor.cursorSmoothCaretAnimation": false
上面這些不太會影響到程式撰寫
參考下面網路文章還能做進階優化
參考資料
Visual Studio Code 必裝套件(extensions)
小克的 Visual Studio Code 必裝擴充套件(Extensions)私藏推薦
[Day00] 網頁設計師會用到的VSCODE與常用套件
Visual Studio Code Remote - WSL 安裝教學
【分享】每個 Web 開發者在 2021 年必須擁有 15 個 VSCode 擴充套件
強烈推薦
VSCode 安裝 Cascadia Code
vscode 調整整體字型大小
Settings Sync 同步 VSCode 擴充套件