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

后记

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

  • 76
    点赞
  • 277
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
好的,以下是针对VSCodesettings.json配置文件的中文回答: 在VSCode中,你可以通过打开命令面板(使用快捷键Ctrl+Shift+P或Cmd+Shift+P)并搜索“Preferences: Open User Settings”来打开用户设置。这将打开两个文件:settings.json和keybindings.json。 在这里,我将讨论settings.json,它是一个JSON格式的文件,包含VSCode的各种设置选项。以下是一些可能会对你有用的常见配置选项: 1. 设置默认终端:你可以使用“terminal.integrated.shell.windows”或“terminal.integrated.shell.osx”选项来设置默认终端。例如,如果你想使用PowerShell作为默认终端,可以将“terminal.integrated.shell.windows”设置为PowerShell的路径。 2. 设置字体大小和家族:你可以使用“editor.fontSize”和“editor.fontFamily”选项来设置字体大小和家族。例如,如果你想使用14号字体并且家族是Consolas,你可以将“editor.fontSize”设置为14,“editor.fontFamily”设置为“Consolas”。 3. 设置文件自动 settings.json 文件可以用来定义 VS Code 的用户和工作区设置,以及用来定义拓展和语言服务器的配置选项。当你在使用VSCode时,可以通过更改`settings.json`文件来自定义编辑器的行为。以下是一些常见的`settings.json`配置示例: 1. 更改字体大小: ``` "editor.fontSize": 16 ``` 2. 显示行号: ``` "editor.lineNumbers": "on" ``` 3. 自动保存: ``` "files.autoSave": "onFocusChange" ``` 4. 代码自动缩进: ``` "editor.tabSize": 4, "editor.insertSpaces": true ``` 5. 隐藏侧边栏: ``` "workbench.sideBar.visible": false ``` 6. 更改主题: ``` "workbench.colorTheme": "Default Light+" ``` 可以通过以下步骤打开`settings.json`文件: 1. 打开VSCode 2. 在菜单栏中,选择“文件” -> “首选项” -> “设置”(或者使用快捷键“Ctrl + ,”) 3. 在“用户设置”和“工作区设置”之间选择一个选项卡,以决定要更改的设置是全局设置还是当前工作区的设置。 4. 在“搜索设置”框中输入要更改的设置,然后按Enter。 5. 单击“编辑”图标(一个笔)以编辑`settings.json`文件。 在此文件中,你可以添加、更改或删除特定的设置,并保存更改。保存后,你的更改将立即生效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值