轉載自：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。