[VScode] Initial Setup

Visual Studio Code

VScode 下載與安裝

VScode 下載
下載完後執行安裝檔，照著裡面的操作一路推過去即可。

注意

現在預設就會勾選 Add to PATH，但還是提醒一下要記得確認。

更改終端機預設 (optional)

預設是 PowerShell，若偏好 Git Bash，可以在 VScode 左下角找到設定 (齒輪標記) 進行預設更改。

在搜尋欄輸入 terminal default，沒意外可以看到 Terminal › Integrated › Default Profile: Windows 的選項，改成 Git Bash 即可。

自動儲存 (optional)

設定 > 經常使用的 > Files: Auto save > afterDelay，我個人實務開發偏好打開它，但記得，如果專案支援 save 時自動 format，auto save 是做不到的，需要自己 CTRL + S 做手動儲存並 format。

單擊文件開啟新分頁 (optional)

VScode 開檔案預設情況下單擊會覆蓋當前的檔案分頁。
在 settins.json 添加："workbench.editor.enablePreview": false。

VScode 插件

可以安裝一下 VScode 插件幫忙作業。

基本插件

• Chinese (Traditional) Language Pack for Visual Studio Code：把 VScode 變中文。
• Code Runner：一鍵執行程式碼。
• npm Intellisense：自動完成 npm 套件引入。
• Code Spell Checker：檢查拼字錯誤。
• Live Preview：實時預覽功能。
• Trailing Spaces：捕捉並顯示程式碼中的空格。
• TODO Highlight：讓註解變得鮮明易於辨識。
• Material Icon Theme：為專案中的檔案加上鮮明的圖示。
• Git Graph：可以在 VScode 中看到 git flow。
• ESLint：讓 VScode 支援 ESLint。
• Prettier - Code formatter：讓 VScode 支援 Prettier。
• Stylelint：讓 VScode 支援 Stylelint。
• Highlight Matching Tag：高亮顯示 HTML tag 開始與結束。
• psioniq File Header：自動生成檔案頭部註解。

psi-header 設定範例

.vscode/setting.json

{
  // https://marketplace.visualstudio.com/items?itemName=psioniq.psi-header
  "psi-header": {
    "changes-tracking": {
      "isActive": true,
      "modAuthor": "Modified By: ",
      "modDate": "Last Modified: ",
      "modDateFormat": "date",
      "include": [],
      "exclude": [
        "markdown",
        "json"
      ],
      "excludeGlob": [
        "out/**",
        "src/**/*.xyz"
      ],
      "autoHeader": "manualSave"
    },
    "lang-config": [
      {
        "language": "*",
        "begin": "/**",
        "end": "*/",
        "prefix": " * "
      },
      {
        "language": "vue",
        "begin": "<!--",
        "end": "-->",
        "prefix": "  "
      }
    ],
    "config": {
      "forceToTop": true,
      "blankLinesAfter": 1
    },
    "templates": [
      {
        "language": "*",
        "template": [
          "@FilePath: <<filerelativepath>>",
          "@Date: <<filecreated('YYYY-MM-DD HH:mm:ss')>>",
          "@Author: <<author>>",
          "@Description:",
          "-----",
          "Last Modified: <<dateformat('YYYY-MM-DD HH:mm:ss')>>",
          "Modified By: <<author>>",
          "-----",
          "Copyright (c) <<year>> by PLANTAE Taiwan, All Rights Reserved."
        ]
      }
    ]
  }
}

• indent-rainbow：讓縮排更直觀。

HTML / CSS 相關

• Auto Rename Tag：可以快速幫助修改 HTML tag。
• Live Sass Compiler：自動編譯 Sass/Scss。
• Color Highlight：在寫 CSS 的色碼時可以直接看到顏色。
• Tailwind CSS IntelliSense：Tailwind CSS 的附註插件。
• px to rem & rpx & vw (cssrem)：可以快速轉換 px 到 rem、rpx、vw。

Markdown / MDX 相關

• Markdown Preview Mermaid Support：可以在 markdown 上畫美麗的圖表。
• MDX：優化 MDX 撰寫。

Python 相關

• Python：可以在 VScode 上寫 Python。
• Pylance：提供更好的對 Python 語言的支援，但要先安裝 Python 插件。

Vue 相關

• Vue - Official：用 vue 開發時強力推薦。
• TypeScript Vue Plugin (Volar)：讓 TypeScript 更好地支援 vue。

C# & Unity

• C# Dev Kit：VScode 支援 C# 的擴充套件。
• C#：裝了 C# Dev Kit 之後其實就會被自動安裝了。
• Unity Code Snippets：提供各種 Unity 常用語法的快速模板。
• Unity：VScode 支援 Unity 的擴充套件。
• .NET Install Tool：裝了 C# Dev Kit 之後應該默認也會自動安裝。

純好玩系列

• vscode-pets：在 VScode 上養寵物。
• Power Mode：純好玩，讓寫 code 有爆炸特效。
• Dracula Official：單純是一款 VScode 主題。