# VS Code 基本操作

- 初步了解 VS Code workspace
- 建立一個專案的 workspace 並與 GitHub 關聯
- Extensions: Live Server
- Extensions: Live Sass Compiler 的設定項目
- VS Code 文字編輯的好用技巧

---

## 初步了解 VS Code Workspace
### Workspace 的概念
- 使 VS Code 的設定只在某個或某些個資料夾有效，不影響其他的資料夾。
- 工作區會儲存、恢復使用者介面（例如編輯器的 layout 、哪些檔案是開啟的）
- 外掛程式的 enable/disable 只在該工作區有效。
- 工作區可以想成一個專案的根（root） ，其中含有 VS Code 需要的資料和所賦予的的功能。
- 一個 Workspace 可以有一個或多個資料夾。多個資料夾稱為 muti-root workspace
- 配置設定只在指定的某個或多個 folders 有效。
- Workspace 紀錄 UI 的配置（例如開啟哪些檔案；編輯器的layout），下次開啟同一個Workspace時將恢復。

:::info
注意：沒有工作區仍可以開啟、編輯檔案，只是少了 VS Code 的一些功能。
:::

### Workspace 設定
- 在已開啟的 Workspace 中設定工作環境，此設定會取代 global user settings
- 這些設定會存成一個 JSON 檔
- JSON 檔的存放路徑依據開啟的是 folder 或 .code-workspace 而有不同
- 開啟資料夾：存放在 .vscode/setting.json
- 開啟 .code-workspace ：該工作區所有的設定寫在 .code-workspace 檔案中

#### 單資料夾 Workspace
- 在 VS Code 開啟一個資料夾，該資料夾自動成為一個 Workspace，VS Code 會記住開啟的檔案和使用介面的排列。
- 工作區存檔：`file` > `Save Workspace As...`
:::info
每個專案應該都要儲存成獨立的 Workspace。
:::

#### 多資料夾 Workspace
- Add Folder to Workspace...
- 如果一個專案有多個相似的站，可以存成同一個 Workspace

### 更改語言設定
1. View > Command Palette
2. 輸入 "display"，點擊 [Configure Display Language]，選擇 [中文(繁體) (zh-tw)]
3. 按 [Restart] 按鈕，重新啟動 VS Code

---
## 為專案在 gitHub 建立一個 repo 並與之同步
*操作示範*
1. 隨便編輯一個小檔案，例如 index.htm 或 readme.txt
2. 到 gitHub 建立一個新的 repository
3. 複製 gitHub 網址，點擊 ` uploading an existing file`
4. 回到 VS Code ，File > New Window，選擇 `Clone Git Repository...`
5. 貼上剛剛複製的 gitHu 網址
6. `Save Workspace As...`

---
## Live Sass Compiler 設定說明
[資料來源](https://github.com/glenn2223/vscode-live-sass-compiler/blob/master/docs/settings.md#livesasscompilesettingsautoprefix)

### liveSassCompile.settings.formats
設定編譯出的css檔案格式、副檔名和存儲路徑。

- css 文件編排方式：`expanded` 展開的，`compressed` 壓縮的。預設值是 `expanded`
- 副檔名：.css 或 .min.css，預設是 .css
- 存檔路徑要依據 workspace 或你的Sass檔
- 預設值是 null，表示CSS會存在scss或sass路徑下
- "/" 表示相對於（這個workspace的）根目錄
- "~" 表示相對於每個 sass 檔。

**範例**

"settings": {
    "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "/css"
        }
    ],
    "liveSassCompile.settings.includeItems": [
        "/scss/style.scss"
    ],
    "liveSassCompile.settings.excludeList": [
        

    ],
    "liveSassCompile.settings.generateMap": true,
    "liveSassCompile.settings.showOutputWindowOn": "Warning"
}

### liveSassCompile.settings.excludeList
排除特定資料夾、檔案。資料夾內的所有 Sass/Scss 檔都將被忽略（不會被 Compiler 成 css）。[] 裏面放要排除的資料夾

**範例**

"liveSassCompile.settings.excludeList": [ 
    "**/node_modules/**",
    ".vscode/**" 
]

可以反向表述，例如要排除路徑 path/subpath 下所有檔案，但不包括file1.scss & file2.scss 這兩個檔案。可以這樣寫 -

"liveSassCompile.settings.excludeList": [
    "path/subpath/*[!(file1|file2)].scss"
]

### liveSassCompile.settings.includeItems
只編譯這個設定中提及的檔案。當只處理少數 Sass 檔時，可以用這個設定。

    "/scss/pageNotFound.scss",
    "/scss/style.scss"

:::info
.excludeList 和 .includeItems 擇一設定即可。
設定排除，其他都包含；設定包含，其他都排除。
:::

---
### liveSassCompile.settings.generateMap
要不要產生 map 檔。預設是 `true`

---
### liveSassCompile.settings.autoprefix
自動加前綴字（例如 transform 改為 -ms-transform）
- 指定要為哪些瀏覽器版本加前綴字
- `null` 不加前綴字

**範例**

  "liveSassCompile.settings.autoprefix": [
       "> 1%",
       "last 2 versions"
   ]

---
### liveSassCompile.settings.showOutputWindow
舊版的設定項目，已被 **liveSassCompile.settings.showOutputWindowOn** 取代。

---
### liveSassCompile.settings.showOutputWindowOn
設定何種形式的錯誤要呈現在輸出視窗中
可設定的形式: `Trace`, `Debug`, `Information`, `Warning`, `Error` or `None`
預設值：`Information`
:::info
建議改為 `Warning` 或 `Error`，以免一直要關視窗。
:::

---
## VS Code 文字編輯的好用技巧

- 多游標編輯
- 移動一整行
- 移動一整個區塊
- 按著 option, 用游標選多行或一個區塊
- cmd + option + shift + 向上或向下箭頭

- 選文件中相同的文字
- 選一段文字樣本
- 打開指令面板（command palette, `cmd` + `shift` + `p`）
- 選 `Select All Occurrences of Find Match`，即可選取檔案中相同的文字
- 或按 `command` + `D` 逐一選取

- 同一檔案的分割視窗
- css / scss `property:value;` 快速完成輸入