Visual Studio Code(简称VSCode)可以说是当下程序员无论在哪个操作系统都会安装的一个 IDE (严格来说 VSCode 其实并不是一个正统的IDE),即便你的电脑不进行编程工作,也是非常推荐安装一个 VS Code 的,当然原版的 VSCode 其实蛮简陋的,不过 VSCode 最大的优势就是其丰富的插件市场和自定义配置,我们完全可以通过自行DIY创造一个 “完美的IDE or 文本编辑器”

当然,还是要严谨的再次补充一下,VSCode 其本身并不是一个专业IDE,特别是面对大型工程项目时比如:JavaWeb开发、C++桌面程序开发、游戏相关的开发是更推荐使用专业的IDE进行开发的,如:IDEA 和 VisualStudio(同为微软开发)。

字体优化

本人作为一个程序员,字体方面当然是要选择一款好看的连字字体啦~ 这里本人非常推荐 FiraCode font,直接在 vscode - 扩展 - 搜索FiraCode font 即可,应该会出现好几个结果,这里我下载的是 FiraCode font - Professional Font for Developers

下载完成后,可能会出现无法不能直接使用的情况(至少我这边是这样的),它会弹出一个文件夹,里面放了 fira code 的字体文件(分为多个字号),按需安装字体即可;

安装完毕后就可以 设置 - 文本编辑器 - 字体 - Font Family 中填写 fira code(它默认会选择你安装的最小字号的), 如果不满意可以自行添加后缀, 比如我这里添加的就是 Fira Code Medium(Light最小 Regular标准 Medium稍大 SemiBold稍粗 Bold加粗);

虽然在代码和英文方面的表现 fira code 表现的更好,但是如果是中文字体的它的表现并不是很好,可以额外添加一个好的中文字体,比如我这里就额外加了一个 Fira Code Medium, '方正兰亭圆简体',当然如果你没有好用的中文字体,可以用系统自带的,如系统自带的 微软雅黑PingFang SC 通常这些系统默认的字体表现都非常不错。

// 终端的字体同样可以通过 setting.json 设置 
"terminal.integrated.fontLigatures.enabled": true, // 开启连字
"terminal.integrated.fontFamily": "Fira Code, \"方正兰亭圆简体\""

美化主题

主题这种东西说实话,太偏个人了,一万种人眼里有一万种审美,所以这里只说说个人设置主题的思路和见解。

首先就是深色主题和亮色主题之争,个人的见解就是这完全取决于你的工作场景,比如我自己在家喜欢开灯在有灯光的场景下写代码,这时候亮色主题对我来说是更好的选择;而在公司时,因为办公室多数时候是不开灯,完全依赖自然光时,这时候使用深色主题就更好。

说这么多,其实就是想说我一般会准备深色和浅色两版主题,VSCode 上的主题实在太多了,这里我选择的是 Atom One 家的主题,他们家提供有深色和浅色两种主题方案。

但是他们家的主题也有一个不大不小的毛病,那就是注释是斜体的(这是个人不喜欢而已),所以需要设置为正常,首先可以通过修改 setting.json 配置:

    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "name": "Comment",
                "scope": [
                    "comment",
                    "comment.block",
                    "comment.block.documentation",
                    "comment.line",
                    "comment.line.double-slash",
                    "punctuation.definition.comment",
                ],
                "settings": {
                    "fontStyle": "",
                    // 斜体 "fontStyle": "italic",
                    // 斜体下划线 "fontStyle": "italic underline",
                    // 斜体粗体下划线 "fontStyle": "italic bold underline",
                }
            },
        ]
    },

这种方式可以让 Vscode 里大部分注释都变为正常非倾斜的了。

最后还是要补充一下,主题这东西就是很个人很主观的,如果你对这方面要求很高那么一定要多多尝试在插件商店里寻找。在插件市场里搜索:theme 就会有很多推荐了。

关于 ICON 主题 在 VSCode 里文件/文件夹 ICON 也是可以进行美化的,这里本人推荐 Material Icon Theme 或者 vscode-icons

前端开发

如果你是一位前端开发者,那么有这么几个插件几乎是必装的,首先是 Live Server 这个插件可以方便的预览前端页面,还有一个个人非常推荐的 px to rem 作为一个前端开发者有时候会遇到 rem 单位的页面这个时候这个插件就非常必要了,不过需要注意的是这个插件默认的 rem 阈值是 16px,这个很可能不适合你的项目,所以请务必在使用前和你的项目 rem 阈值确认好。

还有一个可能比较小众的问题,那就是当你的页面使用的是 GBK 或者 GB2313 进行开发的时候 Live Server 是无法正确转换的(Live Server 使用的 UTF8,非 UTF8 会出现很多乱码),这个使用就更推荐使用 Preview Server 这个插件的功能和 Live Server 是完全相同的,但他支持编码自定义修改,同时也预设好了一个 GBK 编码格式的服务。

插件推荐

background

这个插件能允许你自行为 VS Code 添加一个背景图片,可以加一些效果如:模糊、透明度等,这个插件属于那种简单好用的类型,个人感觉配合 VScode 的原版主题会很不错,部分第三方主题颜色和设计有点过于艳丽了搭配这个简单插件反而不太好看。

VSCode Pets

它会在左侧扩展栏内创建一个新的独立窗口,可以显示一些像素小动物,据说可以增加工作效率(?),挺有意思的就放进来了,默然动物是一只小猫,也可以加一下其他动物,比如狗子、小马、小鸡、熊猫甚至还有龙猫和小黄鸭。

Power Mode

这是一个非常酷炫的插件,能让你打代码像当游戏一样显示连击效果,同时还会再文字间产生字体抖动的效果,并且还附带特效(特效有很多种,但个人觉得默认的就挺好看的),相当炸裂。不过个人建议关闭抖动和连击提示,因为确实有点卡。Combo: Location 设置 off 关闭连击提示,Shake: Enabled 勾选关闭取消抖动效果。

Markdown Preview Enhanced

一个 Markdown 文件预览器,虽然个人觉得他的显示效果不咋地,但是胜在简单又好用,可以内置在VS Code中直接预览。

近期文章
title: 迭代器 & 生成器
time: 2024-02-20
tag: #OOP#JavaScript
title: 浏览器渲染页面流程
time: 2023-11-06
tag: #前端#浏览器