# VS Code筆記
## 目錄
> :::spoiler 清單
> [TOC]
> :::
---
### shortcut
- Ctrl + B
> 切換顯示檔案總管
- Ctrl + R
> 切換工作區
### Extension
- [git-commit-plugin with gitmoji](https://marketplace.visualstudio.com/items?itemName=devCharles5277.git-commit-plugin-with-gitmoji&ssr=false#overview)
> Vscode最方便的git commit extension
- 功能介紹
> 互動式介面創建約定式提交
> 
> 
> 點擊Complete後即自動產生commit格式
> 
> 使讓多人協作repo時，commit風格統一
- [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
> 查看Git的commit紀錄
> 用alt+h查看該檔案git commit紀錄
- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
- 顯示當前行的git blame (最後一次編輯的人是誰、commit訊息)
> 
- 選取兩個commit進行diff比較
> 
- [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
- 以圖像化表示branch跟commit紀錄，方便直觀進行git command快捷操作
> 
- [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
> 註解顏色分類功能
> 使用方式可自定義
> 範例：
> <img src="https://i.imgur.com/vaN4nYi.png" width="50%">
- setting.json
```json
"better-comments.tags": [
{
"tag": "!",
"color": "#d9444a",
"strikethrough": false,
"backgroundColor": "transparent",
"bold": true,
"italic": false,
"underline": false
},
{
"tag": "?",
"color": "#f5c018",
"strikethrough": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false,
"underline": false
},
{
"tag": ">",
"color": "#fff",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "-",
"color": "#b3aff7",
"strikethrough": false,
"backgroundColor": "transparent",
"bold": true
},
{
"tag": "//",
"color": "#474747",
"strikethrough": true,
"backgroundColor": "transparent",
"bold": false,
"italic": false,
"underline": false
},
{
"tag": "todo",
"color": "#FFF",
"strikethrough": false,
"backgroundColor": "#21ba45",
"bold": true,
"underline": true
}
],
```
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
> IDE的code規範設定工具，協作專案時統一code風格
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
> JS的Linter，依照指定風格進行程式碼語法檢測
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
> 網頁前端各種語言(Html, Css, SCSS, Less, JS, TS, Json, Vue, YAML)等
> 都能自訂規則後自動格式化程式碼
- 同時安裝EditorConfig、ESLint、Prettier
> 使用npm或yarn安裝以下套件：
> "prettier",
> "eslint",
> "eslint-config-prettier",
> "eslint-plugin-prettier",
> "eslint-plugin-vue",
分別在專案加入以下檔案
- .editorconfig
```json
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
quote_type = single
max_line_length = 80
[*.md]
trim_trailing_whitespace = false
```
- .eslintrc.cjs
```javascript
module.exports = {
env: {
browser: true,
node: true,
es2022: true,
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:prettier/recommended',
'prettier',
],
parser: 'vue-eslint-parser',
plugins: ['vue', 'prettier'],
rules: {
'prettier/prettier': 'error',
},
};
```
- .prettierrc
```json
{
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"trailingComma": "all",
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "always",
"requirePragma": false,
"insertPragma": false,
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": true
}
```
> 若有不想被prettier格式化的檔案類型或位置，再增加這個檔案，格式同.gitignore
- .prettierignore
```
# ignore file type
*.md
```
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
> 自動檢測英文單字是否拼錯，可於setting.json、workspace加入例外清單(可在報錯訊息右鍵選擇)
- [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
> Html id跟class自動完成，可以加入cdn如bootstrap清單
- [i18n Ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally)
> 開發前端需要多國語言，使用i18n時使用，集成參數的多語言對照清單，編輯、翻譯功能
> 可參考[設定教學 🔗](https://waiting4u.org/blog/i18n-ally-%E5%8F%83%E6%95%B8%E8%A8%AD%E5%AE%9A%E8%88%87%E4%BD%BF%E7%94%A8%E5%88%86%E4%BA%AB)
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
> 縮排區段以不同顏色為底色區隔，可以自行選擇要不要搭配setting中的bracket pair(線段標記加強效果)
> <img src="https://i.imgur.com/EXVpwur.png" width="75%">
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
> 輸入相對路徑時自動顯示檔案清單
> <img src="https://i.imgur.com/WnS4YTM.png" width="60%">
- [TabOut](https://marketplace.visualstudio.com/items?itemName=albert.TabOut)
> 可以使用tab跳出自動完成的括號配對，如：( ), { }, [ ] , \'\', " "等
皆可用tab鍵跳出
- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
> 擴充顯示更多類型檔案的icon
> <img src="https://i.imgur.com/acvhMA2.png" width="30%">
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
> 自動補齊html / xml的tag，在修改時亦會同步修正配對的close tag
- [GitHub Copilot](https://docs.github.com/en/copilot/getting-started-with-github-copilot/getting-started-with-github-copilot-in-visual-studio-code)
> AI自動預測程式碼，支援絕大多數程式語言，打註解亦可生成code，用tab自動完成
> 新版GitHub Copilot X跟當前版本的Github Copilot不同
> [取得Github Education](https://education.github.com/)可以免費使用Github Copilot
- [Google Translate](https://marketplace.visualstudio.com/items?itemName=hancel.google-translate)
> 可以將文件內容選取並翻譯，可開啟懸浮自動翻譯或設定快捷鍵
> 可使用Ctrl + K Ctrl + S更換Vscode快捷鍵清單
> 
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
> 前端開發網頁及時渲染當前程式碼，不需重新整理
- [Quasar Docs](https://marketplace.visualstudio.com/items?itemName=CodeCoaching.quasar-docs)
> 使用Quasar(Vue 3最佳的Framework)必裝
> 可以在VS Code 看Quasar文檔
- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
> 可以在import時檢查造成的檔案大小負擔
- [Console Ninja](https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja)
> 可以在 console.log 等輸出時在編輯當前行看到輸出結果
---
###### tags: `IDE` `VS Code`
Sign in with Wallet
Connect another wallet