干货 | 教你打造一款颜值逆天的VS Code

待我称王封你为后i 2022-07-10 04:30 279阅读 0赞

转载自：http://www.jianshu.com/p/80e983201f86

![1240][]

先睹为快

昨天有幸参加了无戒老师主持的写作分享课，来自简书的四位大神[一鸣][Link 1]，[别山举水][Link 2]，[一元亦有用][Link 3]，[尹沽城][Link 4]无私的分享了自己的写作经验。他们对文字的虔诚，让我深受感染。因此我在考虑用什么词来形容我想跟大家分享的代码编辑器VS Code时，就偏偏认为颜值逆天恰到好处。“颜值逆天”并非是我装逼的认为我配置VS Code的美绝天下，只是因为

好多程序员的编辑器/IDE都好丑。

我想跟我有共同认知的人不在少数，一些程序员对美的满足真是低到尘埃里。有的人两年前下载了一个Sublime text，觉得挺好用，装了一些满足功能的插件，一点不装扮的就能到两年后。毕竟比windows的记事本好看100倍嘛。可是，作为新时代闪闪发光的各位软件开发工程师们，在技术变得牛逼了之后，是不是应该提高一下对编辑器的颜值的追求了呢？

如果，你正在使用Sublime， Atom，VS code写代码，如果，你也想要让自己的编辑器改头换面，变得美观大方高大上，不妨先给我点个赞，然后耐心读下去。另外，你还需要一点点实际行动。

我的目的，并非要让你配制出跟我一模一样的编辑器，而是打磨出你心仪的编辑器。

一、挑选一款心仪的字体

一定要挑选等宽字体。  
一定要挑选等宽字体。  
一定要挑选等宽字体。

没有一款字体能够让所有人都喜欢。但是，总有一款字体能够让你满意。在等宽字体中，我推荐五款我觉得十分养眼的给大家，希望你们也喜欢。

1、Source Code Pro

这款来自Adobe的开源字体，是我的最爱。

![1240 1][]

Source Code Pro

2、Menlo

![1240 2][]

Menlo

3、Consolas

![1240 3][]

Consolas

4、Monaco

![1240 4][]

Monaco

5、Courier New

![1240 5][]

Courier New

二、 设置合适的字体大小和行高

从来没有设置过自己编辑器行高的同学，请给我点个赞。\[捂脸\]

对于字体的选择，还是有许多人比较在意的。可是，对于行高和字体大小，还真的没有多少人会理会它们。意识到字体大小和行高对代码整体美观的影响极大的人并不多。合适的设置，往往能提高极大的提高代码的整体逼格。

下面分别是默认行高与调整过后的行高。你们对比一下吧。

> 不会配置行高的反面教材，参考segmentfault的文章代码块。如果能把行高稍微再调大一点，瞬间逼格就不一样了。

![1240 6][]

默认行高

![1240 7][]

调整过后的行高

行高调整过后，更加舒适大气。行高的选择，需要根据字体大小来调整，并没有固定的值。这里给大家看一下我自己的配置。仅供参考。

首选项 -> 用户设置 或者直接使用快捷方式 `cmd + ,`就会自动弹出配置文件settings.json。

![1240 8][]

我的配置

如果我的配置你不够满意，那么你需要一点点用心，调出你自己喜欢的样式。

三、挑选一个满意的代码高亮主题

首选项 -> 颜色主题 ，会自动弹出如图所示的颜色主题列表弹窗。VS Code为用户默认了很多主题，大家可以一一尝试。

![1240 9][]

Paste\_Image.png

除了默认主题之外，我推荐三款我认为逼格满满的高亮主题，希望大家喜欢。

1、Seti

Seti-UI主题是一款极具传奇色彩的主题。最开始出现在Sublime text中，一出来就征服了大多数程序员。随后Atom与VS Code都有了相应的插件。和其他大多数配色怪异的主题相比，逼格高了何止一个档次？

![1240 10][]

Seti

2、Light +

唯一喜欢的一款默认主题。也是唯一喜欢的一款白色背景主题。如果你的黑色背景的主题感到了厌烦，不妨试试这款另一种风情的配色。

![1240 11][]

Light +

3、one Dark

因为Atom的推出而备受好评的一款配色主题，其口碑不比Seti-UI差。这款主题让许许多多颜控程序员宁愿忍受Atom的卡顿，也要使用Atom，可见大家对它的认可程度之高。

> 早期Atom就靠颜值吸了一大波分，都是它的功能，现在Atom的性能也得到了极大的提高，仍然是一款值得使用的优秀编辑器。

![1240 12][]

one Dark

如果你对默认主题，以及我推荐的主题，都表示不满意的话，你还可以在如下图所示的地方查找，或者在扩展程序搜索中输入关键字`category:themes`就能搜索到一大堆主题，相信总会有你满意的。

![1240 13][]

主题搜索

三、挑选一个可爱的文件图标主题

首选项 -> 文件图标主题，会自动弹出如图所示的文件图标主题列表弹窗。这里同样也有几款默认图标主题，没准就有你喜欢的。

![1240 14][]

选择文件图标主题

这里给大家推荐两款逼格满满的主题。

1、Seti

依然偏爱Seti，灵动的小图标真的太可爱了！

![1240 15][]

Seti-UI

2、VSCode Icons

![1240 16][]

VSCode Icons

同样的，你也可以在应用商店中查找更多的图标主题。点击下图中的按钮或者在扩展程序搜索框中输入`tag:icon-theme`即可搜索。

![1240 17][]

搜索图标主题

这里不得不赞一下vs code的扩展程序管理，做得是真的好。如果被VS code的高颜值吸引，想要尝试一下它，那么恭喜你，VS code 的其他特性将会更加让你无法自拔。

四、高度可定制的VS code

vim因为其高度可定制的特性，曾一度傲视群雄，天下无人能出其右。由于其上手难度奇高，所以vim的使用者也是逼格满满，如早起的太阳一般各种傲娇。在任何场合都可以对其他编辑器的吹嘘者不屑一顾。但是随着随后陆续出现的 Sublime，Atom，VS code，对vim造成了巨大的打击。上手难度高成为了vim的致命缺陷。

VS code将高度可定制做得最完美。

1、找到你熟悉的快捷方式

首选项 -> 键盘映射扩展 或者在扩展搜索框中输入`@recommended:keymaps`搜索，就会出现如下图所示的列表。

![1240 18][]

键盘映射扩展

下载对应编辑器的插件，你就能把你以前熟悉的快捷键平滑的移植到vs code上来。有没有感觉很厉害。

从图中下载数量可以看出，大量的vim与Sublime使用者，投入了vs code的怀抱。vs code给这两款编辑器直接造成了成吨的伤害。

2、不喜欢的都改成自己喜欢的样子

总有一些小缺点，是无论它再优秀，也是我不愿意忍受的。所以我受不了vim的高门槛，忍不了Sublime插件搜索安装的不便利，所以我没用使用他们，尽管他们都足够优秀。

但是vs code 的高度可定制真的做得很为用户考虑。你喜欢的样子它都有，不喜欢的样子都是可以被修改。

`cmd + ,`弹出设置界面，我们可以发现，这里面有大量可配置的属性。

![1240 19][]

设置界面

每一条配置，都有中文的详细说明，简直贴心到爆炸。

![1240 20][]

配置界面

![1240 21][]

配置界面

只需要你花一点点时间，你就能找到那些是你想要，那些不是你想要的，然后配置成你想要的样子。

时间关系，这次VS code暂时就介绍到这里，下一篇文章将会继续介绍VS code那些牛逼到无敌的特性，绝对能给你更多的惊喜，敬请期待吧。

> 上次我写了一篇介绍[Atom][]的文章，一堆人评论说为什么不试试VS code，其实你们不知道，我早就在用VS code了，只不过Atom总有一个贴心的东西让我无法割舍呀，现在我吹一波VS code，你们总满意了吧！\[45度笑哭\]

好了，下面是广告时间。前端学习群，前200人免费入群。现在还不满，从速哦！入群加 **笑笑微信：iamaixiaoxiao**。

![Center][]

[1240]: /images/20220709/150f8b1974c74f948d98598fa2e00544.png
[Link 1]: http://www.jianshu.com/users/dc22650a4033/latest_articles
[Link 2]: http://www.jianshu.com/users/b375ea9dda78/latest_articles
[Link 3]: http://www.jianshu.com/users/7debdf0bd537/latest_articles
[Link 4]: http://www.jianshu.com/users/f1b13122a132/latest_articles
[1240 1]: /images/20220709/eea500c14a5740048b774012f475af99.png
[1240 2]: /images/20220709/7e9a790bc1ff4464bf347e744c261f89.png
[1240 3]: /images/20220709/11e7ea8b095d4b2991acc794a76852d2.png
[1240 4]: /images/20220709/1d1f24cd483a44eebb219ae25483d463.png
[1240 5]: /images/20220709/4129816574a24ec6ba164684c51b6d5f.png
[1240 6]: /images/20220709/f092697a203e4ea9b830edc79b07dd23.png
[1240 7]: /images/20220709/a0315f925e7f4a418352926d8d563902.png
[1240 8]: /images/20220709/87a0798595e14e429b73dd33c0fadfd4.png
[1240 9]: /images/20220709/a25282ccf1bf4b239b5ade61b25c3c66.png
[1240 10]: /images/20220709/727bd39d350640f0a2adde52c14fead8.png
[1240 11]: /images/20220709/b308dddc276e4abc92351d6e5c111bc0.png
[1240 12]: /images/20220709/c4d35b1cd4254eff8031c3a0069f7366.png
[1240 13]: /images/20220709/3ab3fa4c33b246169ef1ad1b3fe48808.png
[1240 14]: /images/20220709/583438428cc14015b2952ec50f2dd1f1.png
[1240 15]: /images/20220709/578a71fcbc6f4f44811d127d0f81c308.png
[1240 16]: /images/20220709/ece09ecf90024c049f71bfe417619756.png
[1240 17]: /images/20220709/a11ff316c86949a7963358b2eff23cc1.png
[1240 18]: /images/20220709/5594706e28dd44c3bfe1364f7e5b315c.png
[1240 19]: /images/20220709/2f8357a91f3744248b844497e4011081.png
[1240 20]: /images/20220709/4ffe94e70bdf4d089ec500508be1042c.png
[1240 21]: /images/20220709/c33bc73f0d7947beb877d5ac191ebb3c.png
[Atom]: http://www.jianshu.com/p/b4c8479cfaa5
[Center]: /images/20220709/5493d4d40369460caa69188c465c2ed5.png