vscode設置Fira_Code字體及改變編輯器字體、背景顏色的代碼詳解

更新時間：2020年08月10日 10:08:28 作者：CodeJasmine

這篇文章主要介紹了vscode設置Fira_Code字體及改變編輯器字體、背景顏色，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

一、設置Fira_Code字體

1.下載字體
這里給出github下載鏈接，點擊鏈接后在README.md中的Download & Install一欄中即可下載，鏈接中也包括字體示例及介紹，可自行查看。
Fira_Code字體下載

2，安裝字體
下載并解壓，進入里面的ttf文件夾，雙擊或右擊后點擊安裝，里面包含六種樣式，可以選擇性安裝或全安裝即可。

3，設置vscode
打開vscode，點擊左下角齒輪形狀圖標，選擇settings，得到下圖所示界面：

根據(jù)上圖箭頭所示依次點擊Font，Edit in settings.json，添加如下代碼：

"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,

注：如果添加到{}里的最后面，則需去掉true后面的逗號
如果不想使用連字，則將true改為false (什么是連字可自行百度，這里舉個例子，c語言中!=使用連字后則會顯示≠)

二、設置字體顏色

可以通過更換主題來改變字體顏色，這里推薦幾款比較經(jīng)典的主題，供大家選擇。

One Dark Pro Italic
Material Theme
One Dark Pro
Darker One

直接在vscode左側Extensions中搜索安裝即可使用，如果想要嘗試其他主題，可輸入 One 進行搜索，眾多主題總有一款適合你。

三、設置編輯器背景顏色及光標所在行的顏色

之前習慣用黑色背景，可是改變主題后背景往往會發(fā)生改變，可以通過設置自定義背景顏色。
按照上面的步驟打開settings.json，添加以下設置：

"workbench.colorCustomizations": {        //覆蓋當前所選顏色主題的顏色
  
  "editor.background": "#030202",        //編輯器背景色

  "editor.selectionBackground": "#6b5244",     //用戶選中代碼段的顏色 
  
  "editor.findMatchBackground": "#ff0000",     //當前搜索匹配的顏色
  
  "editor.findMatchHighlightBackground": "#ff00ff",   //其他搜索匹配項的顏色
 
  "editor.findRangeHighlightBackground": "#ff9900",   //限制搜索范圍的顏色
 
  "editor.lineHighlightBackground": "#48314e",    //光標所在行高亮內(nèi)容的背景顏色
  
  "editor.lineHighlightBorder": "#704b36"      //光標所在行四周邊框的背景顏色
 },

下面放出效果圖，讀者可自定義自己喜歡的顏色。