优化开发体验：VSCode配置技巧分享

当你打开 Visual Studio Code (简称 VSCode)，是否曾想过如何让它变得更符合你的工作习惯？作为一款功能强大且灵活的代码编辑器，VSCode 提供了丰富的配置选项，可以帮助你定制出最理想的开发环境。无论是自动化代码格式化，还是实时编译 Sass 文件，甚至只是简单地美化你的编辑器界面，合理的配置都可以让你的开发工作变得更加高效和愉悦。

在本文中，我们将介绍一些关键的 VSCode 配置项，帮助你在日常开发中节省时间、提高生产力，并享受更加流畅的编码体验。无论你是刚刚接触 VSCode 的新手，还是希望进一步优化自己工作流程的开发者，以下的配置建议都将为你带来实实在在的帮助。让我们一起开始这场优化之旅吧！

一、如何高效定制 VSCode

打开 VSCode，通过点击左上角的 “File (文件)” 菜单，然后选择 “Preferences (首选项)” > “Settings (设置)”，或者直接按下快捷键 Ctrl + ,（Windows/Linux）或 Cmd + ,（Mac）快捷键来访问设置页面。

在这里，你可以看到所有的配置项列表。为了方便管理，你可以创建一个 .json 文件来集中管理配置项。点击设置页面中 Open Setting (UI)，即可打开一个名为 settings.json 的文件，在这里你可以直接编辑 JSON 格式的配置。

打开了 settings.json 文件，就可以开始添加或修改配置项了。确保你的配置语法正确无误，以免引起错误。

二、VSCode 配置清单

1、保存时自动格式化

此配置用于控制 VSCode 中不同文件类型的默认格式化工具，确保在保存文件时自动格式化代码，并指定特定语言的默认格式化扩展（需安装插件：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、光标的平滑动效

此配置改善了 VSCode 中的编辑器和平面工作区列表的滚动体验，并调整了光标的显示方式，使得编码更加流畅舒适。

配置 Json：

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

配置说明：

3、自动补全

此配置优化了 VSCode 编辑器中自动关闭括号、引号以及删除和覆盖行为，使得代码输入更加流畅，并减少了手动添加关闭符号的工作量。

配置 Json：

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

配置说明：

4、代码格式规范

通过配置文本的换行和行高、缩进检测及 Tab 宽度、保存文件时移除行尾空白字符，以及控制 JavaScript 和 TypeScript 代码格式化时是否移除多余的分号，你可以显著提升 VSCode 编辑器的可读性和代码整洁度。这些设置不仅使代码更加统一和美观，还能避免因意外缩进或不必要的变更而导致的问题，确保代码风格的一致性，并遵循特定的编码规范。

配置 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、自动更新引用

此配置用于优化 VSCode 中 TypeScript、JavaScript 和 Vue.js 项目的自动导入行为，使得代码编写更加高效，并确保文件移动时自动更新导入语句。

配置 Json：

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

配置说明：

6、代码展示优化

通过配置括号匹配的高亮显示和引导线，以及控制迷你地图的显示和折叠策略，你可以增强 VSCode 编辑器内代码结构的可见性和美观性，同时保持编辑器界面的简洁。这些设置不仅帮助开发者更容易地理解和导航代码结构，还能通过基于代码缩进的折叠策略减少视觉上的杂乱，从而提升开发效率和代码可读性。

配置 Json：

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

配置说明：

7、文件标签显示方式

此配置用于自定义 VSCode 中特定文件的标签显示方式，使得目录中的index文件在编辑器标签中显示为目录名加上文件扩展名的形式，从而更清晰地区分不同目录下的同名文件。

配置 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、文件关联

此配置用于控制 VSCode 中文件扩展名与语言模式的关联，使得特定扩展名的文件能够使用预设的语言模式进行高亮显示和语法检查。

配置 Json：

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

配置说明：

9、提示设置

此配置项优化了 VSCode 的智能建议和代码补全功能，使其更加符合用户的操作习惯，并提高代码输入的效率。通过调整建议行为和接受方式，可以让代码编写过程更加顺畅。
此配置用于控制 VSCode 编辑器中快速建议的行为，使得在键入代码时，编辑器不仅在普通代码中提供快速建议，还能够在注释和字符串中提供相应的建议。

配置 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 窗口的样式，控制启动时的行为，并设置编辑器的颜色主题，从而打造出一个既符合个人审美又高效的开发环境。

配置 Json：

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

配置说明：

11、搜索排除

此配置用于控制 VSCode 中的搜索行为，排除指定路径下的文件和文件夹，以提高搜索效率并避免不必要的结果。

配置 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、启用鼠标滚轮缩放、设置粘性滚动以及调整折叠策略，你可以显著提升 VSCode 编辑器的操作便利性和代码可读性。自定义单词分隔符可以更精确地识别代码中的关键字和变量名，滚轮缩放功能则便于调整文本大小以便更好地查看代码。粘性滚动功能让顶部的行在滚动时暂时固定显示，直至滚动到一定距离后再继续跟随滚动，而资源管理器和笔记本视图，使其显示更加紧凑，从而节省空间并提高浏览效率。

配置 Json：

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

配置说明：