---
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

在輸入框打上 format 後，勾選範例圖中三個藍色選項

## 插件安裝

VS Code 有許多插件可以使我們的開發流程更加順利，接下來推薦一些在剛開始進行網頁前端開發時會使用到的插件。
(以下只會簡單敘述套件功用及附上連結，更詳細的可以觀看官方說明)

- 左側選擇插件，可以查看目前安裝了那些插件，上方的搜尋框可以尋找想安裝的插件

### 語言插件

### [Chinese (Traditional) Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant)
(推薦還是多看看英文，除非真的完全不行，否則不推薦安裝😓)
- 中文化介面

### 語法插件

### [HTML Snippets](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets)
- 補全 HTML 語法

### [Beautify css/sass/scss/less](https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier)
- CSS 語法自動排版

### [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
- 自動補全 JavaScript 語法

### [Auto Complete Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag)
- 包含 [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)
- 
- 在程式碼的尾端及時運算出結果

### [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- 
- 編輯器內即時更新的本機伺服器

### 輔助提示插件

### [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
- 以色塊顯示縮排區域

### [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
- 讓括號有成對的配色

以上是在新手時期推薦安裝的插件，未來可以根據自己的需求安裝其他的插件，假如有不習慣或使用率不高的插件請一定要狠心移除，否則就浪費 VS Code 的輕量級特色了。

---

到這邊已經你已經有一個能夠進行網頁前端開發的工具了，[下一篇](/ThQtamGKSGGKRG41-gjF9w)的內容將分享我個人對 VS Code 的美化部分使用了哪些套件，假如你對自己的 VS Code 覺得很滿意，可以直接跳過下一篇。