當(dāng)你打開 Visual Studio Code (簡稱 VSCode)，是否曾想過如何讓它變得更符合你的工作習(xí)慣？作為一款功能強大且靈活的代碼編輯器，VSCode 提供了豐富的配置選項，可以幫助你定制出最理想的開發(fā)環(huán)境。無論是自動化代碼格式化，還是實時編譯 Sass 文件，甚至只是簡單地美化你的編輯器界面，合理的配置都可以讓你的開發(fā)工作變得更加高效和愉悅。

在本文中，我們將介紹一些關(guān)鍵的 VSCode 配置項，幫助你在日常開發(fā)中節(jié)省時間、提高生產(chǎn)力，并享受更加流暢的編碼體驗。無論你是剛剛接觸 VSCode 的新手，還是希望進(jìn)一步優(yōu)化自己工作流程的開發(fā)者，以下的配置建議都將為你帶來實實在在的幫助。讓我們一起開始這場優(yōu)化之旅吧！

一、如何高效定制 VSCode

打開 VSCode，通過點擊左上角的 “File (文件)” 菜單，然后選擇 “Preferences (首選項)” > “Settings (設(shè)置)”，或者直接按下快捷鍵 Ctrl + ,（Windows/Linux）或 Cmd + ,（Mac）快捷鍵來訪問設(shè)置頁面。

vscode_open_setting.jpg

在這里，你可以看到所有的配置項列表。為了方便管理，你可以創(chuàng)建一個 .json 文件來集中管理配置項。點擊設(shè)置頁面中 Open Setting (UI)，即可打開一個名為 settings.json 的文件，在這里你可以直接編輯 JSON 格式的配置。

vscode_open_setting_json.jpg

打開了 settings.json 文件，就可以開始添加或修改配置項了。確保你的配置語法正確無誤，以免引起錯誤。

vscode_setting_json.jpg

二、VSCode 配置清單

1、保存時自動格式化

此配置用于控制 VSCode 中不同文件類型的默認(rèn)格式化工具，確保在保存文件時自動格式化代碼，并指定特定語言的默認(rèn)格式化擴展（需安裝插件：Prettier - Code formatter）。

配置 Json：

{
    "editor.formatOnSave": true,
    "editor.wordWrapColumn": 200,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[markdown]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[yaml]": {
        "editor.defaultFormatter": "redhat.vscode-yaml"
    }
}

配置說明：

2、光標(biāo)的平滑動效

此配置改善了 VSCode 中的編輯器和平面工作區(qū)列表的滾動體驗，并調(diào)整了光標(biāo)的顯示方式，使得編碼更加流暢舒適。

配置 Json：

{
    "editor.smoothScrolling": true,
    "editor.cursorBlinking": "expand",
    "editor.cursorSmoothCaretAnimation": "on",
    "workbench.list.smoothScrolling": true
}

配置說明：

3、自動補全

此配置優(yōu)化了 VSCode 編輯器中自動關(guān)閉括號、引號以及刪除和覆蓋行為，使得代碼輸入更加流暢，并減少了手動添加關(guān)閉符號的工作量。

配置 Json：

{
    "editor.autoClosingBrackets": "beforeWhitespace",
    "editor.autoClosingDelete": "always",
    "editor.autoClosingOvertype": "always",
    "editor.autoClosingQuotes": "beforeWhitespace",
}

配置說明：

4、代碼格式規(guī)范

通過配置文本的換行和行高、縮進(jìn)檢測及 Tab 寬度、保存文件時移除行尾空白字符，以及控制 JavaScript 和 TypeScript 代碼格式化時是否移除多余的分號，你可以顯著提升 VSCode 編輯器的可讀性和代碼整潔度。這些設(shè)置不僅使代碼更加統(tǒng)一和美觀，還能避免因意外縮進(jìn)或不必要的變更而導(dǎo)致的問題，確保代碼風(fēng)格的一致性，并遵循特定的編碼規(guī)范。

配置 Json：

{
    "editor.wordWrap": "on",
    "editor.lineHeight": 1.6,
    "editor.detectIndentation": false,
    "editor.tabSize": 4,
    "files.trimTrailingWhitespace": true,
    "javascript.format.semicolons": "remove",
    "typescript.format.semicolons": "remove",
}

配置說明：

5、自動更新引用

此配置用于優(yōu)化 VSCode 中 TypeScript、JavaScript 和 Vue.js 項目的自動導(dǎo)入行為，使得代碼編寫更加高效，并確保文件移動時自動更新導(dǎo)入語句。

配置 Json：

{
    "typescript.preferences.preferTypeOnlyAutoImports": true,
    "typescript.preferences.includePackageJsonAutoImports": "on",
    "javascript.suggest.autoImports": true,
    "typescript.suggest.autoImports": true,
    "vue.updateImportsOnFileMove.enabled": true,
}

配置說明：

6、代碼展示優(yōu)化

通過配置括號匹配的高亮顯示和引導(dǎo)線，以及控制迷你地圖的顯示和折疊策略，你可以增強 VSCode 編輯器內(nèi)代碼結(jié)構(gòu)的可見性和美觀性，同時保持編輯器界面的簡潔。這些設(shè)置不僅幫助開發(fā)者更容易地理解和導(dǎo)航代碼結(jié)構(gòu)，還能通過基于代碼縮進(jìn)的折疊策略減少視覺上的雜亂，從而提升開發(fā)效率和代碼可讀性。

配置 Json：

{
    "editor.guides.bracketPairs": true,
    "editor.bracketPairColorization.enabled": true,
    "editor.minimap.enabled": false,
    "editor.foldingStrategy": "indentation",
}

配置說明：

7、文件標(biāo)簽顯示方式

此配置用于自定義 VSCode 中特定文件的標(biāo)簽顯示方式，使得目錄中的index文件在編輯器標(biāo)簽中顯示為目錄名加上文件擴展名的形式，從而更清晰地區(qū)分不同目錄下的同名文件。

配置 Json：

{
    "workbench.editor.customLabels.patterns": {
        "**/index.vue": "${dirname}.vue",
        "**/index.js": "${dirname}.js",
        "**/index.ts": "${dirname}.ts",
        "**/index.jsx": "${dirname}.jsx",
        "**/index.tsx": "${dirname}.tsx"
    },
}

配置說明：

8、文件關(guān)聯(lián)

此配置用于控制 VSCode 中文件擴展名與語言模式的關(guān)聯(lián)，使得特定擴展名的文件能夠使用預(yù)設(shè)的語言模式進(jìn)行高亮顯示和語法檢查。

配置 Json：

{
    "files.associations": {
        "*.wxss": "css",
        "*.wxml": "html",
        "*.svg": "html",
        "*.xml": "html",
        "*.wxs": "javascript",
        "*.cjson": "jsonc",
        "*.json": "jsonc",
    },
}

配置說明：

9、提示設(shè)置

此配置項優(yōu)化了 VSCode 的智能建議和代碼補全功能，使其更加符合用戶的操作習(xí)慣，并提高代碼輸入的效率。通過調(diào)整建議行為和接受方式，可以讓代碼編寫過程更加順暢。
此配置用于控制 VSCode 編輯器中快速建議的行為，使得在鍵入代碼時，編輯器不僅在普通代碼中提供快速建議，還能夠在注釋和字符串中提供相應(yīng)的建議。

配置 Json：

{
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.acceptSuggestionOnEnter": "smart",
    "editor.suggestSelection": "recentlyUsedByPrefix",
    "editor.suggest.insertMode": "replace",
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
}

配置說明：

10、美化編輯器界面

此配置用于改變 VSCode 窗口的樣式，控制啟動時的行為，并設(shè)置編輯器的顏色主題，從而打造出一個既符合個人審美又高效的開發(fā)環(huán)境。

配置 Json：

{
    "window.dialogStyle": "custom",
    "workbench.startupEditor": "none",
    "workbench.colorTheme": "One Dark Pro Darker",
    "workbench.startupEditor": "none",
}

配置說明：

11、搜索排除

此配置用于控制 VSCode 中的搜索行為，排除指定路徑下的文件和文件夾，以提高搜索效率并避免不必要的結(jié)果。

配置 Json：

{
    "search.exclude": {
        "**/node_modules": true,
        "**/pnpm-lock.yaml": true,
        "**/package-lock.json": true,
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/.idea": true,
        "**/.vscode": true,
        "**/build": true,
        "**/dist": true,
        "**/tmp": true,
    },
}

配置說明：

12、其它的配置

通過配置 editor.wordSeparators、啟用鼠標(biāo)滾輪縮放、設(shè)置粘性滾動以及調(diào)整折疊策略，你可以顯著提升 VSCode 編輯器的操作便利性和代碼可讀性。自定義單詞分隔符可以更精確地識別代碼中的關(guān)鍵字和變量名，滾輪縮放功能則便于調(diào)整文本大小以便更好地查看代碼。粘性滾動功能讓頂部的行在滾動時暫時固定顯示，直至滾動到一定距離后再繼續(xù)跟隨滾動，而資源管理器和筆記本視圖，使其顯示更加緊湊，從而節(jié)省空間并提高瀏覽效率。

配置 Json：

{
    "editor.wordSeparators": "`~!@%^&*()=+[{]}\\|;:'\",.<>/?（），。；：",
    "editor.mouseWheelZoom": true,
    "editor.stickyScroll.enabled": true,
    "explorer.compactFolders": true,
    "notebook.compactView": true,
}

配置說明：

原文地址