--- title: 安裝 VS Code 以及實用插件 tags: 網頁組 --- # 安裝 VS Code 以及實用插件 - 前言 這是本教學的第一篇，當然要先從安裝環境開始，編輯器有很多種，那我們的教學都會以 Visual Studio Code ( 簡稱 VS Code ) 做為主要的開發工具。 VS Code 是目前最熱門的編輯器之一，同時擁有了諸多的優點，以下簡單列出新手可以參考的優點。 - 編輯器輕巧 - 擁有自訂和擴充功能 - 介面乾淨簡潔、容易使用 假如覺得 VS Code 不適合你，想要用其他工具的話也可以，像是 WebStorm 或是 Sublime text。 :::info 上課簡報：[網頁組環境架設簡報](https://docs.google.com/presentation/d/1JoskT1_aVeRPvqDu6wkw7JpOOzkd1XMF7Fb6CwRFjWw/edit?usp=sharing) ::: # 本節目標 - 安裝 VSCode 做為開發工具 - 安裝 VSCode 上便於網頁開發的插件 # 安裝 Visual Studio Code 透過 VS Code 的官網直接下載，官網會直接根據你的作業系統給予下載位置，如果不正確的話也可以透過選單自己選擇系統。 下載位置：[官網](https://code.visualstudio.com) 安裝過程中可以把下方四個選項都打勾，這樣在安裝完成以後，可以透過右鍵的選單把資料夾以 VS Code 打開，會方便許多。 ![](https://i.imgur.com/b5ji4m9.png "安裝過程" =540x400) 安裝完成以後，我們就可以把它打開來，進行一些簡單的設定以及安裝插件 ## 開啟自動格式化 (可選) 自動格式化的用意會讓你的程式碼更好閱讀，之後還可以搭配一些插件，讓你的程式碼在格式化以後符合規範。 點擊左下角的齒輪後，選擇 Settings ![](https://i.imgur.com/abVOoXv.png) 在輸入框打上 format 後，勾選範例圖中三個藍色選項 ![](https://i.imgur.com/xn2xgqq.png "範例圖") ## 插件安裝 VS Code 有許多插件可以使我們的開發流程更加順利，接下來推薦一些在剛開始進行網頁前端開發時會使用到的插件。 (以下只會簡單敘述套件功用及附上連結，更詳細的可以觀看官方說明) - 左側選擇插件，可以查看目前安裝了那些插件，上方的搜尋框可以尋找想安裝的插件 ![](https://i.imgur.com/yPXilCb.png) ### 語言插件 ### [Chinese (Traditional) Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant) (推薦還是多看看英文，除非真的完全不行，否則不推薦安裝😓) ![](https://i.imgur.com/n0p6ajd.jpg) - 中文化介面 ### 語法插件 ### [HTML Snippets](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets) ![](https://i.imgur.com/xW5i4k1.png) - 補全 HTML 語法 ### [Beautify css/sass/scss/less](https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier) ![](https://i.imgur.com/phQJf0s.jpg) - CSS 語法自動排版 ### [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) ![](https://i.imgur.com/TDM8XDp.jpg) - 自動補全 JavaScript 語法 ### [Auto Complete Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag) ![](https://i.imgur.com/JfeawWi.jpg) - 包含 [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) 和 [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - 自動關閉標籤和自動重新命名標籤 ### 功能型插件 ### [Quokka.js ( 限定 JS )](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) - ![](https://i.imgur.com/uWbDWUD.png) - 在程式碼的尾端及時運算出結果 ### [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - ![](https://i.imgur.com/GQTtLDv.jpg) - 編輯器內即時更新的本機伺服器 ### 輔助提示插件 ### [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) ![](https://i.imgur.com/z1l7u7X.jpg) - 以色塊顯示縮排區域 ### [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) ![](https://i.imgur.com/vEIU5BJ.png) - 讓括號有成對的配色 以上是在新手時期推薦安裝的插件，未來可以根據自己的需求安裝其他的插件，假如有不習慣或使用率不高的插件請一定要狠心移除，否則就浪費 VS Code 的輕量級特色了。 --- 到這邊已經你已經有一個能夠進行網頁前端開發的工具了，[下一篇](/ThQtamGKSGGKRG41-gjF9w)的內容將分享我個人對 VS Code 的美化部分使用了哪些套件，假如你對自己的 VS Code 覺得很滿意，可以直接跳過下一篇。