---
# System prepended metadata

title: VScode 套件使用與推薦
tags: [VS code]

---

###### tags: `VS code`
# VScode 套件使用與推薦
## 使用套件
點選紅框，即可在橘框輸入欲加入套件之名稱，橘框下方為以使用套件或橘框搜尋結果
![](https://i.imgur.com/l7nPpR7.png)

## 套件設定
如欲設定套件，可按快捷鍵 `ctrl + P` ，在所有檔案裡面以檔名搜尋檔案做設定(ex. prettierrc)
![](https://i.imgur.com/3Jk37gA.png)

## 推薦套件
1. Chinese Langueage -- 介面中文化
2. Auto Close Tag -- 自動補齊tag結尾
3. ESLint -- javascript語法錯誤與提示
4. AutoFileName -- 自動補齊檔案名稱
5. Git History -- 看到git歷史紀錄
6. GitLens -- 看到該行code是誰commit的
7. Material Icon Theme -- 可愛小圖示
8. Prettier - Code formatter -- 自動排版不解釋
```=javascript
// ctrl + P 搜尋後setting
  "files.autoSave":"onWindowChange", //focus在其他畫面時自動排版
  "editor.formatOnSave":true //存檔時自動排版
```
!通常前端框架也會有套件使用，有需要的話可以再上網查查!
* 額外推推套件參考網站
    *  https://hackmd.io/@sam-liaw/BJnLhni7U
    *  https://medium.com/tsungs-blog/day17-%E5%B8%B8%E7%94%A8%E7%9A%84vscode%E6%93%B4%E5%85%85%E5%A5%97%E4%BB%B6-3d426f505eeb

## 其他設定
點選黃框後，可以點選率框"設定"做其他設定
![](https://i.imgur.com/75v2iAR.png)

裡面可以設定自動存檔、字體大小、字形、多少空格(不過我對這裡設定還不熟)
![](https://i.imgur.com/unNCrW4.png)




