1. 程式人生 > 程式設計 >vscode設定Fira_Code字型及改變編輯器字型、背景顏色的程式碼詳解

vscode設定Fira_Code字型及改變編輯器字型、背景顏色的程式碼詳解

一、設定Fira_Code字型

1.下載字型
這裡給出github下載連結,點選連結後在README.md中的Download & Install一欄中即可下載,連結中也包括字型示例及介紹,可自行檢視。
Fira_Code字型下載

2,安裝字型
下載並解壓,進入裡面的ttf資料夾,雙擊或右擊後點擊安裝,裡面包含六種樣式,可以選擇性安裝或全安裝即可。

3,設定vscode
開啟vscode,點選左下角齒輪形狀圖示,選擇settings,得到下圖所示介面:

設定

根據上圖箭頭所示依次點選Font,Edit in settings.json,新增如下程式碼:

"editor.fontFamily": "'Fira Code',Menlo,Monaco,'Courier New',monospace","editor.fontLigatures": true,
  • 注:如果新增到{}裡的最後面,則需去掉true後面的逗號
  • 如果不想使用連字,則將true改為false (什麼是連字可自行百度,這裡舉個例子,c語言中!=使用連字後則會顯示≠)

二、設定字型顏色

可以通過更換主題來改變字型顏色,這裡推薦幾款比較經典的主題,供大家選擇。

  • One Dark Pro Italic
  • Material Theme
  • One Dark Pro
  • Darker One

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

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

之前習慣用黑色背景,可是改變主題後背景往往會發生改變,可以通過設定自定義背景顏色。
按照上面的步驟開啟settings.json,新增以下設定:

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

  "editor.selectionBackground": "#6b5244",//使用者選中程式碼段的顏色 
  
  "editor.findMatchBackground": "#ff0000",//當前搜尋匹配的顏色
  
  "editor.findMatchHighlightBackground": "#ff00ff",//其他搜尋匹配項的顏色
 
  "editor.findRangeHighlightBackground": "#ff9900",//限制搜尋範圍的顏色
 
  "editor.lineHighlightBackground": "#48314e",//游標所在行高亮內容的背景顏色
  
  "editor.lineHighlightBorder": "#704b36"      //游標所在行四周邊框的背景顏色
 },

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

示例

總結

到此這篇關於vscode設定Fira_Code字型及改變編輯器字型、背景顏色的程式碼詳解的文章就介紹到這了,更多相關vscode設定Fira_Code字型內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!