vscodesettings.json误删了（聊聊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", }

这里就不做赘述

 
 

 
 

 
 

 
 

 
 

 
 
，我们的策略是：

recentlyUsedByPrefix ：按使用过的 prefix 前缀优先匹配











，方便选择我们的惯用项                   。

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

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

linux / mac / win 上的文件结尾符不一样

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 插件行为             ，我们进行几个配置：

关闭 vscode 推荐插件的行为
   
   
   
   
   
   
。作为成熟的开发者应该理解自己在做什么
  
 
  
 
  
 
  
 
  
 
  
 
，知道自己需要什么 
  
  
  
  
  
  、不需要什么











，所以我们不需要 “初级 
  
  
  
  
  
  ” 的提示
 

 

 

 

 

 
。

只有已启用的插件才开启自动 update 更新功能 
  
  
  
  
  
  ，防止禁用的插件还在后台更新浪费资源 

 

 

 

 

 

 。

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

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


 


 


 


 


 

，详见：

《 vscode 翻译插件最佳搭配
  
  
  
  
  
  
、翻译变量
 


 


 


 


 


 

、划词翻译 
 
 
 
 
 
 、中译英（提高生产效率） 》

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

googleTranslateExt.replaceText ：打开翻译替换
   
   
   
   
   
   
，使得 Google Translate 插件可以将我们的中文选区覆盖为英文            。（当然
 

 

 

 

 

 
，我更推荐 deepl 的翻译）

commentTranslate.targetLanguage ：指定 Comment Translate 插件的翻译语言对象为中文 

 

 

 

 

 

 ，方便我们 hover 查看注释的中文翻译

 
 

 
 

 
 

 
 

 
 

 
 
。

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

后记

为了真正做到 “知其所以然
  
  
  
  
  
  
” 

















，而不是单纯的复制粘贴             ，本文不会给出大全套的配置合集
  
 
  
 
  
 
  
 
  
 
  
 
，加上习惯的不同











，请各位读者自行各取所需            。