# 2022 Vscode 懶人包

###### tags:`HyUI4.0`
為了因為vscode格式化造成修改大家的格式內容會有落差，提供懶人包以及建議可以統一設定檔

---

Visual Studio Code（簡稱 VS Code）是一款由微軟開發且跨平台的免費原始碼編輯器，並可以透過內建的擴充元件程式商店安裝擴充元件以加強軟體功能。<br/><br/>

<div style="text-align:left;">
優點<br/>
<ul>
<li>Emmet<br/>
內建的快速撰寫輔助工具Emmet功能，可以讓我們編碼打起來更快速。</li>
<li>color picker<br/>
自動的顏色代碼選取工具，在許多編寫工具中，其實都需要自己上google搜尋顏色代碼-色碼表，透過其他工具找尋；vscode有自己的colorpicker很方便</li>
<li>主題顏色、個人化設定<br/>
可以依據自己的電腦使用習慣，更改編輯器的主題顏色、快捷鍵設定等。</li>
<li>
IntelliSense預測功能<br/>
在使用者輸入相關詞彙後，vs code會進行使用者輸入的預測，包含接下來有可能使用到的方法、函式、變數...等。</li>
</ul>

</div>

[下載](https://code.visualstudio.com/)

---

## 推薦套件

---

#### Chinese (Traditional) Language Pack for Visual Studio Code
中文化套件。 [下載](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant)

---

#### Auto Close Tag
自動加入關閉標籤。 [下載](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

---

#### Auto Rename Tag
變更tag時，會自動一起變更結尾的tag。 [下載](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

---

#### Code Spell Checker
檢查單字是否有拼錯，沒有使用駝峰命名也會有警示。 [下載](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

---

#### CSS Peek
可在html中查看css(command + 滑鼠左鍵)。 [下載](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

---

#### Highlight Matching Tag
滑鼠點選tag會將結尾的tag標示出來。 [下載](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)

---

#### HTML CSS Support
寫 HTML 時，可以自動讀取到 CSS 的 class / id。 [下載](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)

---

#### Image preview
可在css中顯示小縮圖。 [下載](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)

---

#### Path Intellisense
快速顯示載入檔案的路徑。 [下載](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

---

#### Copy filename
快速複製檔案名稱。 [下載](https://marketplace.visualstudio.com/items?itemName=jack89ita.copy-filename)

---

#### indent-rainbow
方便觀看程式碼的縮排。 [下載](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

---

#### Live Sass Compiler
scss編譯工具可自動轉成css，安裝後右下角點選Watch my Sass。 [下載](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass)

---

#### Live Sass Compilerr
可即時看到切版畫面。 [下載](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass)
請在瀏覽器同步安裝外掛。 [下載](https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj?hl=zh-TW)
之後開啟外掛並參照下圖設定

http://localhost/
http://localhost:5500/

開啟要追蹤的頁面點選右下角Go Live會自動開啟網頁
將網址列中的:5500刪除後enter，再點選到要偵測的頁面即可
<hr/>

#### Git Graph
可在vscode上看git資訊。 [下載](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

---

#### JavaScript (ES6) code snippets
js es6的補全工具。 [下載](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

---

#### Quokka.js
測試程式碼工具(command + shift + p 搜尋Quokka.js: New Javascript File，會在此檔案中顯示編譯後內容)。 [下載](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

---

#### Error Lens
當編譯的程式碼有錯誤時會提示。 [下載](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

---

#### Prettier - Code formatterd
格式化工具[下載](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

---

#### vscode-pets
可以在vscode中養寵物。 [下載](https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets)

---

## Vscode設定檔
快捷鍵 shift + command + , 叫出面板後點選右上角 開啟JSON
貼入以下設定檔

{
  "editor.maxTokenizationLineLength": 20000,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.foldingMaximumRegions": 50000,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.unicodeHighlight.nonBasicASCII": false,
  "editor.stickyScroll.enabled": true,
  "files.autoSave": "onFocusChange",
  "emmet.triggerExpansionOnTab": true,
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.tabWidth": 2,
  "prettier.semi": true,
  "prettier.printWidth": 300,
  "cSpell.autoFormatConfigFile": true,
  "html.format.wrapLineLength": 200,
  "css.format.spaceAroundSelectorSeparator": true,
  "scss.format.spaceAroundSelectorSeparator": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
  "liveSassCompile.settings.generateMap": true,
  "liveServer.settings.multiRootWorkspaceName": "",
  "liveServer.settings.useWebExt": true,
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 5500,
  "liveServer.settings.wait": 100,
  "liveServer.settings.ChromeDebuggingAttachment": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css"
    }
  ],
  "errorLens.enabledDiagnosticLevels": ["error", "warning"],
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.confirmDelete": false,
  "workbench.startupEditor": "none",
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
}

---

## 好用快捷鍵

| PC快捷 | Mac快捷 | 說明 |
| ----------- | -------------------- | -------------------- |
| Ctrl+K | option + command + S | 儲存全部檔案 |
| Ctrl + / | command + / | 快速註解 |
| Alt + ↑ | option + ↑ | 整行往上移動 |
| Alt + ↓ | option + ↓ | 整行往下移動 |
| Shift+Alt+F | option + shift + F | 手動格式化(需全選) |
| | command + D | 選擇相同文字 |
| | option + 滑鼠左鍵 | 同時選擇滑鼠選擇文字 |
| | option + command + ↑ | 游標向上增加 |
| | option + command + ↓ | 游標向下增加 |
| Ctrl + + | shift + command + + | 放大畫面 |
| Ctrl + - | shift + command + - | 縮小畫面 |

<style>
.reveal h1{
font-size:2em;
}
.reveal h1,.reveal h2 {
color:#c9f2ff;
}
.reveal h4 {
font-size:1.5em;
}
.reveal{
font-size:26px;
}
li{
margin-bottom:15px;
}
</style>