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

Posted 2023-03-29 咲奈

前言

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

后记

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