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

先睹为快

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

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

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

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

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

一、挑选一款心仪的字体

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

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

1、Source Code Pro

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

Source Code Pro

2、Menlo

Menlo

3、Consolas

Consolas

4、Monaco

Monaco

5、Courier New

Courier New

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

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

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

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

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

默认行高

调整过后的行高

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

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

我的配置

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

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

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

Paste_Image.png

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

1、Seti

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

Seti

2、Light +

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

Light +

3、one Dark

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

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

one Dark

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

主题搜索

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

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

选择文件图标主题

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

1、Seti

依然偏爱Seti,灵动的小图标真的太可爱了!

Seti-UI

2、VSCode Icons

VSCode Icons

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

搜索图标主题

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

四、高度可定制的VS code

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

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

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

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

键盘映射扩展

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

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

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

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

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

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

设置界面

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

配置界面

配置界面

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

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

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

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

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

  1. 短视频怎么拍?4个技巧教你打造爆款视频

    1.情感共鸣 爆款视频核心一点就是能不能与观众共情.用户的情感实际上是一种盲从的情感.他们常常思想不深,很容易带起来.在抖音上,有很多指导情感的专家,用敏锐的语言指出用户的痛点,从而赢得了众多忠实拥护 ...

  2. 8000字干货 | 教你打造电商产品的用户体系

    本文由作者 书丰 发布于社区 对于任何电商产品来说,没有用户的产品是没有未来的,拥有用户但却不懂用户的产品也是没有未来的.产品经理需要从心理上去理解用户.预判用户的行为,在现实中挖掘用户的需求,从行动 ...

  3. 手把手教你打造一款个人专属Android桌面

    实现方式两种 1.从头到尾写一个apk然后把系统的属性加上去,然后启动的时候默认就指定到这个apk的包名,他就启动, 2.我们基于Androidlauncher3的源码去做一个定制化的修改 分析一下这 ...

  4. Python从编程零基础打造一款微信聊天自动回复机器人

    本教程的作用 零基础手把手教你打造一款微信自动回复机器人,零基础! 操作流程: 第一步:安装python环境,下载链接,下载好,一路next,默认安装. 第二步:打开命令行,(快捷键win(那个键上有 ...

  5. 星淘惠跨境:100%纯干货分享,五个要点教你打造亚马逊爆款

    星淘惠跨境:100%纯干货分享,五个要点教你打造亚马逊爆款 跨境电商,是这两年被提起最多的词,提起跨境电商就不得不提起亚马逊,亚马逊作为当下主流电商平台,全球用户超2亿,Prime会员超1.12亿,很 ...

  6. AI实验室•西安站 教你用人脸识别打造爆款应用

    被各种换脸技术刷屏?想要知道如何打造霸占朋友圈的产品?对技术实现过程感兴趣?6月10日,由Face++主办,AI科技大本营.活动行.西安创业大街.3Wcoffee协办的<AI实验室•西安站 教你 ...

  7. 手把手教你用Python打造一款属于你自己的个性二维码

    击上方"Python爬虫与数据挖掘",进行关注 回复"书籍"即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 今夜闻君琵琶语,如听仙乐耳暂明. / ...

  8. 弘辽科技:如何将新品打造成爆款?选对方法,教你轻松打造爆款

    原标题<弘辽科技:如何将新品打造成爆款?选对方法,教你轻松打造爆款> 还有一个星期的时间,我们就要迎来2021年的元旦了,在经历了2020年,是否还有很多商家在为付费流量贵,拿不到免费流量 ...

  9. 新手shopee开店打造引流款其实很简单,三个步骤教你如何打造爆款

    引流款是每一个shopee卖家的店铺必不可少的,大多数新手开店之后不知道该怎么去运营,shopee应该如何打造自己店铺的引流款呢?今天我就来教大家如何在shopee打造爆款. 一.选品 我们都知道有些 ...

  10. 如何从stackoverflow的api 中获取是数据_教你拼多多如何选款、测款,打造出爆款。...

    一. 如何进行选款 拼多多选品是在拼多多商城开设店铺上架商品前的一个非常重要的环节,选品对与否对店铺业绩起着关键性作用,如果你选的商品好那么买的人自然也就多,商品不好自然自然就没人愿意买了.那么要如何 ...

最新文章

  1. java scriptrunner_ScriptRunner.java
  2. 兴义智力象机器人_兴义向阳路小学在第十八届全国青少年机器人竞赛贵州区选拔赛夺冠...
  3. segment fault
  4. h3c 链路聚合测试_良无磐石固,虚名复何益?- 链路聚合协议互通测试
  5. STM32F103:二.(2)串口控制LED
  6. AndroidStudio_A connection was leaked. Did you forget to close a response body?---Android原生开发工作笔记241
  7. WPF-21:WPF实现仿安卓的图案密码键盘(改进)
  8. 微信小程序教程、微信小程序开发资源下载汇总(6.16日更新,持续更新中……)...
  9. linux运行speex,linux 用speex库压缩音频
  10. mysql 唯一记录_在数据库中能够唯一地标识一个记录被称为 MySQL数据库使用教程...
  11. 多维时序 | MATLAB实现CNN-LSTM多变量时序预测
  12. windows计算机锁屏的快捷键是什么,win7的锁屏快捷键是什么 win7锁屏快捷键介绍【图文】...
  13. 在Python中文件用Feather格式,与 CSV说再见,速度提升 150 倍!
  14. 高价拍下巴菲特午餐的90后孙宇晨是谁?
  15. python里面的爬虫爬取网页
  16. 主成分分析 (一): 基本思想与主成分估计方法
  17. 有个疑问--RTOS系统中,低优先级任务什么时候得到cpu去运行
  18. 2014年AVAYA IP Office 合作伙伴大会在北京举行,协作成长,乐在德云
  19. 大数据运维HBase
  20. 【新书推荐】【2019.09】溢油合成孔径雷达成像机理

热门文章

  1. 迅雷调用Potplayer边下边播
  2. php获取图片rgb值,判断图片是否纯黑纯白
  3. linux误删文件恢复的方法 ----debugfs
  4. 华为鸿蒙 OS 尝鲜,跑了个 “hello world”!跑通后,我特么开始怀疑人生...
  5. 半导体的光学性质和光电与发光现象
  6. Andriod 获取手机CPU型号设备信息
  7. 设置iPhone来电铃声(图文教程)
  8. 手机测试wifi的延迟的软件,六款最佳、免费的网络延迟测试工具
  9. 百度为手游盛世添把火
  10. android检测蜂窝网络,Android 判断网络状态及开启网路