聊聊vscode配置settings.json知其所以然（附大量配置）

前言

vscode 的配置

settings.json

是一个老生常谈的话题，随着时间的流逝我们可能会很高频的改动他，但我们应该极力避免一个问题：

⚠️ 配了某项但是不知道他的作用 ⚠️

其实就是一个 知其所以然 的问题。

籍此话题，本文将细致的分析我的

settings.json

，希冀可以给读者带来一些帮助。

正文

以下部分插件的配置来自于：

《 前端web开发高效vscode插件分享（辩证的海量实战检验）》

中提到过的插件。

自动保存

{// 自动保存"files.autoSave":"afterDelay",}

使用 vscode 这里强烈建议开启自动保存，因为闪电编码容不得手动 save ，同时要具备一遍成功的 code style 。

字体

{// 字号"editor.fontSize":13,// 字体  中文  日本語　にほんご"editor.fontFamily":"'JetBrains Mono NL','等线'",}

对于字号，通常屏幕推荐使用

13

码，不会特别大，展示信息量也足够。

字体推荐方面，英文推荐使用 JB 全家桶的官方

JetBrains Mono

系列的非连体字体，也就是

JetBrains Mono NL

，你可以在 jetbrains mono 下载并全部安装该字体，即可马上使用。对于逆天的隔离开发场景，请参考下文进行配置字体：

《 vscode 不安装字体使用本地/网络字体文件更改字体方法（没有管理员权限）》

中文方面推荐使用

等线

，该字体对 中/日 文字均可以提供一个很平滑的体感，不会有棱角情况。

settings sync

{// sync git同步"sync.gist":"......","sync.autoUpload":false,"sync.autoDownload":false,}

早期 vscode 的 settings 推荐使用 Settings Sync 插件同步到 github gist 上，虽然后期 ms 收购 github 后有财力支持了 vscode 内同步，但并不是很好用，其次尽量不要做单点容灾。

为了保证足够的安全，我还是常用 Settings Sync 做手动 sync 容灾的（如上所示，关闭了自动上传和下载，全部手动使用

cmd + shift + p

选择

Sync: 更新/上传配置

命令进行手动同步）。

如果要使用，安装该插件后，根据提示同意授权 github gist 访问即可。

代码提示

{// code snippet"editor.suggestSelection":"recentlyUsedByPrefix","vsintellicode.modify.editor.suggestSelection":"automaticallyOverrodeDefaultValue",}

这里就不做赘述，我们的策略是：

1. recentlyUsedByPrefix ：按使用过的 prefix 前缀优先匹配，方便选择我们的惯用项。
2. automaticallyOverrodeDefaultValue ：自动覆盖提示的优先默认值，也是为了保持惯用优先。

新开窗口

{// 新开窗口"workbench.startupEditor":"newUntitledFile","workbench.editor.enablePreview":false,}

vscode 的默认策略是 新窗口默认覆盖当前窗口 + 默认预览状态打开文件 ，这会造成在多文件间切换修改不便，使用双击打开不符合惯用习惯等问题。

所以我们通过

newUntitledFile

持续保持新开文件一定是一个独立的新窗口，搭配

enablePreview: false

取消预览模式，保证编辑模式稳定。

图标系列

{// 开启 material icons"workbench.iconTheme":"material-icon-theme",}

我喜欢使用的 文件/文件夹 icons 图标是 Material Icon Theme ，这一款插件内置大量的图标，而且涵盖了超多工具（如

commitlint

/

lerna

等）的配置文件 icon，使用起来特别舒爽。

文件层次

{// 文件夹紧凑模式显示"explorer.compactFolders":false,}

默认情况下，vscode 和 github 保持一致，即当一个文件夹下只有一个文件夹时，会略过中间部分的文件夹，将显示缩略为一行（这在 java 等面向对象的文件层次结构中格外有用），但对于 FE 场景，不太需要省略，缩略反而会影响项目架构的布局，所以这里建议将文件夹缩略关闭。

文件结尾

{// 默认 lf 结尾"files.eol":"\n",}

这是一个老生常谈的经典问题，首先我们明确两个点：

1. linux / mac / win 上的文件结尾符不一样
2. Git 对于不同的结尾符，在不同平台上可能会引发不一致问题

通常情况下，我们会使用工作区格式

.editorconfig

搭配 EditorConfig for VS Code 插件解这个问题，统一将其指定为 linux 结尾符

lf

：

# .editorconfig
root = true

[*]
end_of_line = lf

但对于没配置

.editorconfig

的工作区我们束手无策，所以我们要从根本上解决该问题，最好的办法即从 vscode 上就锁死

lf

结尾。

Git scm

{// git"git.enableSmartCommit":true,}

开启智能 commit，这对于使用 scm gui 面板大有帮助，可以帮助我们在没 add 到暂存区时，使用

cmd + enter

即自动 add 并 commit 所有 change 。

注：如果你不是 vscode 可视化 Git gui 使用者，无需配置该项，但建议简单操作都使用 vscode 原生 gui，这在 check change 时格外方便，且可以十分灵活的应对大部分基本场景（

push

/

merge

等）

vscode update

{// vscode update tips"update.mode":"none",}

关闭 vscode 自动更新提示，我们定期手动升级即可，注意全面的了解 changelog 以便即时享用新特性。

删除确认

{// delete confirm"explorer.confirmDelete":false,}

灵活的开发并不需要删除二次确认，因为我们希望丝滑无缝操作，同时你也可以使用

cmd + z

撤销掉删除行为。

终端行为

{// Internal terminal"code-runner.runInTerminal":true,"code-runner.fileDirectoryAsCwd":true,}

通过 code runner 插件来使得每次打开终端都在当前选中的文件夹位置，这需要一些配置，详见：

《 vscode 快捷键快速打开终端到当前目录打开的文件位置 》

vscode extension

{// vscode Suggested expansion"extensions.ignoreRecommendations":false,// extension update"extensions.autoUpdate":"onlyEnabledExtensions",}

对于 vscode 插件行为，我们进行几个配置：

1. 关闭 vscode 推荐插件的行为。作为成熟的开发者应该理解自己在做什么，知道自己需要什么、不需要什么，所以我们不需要 “初级” 的提示。
2. 只有已启用的插件才开启自动 update 更新功能，防止禁用的插件还在后台更新浪费资源。

翻译插件

{// Google Translate plugin configuration"googleTranslateExt.replaceText":true,"commentTranslate.targetLanguage":"zh-CN",// translation"varTranslation.translationEngine":"google",}

翻译插件的选择上，这里推荐同时使用三款，详见：

《 vscode 翻译插件最佳搭配、翻译变量、划词翻译、中译英（提高生产效率） 》

同时，我们进行如下配置：

1. googleTranslateExt.replaceText ：打开翻译替换，使得 Google Translate 插件可以将我们的中文选区覆盖为英文。（当然，我更推荐 deepl 的翻译）
2. commentTranslate.targetLanguage ：指定 Comment Translate 插件的翻译语言对象为中文，方便我们 hover 查看注释的中文翻译。
3. varTranslation.translationEngine ：指定 驼峰翻译助手 的翻译 api 走 google ，根据你的网络情况，建议选择自己网络最好的翻译来源（当然翻译质量也大不相同）。

文件格式化

{// 默认格式化方式，统一为 prettier"editor.defaultFormatter":"esbenp.prettier-vscode",// prettier global config"prettier.semi":false,"prettier.printWidth":80,"prettier.singleQuote":true,}

早期百花齐放，我们还需要

Beautify

/

Beautify css

等插件根据不同文件配置不同的格式化器，但当下 prettier 已发展的十分成熟，prettier 支持的文件格式就使用 prettier 进行最佳实践的格式化，所以我们配置默认的格式化行为使用 prettier 即可，这可以帮我们省去很多针对不同文件的格式化配置。

需要注意的是，prettier 默认配置并非全部都为最佳实践，这里推荐将全局默认行为也配置上，这样在任意文件都可以享受到最佳的格式化行为。

eslint

{// eslint config"editor.codeActionsOnSave":{"source.fixAll.eslint":true,},// eslint 自动识别工作区"eslint.workingDirectories":[{"mode":"auto"}],}

对于 eslint 的配置都需要安装 eslint 的插件（ ESLint ），然后将

cmd + s

保存自动修复打开即可（

source.fixAll.eslint

），方便我们随时手动格式化代码。

同时在 monorepo 场景，eslint 插件往往会在顶层寻找 eslintrc 配置文件，忽略了单 project 的文件夹 eslint 配置，所以我们需要打开

auto

自动识别模式，来更好的应对 monorepo 场景。

Vue

{// 防止 vetur 报错"vetur.validation.template":false,// "vetur.validation.script": false,}

在 vue 2 系开发时，使用 vetur 进行支持，为了防止

template

解析报错，我们需要关掉对应的校验行为，这也是老生常谈。

根据情况，你可能还需要关掉

script

区的校验行为。

svg

{// svg preview config"svg.preview.mode":"svg",}

预览 svg 时直接查看源码，而不是预览图像，这方便于我们进行修改颜色等行为。

在预览时，建议你使用一款插件来支持 svg preview 。

live-server

{// liveserver 关闭开启服务提示"liveServer.settings.donotShowInfoMsg":true,}

经常需要本地起 server 时，往往会用到 Live Server 插件，该插件在启动 server 后会有一个启动 port 的提示，每次都需要手动关掉，对于经常使用该插件的开发者，可以省略这一步浪费时间的行为。

code diff

{// diff"diffEditor.ignoreTrimWhitespace":false,}

vscode 的 diff 行为默认会忽略尾部空字符，为了更精准的控制文件尾，我们需要更加敏感，所以关闭忽略行为。

彩色括号/导轨

{// 原生复现 彩色括号"workbench.colorCustomizations":{"editorBracketHighlight.foreground1":"#ffd700","editorBracketPairGuide.activeBackground1":"#ffd7007f","editorBracketHighlight.foreground2":"#da70d6","editorBracketPairGuide.activeBackground2":"#da70d67f","editorBracketHighlight.foreground3":"#87cefa","editorBracketPairGuide.activeBackground3":"#87cefa7f","editorBracketHighlight.foreground4":"#ffd700","editorBracketPairGuide.activeBackground4":"#ffd7007f","editorBracketHighlight.foreground5":"#da70d6","editorBracketPairGuide.activeBackground5":"#da70d67f","editorBracketHighlight.foreground6":"#87cefa","editorBracketPairGuide.activeBackground6":"#87cefa7f","editorBracketHighlight.unexpectedBracket.foreground":"#ff0000",},"editor.bracketPairColorization.enabled":true,"editor.guides.bracketPairs":"active",}

由于 vscode 自 v1.60 开始原生支持彩色括号和导轨，且性能极好，我们从 Bracket-Pair-Colorizer 插件迁出，详见：

《 vscode1.60 原生高性能括号着色无缝迁移方案（等价Bracket-Pair-Colorizer） 》

《 vscode1.62 原生代码块边缘导轨着色与Bracket Pair Colorizer的对标和差异化（附配置） 》

主题

{// theme"workbench.colorTheme":"Dracula",}

我非常喜欢的一款 无红色 暗色主题 Dracula Official 。

jsx attr auto brackets

{// jsx auto complete"typescript.preferences.jsxAttributeCompletionStyle":"auto","javascript.preferences.jsxAttributeCompletionStyle":"auto",}

vscode v1.63 对 jsx 属性的自动补全括号行为更加智能化了，详见 JSX attribute completions 。

inline complete

{// inline complete"editor.inlineSuggest.enabled":true,}

使用 Tabnine 或 github copilot 等自动补全插件都需要开启的选项。

其他

{// svg formatter"[svg]":{"editor.defaultFormatter":"jock.svg"},// python format"[python]":{"editor.defaultFormatter":"ms-python.python"},// python language server engine"python.languageServer":"Pylance",}

后记

为了真正做到 “知其所以然” ，而不是单纯的复制粘贴，本文不会给出大全套的配置合集，加上习惯的不同，请各位读者自行各取所需。