---
tags: 環境, 專案架構
---
# 【軟體】VSCode

## VSCode 快捷

cmd+p: 搜尋

cmd+,: setting

cmd+ ctrl + G: 特定字串全選

# 【環境】VS Code 設定
## Launching from command line
1. CMD + SHIFT + P
2. **shell command** and select **Install code command in path**

## user setting
[教學影片](https://www.youtube.com/watch?v=-wre2TFV4ws&list=WL&index=2&t=0s)
- shift + cmd + p: Preferences Open user setting
- Workbench > setting: Editor
- UI to json

{
    "window.zoomLevel": 1,
    "git.enableSmartCommit": true,
    "editor.fontSize": 14,
    "workbench.settings.editor": "json",
    "workbench.settings.useSplitJSON": true,
    "terminal.integrated.shell.osx": "/bin/zsh",
    "terminal.integrated.fontFamily": "Hack Nerd Font Mono",
    "terminal.integrated.fontSize": 14,
    "workbench.colorTheme": "Monokai Dark Soda",
    "editor.tabSize": 2,
}

### stylelint
安裝以下套件[簡易說明](https://iter01.com/35203.html), [說明](https://dotblogs.com.tw/explooosion/2018/09/30/141005)
- stylelint
- vscode-stylefmt

### 常見問題
設為true時，會把 CSS的 >, ~ 之間空白刪除

trim_trailing_whitespace = true

## 裝VScode擴充套件eslint，並自動修復程式碼
### 注意: vscode右下方 eslint權限相關需開啟
後在VScode設定中設定eslint,VScode > 首選項 > 設定，新增如下設定

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
}

安裝VScode擴充套件Prettier - Code formatter實現自動修復樣式的語法錯誤

## 快捷設定

{ "key": "cmd+1","command": "workbench.action.openEditorAtIndex1" },
{ "key": "cmd+2","command": "workbench.action.openEditorAtIndex2" },
{ "key": "cmd+3","command": "workbench.action.openEditorAtIndex3" },
{ "key": "cmd+4","command": "workbench.action.openEditorAtIndex4" },
{ "key": "cmd+5","command": "workbench.action.openEditorAtIndex5" },