VScode 安裝與環境建置

安裝 Visual Studio Code

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

warning

記得勾選 Add to PATH。

更改終端機預設

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

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

自動儲存

設定 > 經常使用的 > Files: Auto save > afterDelay

單擊文件開啟新分頁 (預設情況下單擊會覆蓋)

在 settins.json 添加："workbench.editor.enablePreview": false。

安裝插件

可以安裝一下 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：自動生成檔案頭部註解。
• indent-rainbow：讓縮排更直觀。

psi-header setting

.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.",
            ],
        },
    ]
  },
}

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。

純好玩系列

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