自定义你的VSCode：主题、文件图标、快捷键、设置、schema、插件

article/2025/11/6 12:29:16
  • 超详细VSCode安装教程（Windows）
  • 推荐自己的专栏：分享使用VS Code的基本操作与各种技巧
  1. 请记住一点，VSCode中的一切快捷键操作都可以在控制面板中输入对应的命令来完成，并且常用命令还可以在菜单栏中找到，命令其实就是简单的英文词语，如果有一定的英语基础，是很容易记住大概命令的，而这就足够了（控制面板中支持模糊搜索）
  2. 额，如果你懒得去记忆这些内容，那么…收藏本文并点个赞也许是个好主意
  3. 以下设置实质上都是通过命令修改配置文件

你可以通过以下设置来自定义你的VSCode

  • 改变主题
  • 更改键盘快捷键
  • 设置
  • 添加 JSON schema validation
  • 安装扩展

主题

改变主题

（1）打开该命令的四种方式

方法一：键盘快捷键：Ctrl + K Ctrl + T（按住Ctrl不动，先按K，再按T）

方法二：键盘快捷键：Ctrl + Shift + P，在控制面板中输入color theme

方法三：菜单：File > Preferences > Color Theme

方法四：左下角齿轮

（2）选择主题

  • 在下拉列表中列出所有你能使用的主题
  • 上半部分为亮主题，中间部分为暗主题，下半部分为高对比度主题
  • 如果默认提供的主题不能满足你的需求，可以下载主题插件（请下拉到底部，有对应插件的传送门）

改变文件图标主题

（1）打开该命令的三种方式

方法一：键盘快捷键：Ctrl + Shift + P，在控制面板中输入file icon theme，输入命令的一部分后，下拉列表中就会出现匹配的命令

方法二：菜单：File > Preferences > File Icon Theme

方法三：左下角齿轮 > File Icon Theme

（2）选择文件图标主题

  • 在下拉列表中列出所有你能使用的文件图标主题
  • 如果默认提供的文件图标主题不能满足你的需求，可以下载文件图标主题插件

快捷键

自定义快捷键

（1）打开该命令的三种方式

方法一：键盘快捷键：Ctrl + K Ctrl + S（按住Ctrl不动，先按K，再按S）

方法二：菜单：File > Preferences > Keyboard Shortcuts

方法三：左下角齿轮 > Keyboard Shortcuts

（2）自定义快捷键
在这里插入图片描述
如果你愿意则折腾的话，祝你好运~

下载快捷键插件

你是否习惯使用其他编辑器的键盘快捷键？你可以安装一个键盘快捷键扩展程序，将你喜欢的编辑器中的键盘快捷方式带到VS Code

打开该命令的四种方式

方法一：键盘快捷键：Ctrl + K Ctrl + M（按住Ctrl不动，先按K，再按M）

方法二：菜单：File > Preferences > Keymaps

方法三：左下角齿轮 > Keymaps

方法四：直接在插件商城中搜索@recommended:keymaps

设置

VS Code提供了两种不同的设置范围：用户设置与工作空间设置

  • 用户设置（User Settings）：适用于您打开的任何VS Code实例（文件、文件夹、项目、工作区）
  • 工作空间设置（Workspace Settings）：存储在工作空间中的设置仅在打开工作空间时适用，并且可以在项目的开发人员之间共享，工作空间设置会覆盖用户的设置

VS Code工作空间通常只是您的项目根文件夹，其根目录下的.vscode文件夹下一般包含三个文件（不是一定有哦）：

  1. settings.json ：工作空间设置
  2. launch.json ：用于调试
  3. tasks.json ：一般在VSCode中编写非内置的语言代码时需要配置该文件
    • 比如说配置C/C++工作区，必定先要配置该文件才能编译、运行C/C++代码；
    • 但也不是所有语言都需要配置该文件。比如配置Python工作区并不需要该文件，直接在settings.json文件中配置python.exe的路径即可

（1）打开设置的四种方式

方法一：键盘快捷键：Ctrl + ,

方法二：菜单：File > Preferences > Settings

方法三：左下角齿轮 > Settings

前三个方法打开的都是图形化界面（设置编辑器）

方法四：键盘快捷键：Ctrl + Shift + P，在控制面板中输入settings，在下拉菜单中选择你需要设置的目标

你可以看到，设置的操作方式分为UI（图形空户界面）、JSON（配置文件），

下面我会列出配置JSON文件的常用设置：

（2）控制面板中，输入settings.json，打开用户设置

常用设置

➢ 更改各种UI元素的字体大小

单位为像素（px）

//主要编辑区
"editor.fontSize": 18,// 终端面板
"terminal.integrated.fontSize": 14,// 输出面板
"[Log]": {"editor.fontSize": 15,
}

➢ 更改缩放比例

//按住Ctrl键，配合鼠标滚轮放大或缩小编辑器字体大小
"editor.mouseWheelZoom":true,//缩放等级，默认为 0
"window.zoomLevel": 0,

➢ 字体连字

比如说，你在VSCode中输入大于等于号，是这样的：>=

设置了字体连字的字体后，是这样的：≥

"editor.fontLigatures": true,
"editor.fontFamily": "Fira Code",
  • 你将需要安装支持字体连字的字体
  • FiraCode是VS Code 推荐的一种字体（支持连字），你电脑上如果无此字体，可以在 FiraCode 页面中下载
  • 首先将字体下载到电脑上，然后在VSCode中进行相应设置并保存文件，最后重启VSCode即可

➢ 自动保存

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

你也可以，菜单：File > Auto Save

➢ 保存时格式化

//保存时格式化
"editor.formatOnSave": true,

➢ 粘贴时保留格式

//粘贴时保留格式
"editor.formatOnPaste": true,

➢ 更改制表符（Tab键）的大小

//一个制表符等于四个空格
"editor.tabSize": 4,

➢ 渲染空白

//空格符的渲染
"editor.renderWhitespace": "selection",

有四个值，请根据实际需求更改：

  • 默认值为"selection"，只在文本选择中渲染空白字符（以虚化的圆点显示），
    在这里插入图片描述
    不对其进行修改，即使用默认值，代码界面是最舒服的

  • none，空格符不进行渲染，就是空白

  • boundary，只渲染边界处的空格符

  • all，任意空格符都被渲染为虚化的圆点

➢ 忽略文件/文件夹

//从编辑器窗口中忽略这些文件/文件夹
"files.exclude": {"somefolder/": true,"somefile": true,
}//从搜索结果中忽略这些文件/文件夹
"search.exclude": {"someFolder/": true,"somefile": true,
}
  • somefolder/ 就是填写你需要忽略的文件夹名
  • somefile 就是填写你需要忽略的文件名

特定于语言的设置

  • 按语言定制编辑器，你可以按语言标识符确定设置的范围。你可以在 语言标识符参考中找到常用语言ID的列表
"[languageid]": {}
  • 如果你懒的去查看语言标识符参考，还可以在控制面板中输入Configure Language Specific Settings，

    打开语言选择器

    选择所需的语言（比如Python），会自动打开用户设置settings.json文件

    你可以在其中添加适用的设置

关于设置这方面，我就讲这么多了，如果你有更进一步的需求，可以查阅https://code.visualstudio.com/docs/getstarted/settings#_default-settings

添加JSON schema validation

  • 默认情况下对许多文件类型启用
  • 在settings.json中创建自己的 schema（指出如何形式描述XML文档元素的一个标准） 和 validation（验证）
"json.schemas": [{"fileMatch": ["/bower.json"],"url": "http://json.schemastore.org/bower"}
]

或用于工作空间（workspace）中定义的 schema

"json.schemas": [{"fileMatch": ["/foo.json"],"url": "./myschema.json"}
]

或者自定义 schema

"json.schemas": [{"fileMatch": ["/.myconfig"],"schema": {"type": "object","properties": {"name" : {"type": "string","description": "The name of the entry"}}}}
]

想更深入的配置JSON，请参考JSON官方文档

扩展插件

扩展插件不是越多越好，而是精益求精！！！

打开扩展管理的四种方式

方法一：键盘快捷键：Ctrl + Shift + X

方法二：菜单：File > Preferences > Extensions

方法三：左下角齿轮 > Extensions

方法四：视图

注意到插件栏右上角的三个点(…)了吗，

  • 愿你，愿我扬帆起航上征途，前程似锦大海阔。
  • 行文不易，点个赞，点个关注，爱你么么哒
  • 参考文章：
    • https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_customization
    • https://code.visualstudio.com/docs/getstarted/settings

http://chatgpt.dhexx.cn/article/JU2oH5pO.shtml

相关文章

VScode 主题字体颜色 必备插件

VScode 主题字体颜色 必备插件

主题字体颜色 通过文件>首选项>设置 > 搜索workbench.settings.editor，选中json即可改成json设置 // settings.json (个人配置) {"files.associations": {"*.vue": "vue","*.wpy": "vue","*.wxm…
阅读更多...
VSCode怎么换主题（有图 超详细）

VSCode怎么换主题（有图 超详细）

上下键可预览
阅读更多...
VScode 自定义主题颜色

VScode 自定义主题颜色

vscode其实已经有很多完善且好看的主题了，但我总觉得每一个主题对我来说，都有那么一点点不够完美，比如亮色的主题，颜色就没有深色主题那么好看，对比度高。 好不容易看到一个好看的主题吧，又觉得某一部分的…
阅读更多...
把VScode的主题变得和idea一样

把VScode的主题变得和idea一样

用惯了jetbrains系列软件，不太适应VScode的主题和颜色，可以通过一个插件把VScode的颜色变得和idea一样 打开VScode,搜索插件jetbrains, JetBrains Darcula Theme是暗色，Webstorm JetBrains Theme是亮色 和idea对比效果： 与些许差距…
阅读更多...
7 款炫酷的 VSCode 主题扩展

7 款炫酷的 VSCode 主题扩展

👇👇关注后回复 “进群” ，拉你进程序员交流群👇👇 作者丨小集 来源丨小集（ID：zsxjtip） 在 VSCode 中，安装自定义主题和图标包可以彻底改变 VSCode 的外观。VSCode 有数千…
阅读更多...
推荐几款好用的VsCode色彩主题

推荐几款好用的VsCode色彩主题

经常对着同一款主题，有没有想着换一拨呢？ 推荐一些个人觉得比较不错的主题，可以自己选择， 所有主题可以直接在扩展商店下载，直接上主题： Gatito Theme Dark Night Owl One Monokai Syntax Pink Cat Boo t…
阅读更多...
vscode优美的主题

vscode优美的主题

如何给VS Code更换主题 Mac用户 ⌘ K 然后 ⌘ T，会显示出所有的主题列表，按上下键可修改主题，⌘ ⇧ P , 在输入框中color theme，然后回车，同样也会进入主题列表 Windows用户: Ctrl Shift P 即可进入主题列表…
阅读更多...
【3】VSCode 主题设置推荐，自定义配色方案，修改注释高亮颜色

【3】VSCode 主题设置推荐，自定义配色方案，修改注释高亮颜色

相关文章： 【一】tensorflow安装、常用python镜像源、tensorflow 深度学习强化学习教学 【二】tensorflow调试报错、tensorflow 深度学习强化学习教学【三】tensorboard安装、使用教学以及遇到的问题【四】超级快速pytorch安装 【1】VScode中文界面方法-------…
阅读更多...
【vscode简单入门(四)】vscode精美UI主题推荐 （~」还你一个花里胡哨的vscode「~）

【vscode简单入门(四)】vscode精美UI主题推荐 （~」还你一个花里胡哨的vscode「~）

学习一个新的软件&#xff0c;只会基本的操作怎么能满足一个富有个性的程序猿本猿捏>-< 那必须得鼓捣起来呀&#xff0c;本着能自定义就绝不用默认的态度&#xff0c;我打算开始写今天这篇博客了~偶吼吼 一. 有趣的小插件 开始介绍主题之前&#xff0c;再给大家安利三个…
阅读更多...
vscode 主题的颜色定制

vscode 主题的颜色定制

颜色定制 workbench.colorCustomizations setting.json {"workbench.colorCustomizations": {"activityBar.background": "#00AA00"} }对比颜色: 对比色通常只用于高对比主题。如果设置了&#xff0c;它们会在UI元素周围添加额外的边框来增加对…
阅读更多...
vscode如何更换主题

vscode如何更换主题

1.打开Vscode&#xff0c;点击“文件”-“首选项”-“颜色主题”。 (快捷键&#xff1a;先按CtrlK、再按CtrlT) 2.打开主题设置面板&#xff0c;在深色主题中点击“深色”。 3.这样就可以把主题改为“深色”这样Vscode界面就会全部显示为黑色。 参考&#xff1a;https://jingy…
阅读更多...
VSCODE 好看的亮色系主题

VSCODE 好看的亮色系主题

搬砖那么枯燥&#xff0c;一定要在颜值高的窗口进行呀。这几年用了好多vscode主题&#xff0c;但这几个&#xff0c;真的是每次看到都会心动的主题。 很适合花里胡哨的女孩子们呀&#xff5e; 粉粉嫩嫩的&#xff1a;Cute 这款主题的特点就是&#xff1a;粉&#xff01;&…
阅读更多...
VSCode：一个温馨不扎眼的暗色主题推荐

VSCode：一个温馨不扎眼的暗色主题推荐

最下方有手把手使用方法和配置过程。 身为一个编程小白&#xff0c;我也想找一个好看的vscode主题&#xff0c;来给我提供源源不断地写代码动力&#xff0c;好让我早日成为卷王&#xff08;bushi 主题名为&#xff1a;Ayu Mirage Bordered 演示效果如下&#xff1a; 个…
阅读更多...
2022 年最受欢迎的 19个 VS Code 主题排行榜

2022 年最受欢迎的 19个 VS Code 主题排行榜

2022 年最受欢迎的 19 个 VS Code 主题排行榜 微软的 VS Code 凭其丰富的扩展受到众多开发者的青睐&#xff0c;俺总结了 2021 年最受欢迎的15 个 VS Code 主题&#xff08;按 VS Code 扩展商店的安装次数排名&#xff09;&#xff0c;仅供大家参考。 推荐使用 13&#xff1a…
阅读更多...
【VSCode | 主题】推荐几个适合看 C/C++ 代码的 VSCode 主题

【VSCode | 主题】推荐几个适合看 C/C++ 代码的 VSCode 主题

目录 一、概述二、主题2.1 Eva Theme2.2 Theme2.3 GitHub Theme2.4 One Monokai Theme2.5 Atom One Dark Theme2.6 Atom One Light Theme2.7 One Dark Pro2.8 Palenight Theme 总结 一、概述 从 source insight 转到 VSCode 的一个好处就是&#xff0c;VSCode有很多主题插件。本…
阅读更多...
主题之美，排名靠前的 10 个 VSCode 主题

主题之美，排名靠前的 10 个 VSCode 主题

作者&#xff1a;Muthu Annamalai Venkatachalam 译者&#xff1a;前端小智 来源&#xff1a;dev 有梦想&#xff0c;有干货&#xff0c;微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录&#xff0c;有一线…
阅读更多...
8个VSCode主题推荐，超好看

8个VSCode主题推荐，超好看

1. Dainty 有很多种颜色可选&#xff0c;喜欢紫色系的推荐 Andromeda (andromeda)Ardent (ardent)&#xff08;这个紫色系的最好看&#xff01;&#xff09;Ayu Mirage (ayu-mirage)City Lights (city-lights)Dark (dark-plus)等等 2. Aurora X 蓝色系&#x…
阅读更多...
VScode 主题和打字特效配置，让你的VScode活“”起来

VScode 主题和打字特效配置，让你的VScode活“”起来

前言 VScode 并不是我用的第一款代码编辑器&#xff0c;在它之前我用过很多代码编辑器&#xff0c;依次的顺序我记得应该是DreamWeaver、HBuilder、Sublime、Webstorm。 为什么在用过这么多当时确实很火&#x1f525;、很主流的代码编辑器以后我会选择VScode呢&#xff1f;并且…
阅读更多...
软件测试的方法和步骤

软件测试的方法和步骤

软件测试的两种方法 答&#xff1a;黑盒测试和白盒测试 黑盒&#xff1a;这种方法是把测试对象看做一个黑盒子&#xff0c;测试人员完全不考虑程序内部的逻辑结构和内部特性&#xff0c;只依据程序的需求规格说明书&#xff0c;检查程序的功能是否符合它的功能说明。 黑盒测…
阅读更多...
软件测试过程与方法

软件测试过程与方法

软件测试过程与方法 第1单元小节测试第1单元测试课前专题测试 第2单元节内小测2.1视频小测2.2视频小测2.3小测 第2单元测试 第3单元小节测试3.1决策表测试3.2组合测试视频小测3.2小测试 单元测试第3周单元测试 第4周单元测验 会持续更新 如无更新请留言 您的留言与点赞是我最大…
阅读更多...
推荐文章

Copyright @ 2022~2023