vscode空格太小或者太大问题？

原创 已于 2022-10-09 17:41:52 修改 · 4.6k 阅读 · 21 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2022-10-09 17:40:41 首次发布
解决VSCode中因不同电脑导致的空格显示大小不一的问题。通过修改字体设置，可以轻松调整空格大小，使代码在不同环境中保持一致且舒适的视觉效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vscode空格太小或者太大问题？

有时我们在多个平台或者多台电脑安装vscode，但不同电脑会有空格太小或者太大的问题，看着很不舒服，如下所示：

 

 以上问题在设置字体修改即可：

修改如下：Consolas, 'Courier New', monospace

 修改后看着就舒服多了，如下所示：

从菜鸟到大神：VSCode助力HTML开发全攻略
邓邓子的博客
04-27 1993
本文全面介绍 VSCode 在 HTML 开发中的高效应用。先引导读者完成 VSCode 的安装与个性化设置，助其快速适应开发环境；接着推荐 Live Server、Prettier 等实用插件，实现实时预览、代码格式化等功能，提升开发效率。通过详细的开发实战步骤，从新建文件到添加样式，带领读者掌握 HTML 基础结构与常用标签使用。还分享代码片段管理、多人协作等进阶技巧，解决常见开发问题。旨在帮助开发者利用 VSCode，轻松高效完成 HTML 开发，打造优质网页。
VSCode 基本使用
热门推荐
huangpb的博客
12-16 5万+
一、VSCode 界面功能介绍 1. Git History，相当于 git log 3. 打开上一提交版本的更改记录 4. 显示提交注释 5. 向右分屏 6. 直接定位到第几行 7. 解析当前文件的语言 8. 切换项目（基于 Project Manager） 9. 切换分支 10. GitLens，可以查看文件和单行代码的修改记录 二、常用快捷键 1. Comman.........
vsocde空格太小解决办法
SjzEboy的博客
04-20 5181
vscode 默认空格间距很小，导致代码看起来不美观，实际是字体的问题。换个字体就好了，点击vscode左下角的设置，将图中的字体栏内容改为下图中所示，重启vscode即可。
Vscode中单词之间空格很大
weixin_43677787的博客
01-12 723
问题：当编辑代码的时候，突然单词之间空格变得特别大，eslint提示。 解决：选择全半角（半角）–>半角 问题解决。
vscode代码格式调整为4个空格，编辑器配置
最新发布
qq_44766357的博客
07-10 631
设置为 4勾选取消勾选（防止自动检测覆盖设置。
设置VSCode空格宽度
A person does not really understand something until after teaching it to a computer. Donald.E.Knuth
12-20 2940
修改Font Family 为'monospace'
ubuntu18.04下vscode代码空格不明显（太小）
qq_37195486的博客
02-24 1479
安装新的ubuntu后在code中空格的长度太小，难以辨识，可以安装firacode字体来解决。 我有试过其他的办法，比如在设置->首选项->输入font然后在空格中输入monospace，并没有什么作用 可以修改ubuntu的字体来解决 ***firacode***字体安装 1.更新可用软件包列表: sudo apt update; 2.通过安装/升级软件来更新系统: sudo apt upgrade; 3.安装字体管理器: sudo apt install font-manager; 4.
VScode tab缩进太小 空格长度太小问题（Ubuntu）
木卫三的博客
02-10 3378
Ubuntu18.04 安装vscode后，发现tab的缩进太小，初以为是tab的空格数没设置对，经确认后，没问题，一个tab是四个空格。
Ubuntu上解决vscode 空格太小看不清
啦卡的博客
12-10 763
转载自：https://blog.csdn.net/weixin_42377635/article/details/100010524
vscode设置缩进2个空格或设置空格4
qq_20146529的博客
10-06 2825
1.打开vscode，找到右下角，单击。
vscode配置html_VS Code 常用配置
weixin_39624716的博客
11-20 974
用户设置配置如下：C:甥敳獲用户名AppDataRoamingCodeUsersettings.json{ // tab 大小为2个空格 "editor.tabSize": 2, // 编辑器换行 "editor.wordWrap": "off", // 保存时格式化 "editor.formatOnSave": true, // 开启 vscode 文件路径导航 "breadcrumbs.ena...
vscode 实用插件
luoteen的博客
12-28 1574
Chinese (Simplified) Language Pack for Visual Studio Code 设置中文显示 open in browser 从浏览器中查看html文件，使用系统的当前默认浏览器 One Dark Pro 设置vscode的颜色，这个颜色比默认的黑色更淡，对眼睛没有那么的刺眼 Auto Close Tag 自动补全html标签 Auto Import 自动导入包插件 Auto Rename Tag 重命名一个HTML / XML标签时，自动重命名配..
Vscode有什么好用的插件？
jakpopc的博客
06-21 4382
我是Jackpop，我们交个朋友吧！VS Code的口碑越来越好，受欢迎度也越来越高，以我为例，有时一个项目中可能会用到C++、Java、JS等不同编程语言，如果针对每一种语言都去安装一款对应的IDE，那样不仅会浪费很多时间，而且会极大的拖慢电脑速度。而VS Code通过简单的配置，就可以让它与对应语言当下最为流行的IDE相提并论，因此，就没必要再去安装PyCharm、IDEA、Clion、Webstorm这些了。VS Code之所以如此受欢迎，离不开它强大的社区，这让VS Code有丰富而实用的插件。而且
VSCode调试C++
mijichui2153的博客
04-03 6428
开源、功能强大(高亮/自动补齐都是最基本的功能)；轻量，相对xcode轻量太多；几乎可以用来编写所有的语言、甚至写文档，只要安装对应插件即可；个性化配置程度高；
centos下的vscode中空格过短
weixin_55907205的博客
11-24 96
在Editor:Font Family控制字体系列。进入设置，搜索Font Family。
ubuntu下vscode字体间距 空格间距太小 增大间距
明道_N 的博客
11-27 4755
问题： Ubuntu下使用vscode很方便呀，但显示效果不好，间距太小了，字体。 间距太小，见图： 更换种字体解决了！！ ！！不需要额外安装别的字体，因为我就喜欢Consolas（自带） 操作 进入setting ，然后找到font-family，里面有默认的四个字体，分别对应四个显示区域。 默认配置是’Droid Sans Mono’, ‘monospace’, monospace, ‘Droid Sans Fallback’ 更改为’Consolas’, ‘Consolas’, Consol
Ubuntu 18.04 vscode 编辑器空格显示过小问题解决方案
Hacker_MAI的博客
06-24 860
本文主要讲述如何通过添加字体并设置 vscode setting 来修正编辑器空格显示过小问题。
Ubuntu下VS code空格间距很小解决办法
gsgbgxp的博客
02-19 2971
在使用VS code编程时突然发现字符非常密，而且空格很窄，从而造成可读性很差。具体什么原因造成的不清楚，后来采取了下文中的办法解决了这一问题 解决Ubuntu下VSCODE空格距离极小的方案 VSCODE没有自定义空格距离的设置，通过更换字体来实现空格距离的调整。 讲一下如何安装并替换字体 下载字体文件https://github.com/tonsky/FiraCode#download-v1206–how-to-install–troubleshooting–news–updates 解压压缩文件并打
解决Ubuntu下VSCODE空格距离极小的方案
kellncy的博客
05-19 1万+
Ubuntu 18.04及以上版本使用VSCODE空格距离很小，解决方案@Kellncy 解决VSCODE空格距离极小的方案 Ubuntu系统升级到18.10以后，使用VSCODE发现空格间距极小，很难分辨出此处还有空格，但是VSCODE没有自定义空格距离的设置，顾通过更换字体来实现空格距离的调整。 默认字体的空格 新字体的空格 讲一下如何安装并替换字体 下载字体文件https://gith...
如何在 VSCode 中修改前端页面
04-28
### 如何在 VSCode 中编辑或修改前端页面代码 #### 使用 VSCode 的基本操作 VSCode 是一款功能强大的轻量级代码编辑器，支持多种编程语言和框架。对于前端开发而言，它提供了丰富的插件来增强用户体验[^1]。 #### 安装必要的扩展 为了更高效地编写前端代码，在安装好 VSCode 后需配置一些常用插件： - **中文语言包**: 提供界面汉化。 - **颜色主题 (Atom One Dark Theme)**: 更舒适的视觉体验。 - **文件夹图标 (VSCode Great Icons)**: 让项目结构更加清晰直观。 - **Live Server 或 Open in Browser**: 实现即时预览效果，方便调试 HTML 和 CSS 页面。 这些可以通过进入 `Extensions` 面板搜索名称完成安装[^1]。 #### 设置工作环境偏好选项 调整合适的设置有助于提高编码效率以及改善阅读感受： ##### 自动保存功能启用 通过路径 `文件 -> 自动保存` 开启此特性，这样每次更改都会立即同步至磁盘而无需手动存档。 ```plaintext // 打开自动保存方法 File -> Auto Save ``` ##### 调整字体尺寸适应个人习惯 如果默认文字太小或者太大都可以自行调节大小以满足需求。具体步骤如下所示： 访问菜单栏中的命令 `文件 -> 首选项 -> 设置`, 查找关键字 "Font Size", 输入期望值即可生效。 ##### 切换单词折行模式 当遇到较长语句超出屏幕宽度时可以选择开启自动换行显示全部内容而不滚动水平条。同样是在全局设定里寻找参数名为 “Word Wrap”，将其状态设为开启(on)[^1]。 ##### 展示空白字符标记 有时难以察觉多余的空格或是制表符错误位置，此时可激活可视化辅助工具帮助识别这些问题区域。前往同样的地方定位到标签叫作'Render Whitespace' 并赋给'all'[ ^1 ]. ##### 统一缩进风格建议采用两个空格作为标准单位长度(tab size=2),保持一致性有利于团队协作同时也减少冲突几率[ ^1]. #### 创建简单的HTML文档实例演示 下面给出一段基础样例用于说明实际应用情况: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 引入外部样式 --> <link rel="stylesheet" href="./style.css"> </head> <body> <h1>Hello World!</h1> <!-- 添加脚本 --> <script src="./main.js"></script> </body> </html> ``` 同时还需要准备对应的CSS与JS文件配合使用才能构成完整的动态网页作品[^1]: ```css /* style.css */ body { background-color: lightblue; } h1{ color:red ; } ``` ```javascript // main.js console.log('This is a test message.'); document.querySelector('h1').addEventListener('click',function(){ alert('You clicked me!'); }); ``` 以上就是利用 Visual Studio Code 来构建简易版网站所需掌握的知识要点总结。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

__Benco

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值