vscode设置Fira_Code字体及改变编辑器字体、背景颜色的代码详解

 更新时间:2020年11月3日 15:19  点击:1773

一、设置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字体内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

[!--infotagslink--]

相关文章

  • vscode安装git及项目开发过程

    这篇文章主要介绍了vscode安装git及项目开发过程,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-19
  • VSCode 配置uni-app的方法

    这篇文章主要介绍了VSCode 配置uni-app的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
  • Vscode上使用SQL的方法

    这篇文章主要介绍了Vscode上使用SQL的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-26
  • vscode搭建STM32开发环境的详细过程

    这篇文章主要介绍了vscode搭建STM32开发环境的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-02
  • VSCode C++多文件编译的简单使用方法

    这篇文章主要介绍了VSCode C++多文件编译的简单使用方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-29
  • VSCode配置C#运行环境的完整步骤

    这篇文章主要给大家介绍了关于VSCode配置C#运行环境的完整步骤,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
  • 浅谈Vue开发人员的7个最好的VSCode扩展

    这篇文章主要介绍了浅谈Vue开发人员的7个最好的VSCode扩展,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
  • vscode和cmake编译多个C++文件的实现方法

    这篇文章主要介绍了vscode和cmake编译多个C++文件的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
  • Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境(教程详解)

    这篇文章主要介绍了Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-12
  • 如何使用VSCode配置Rust开发环境(Rust新手教程)

    这篇文章主要介绍了如何使用VSCode配置Rust开发环境(Rust新手教程),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-27
  • js简单实现调整网页字体大小的方法

    这篇文章主要介绍了js简单实现调整网页字体大小的方法,通过javascript动态修改页面元素样式实现调整网页字体的功能,非常简单实用,需要的朋友可以参考下...2016-07-29
  • vscode通过Remote SSH远程连接及离线配置的方法

    这篇文章主要介绍了vscode通过Remote SSH远程连接及离线配置的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-16
  • VSCode搭建C/C++编译环境的详细教程

    Visual Studio Code是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,这篇文章主要介绍了VSCode搭建C/C++编译环境,需要的朋友可以参考下...2020-05-15
  • VSCode 云同步扩展设置Settings Sync插件

    这篇文章主要介绍了VSCode 云同步扩展设置Settings Sync插件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-29
  • 关于VSCode格式化JS自动添加或去掉分号的问题

    这篇文章主要介绍了VSCode格式化JS自动添加或去掉分号的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-10-12
  • VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)

    这篇文章主要介绍了VSCode 添加自定义注释的方法(附带红色警戒经典注释风格),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-28
  • 解决 VSCode 编写 C++11 代码报红问题分析

    今天在写 C++ 代码的时候用上 C++11 的特性,然后发现 VSCode 虽然可以编译通过,但是会在相应位置报红,这是怎么回事呢?下面小编给大家带来了解决方法,一起看看吧...2021-09-27
  • VSCode自定义配色方案的实现

    这篇文章主要介绍了VSCode自定义配色方案的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-29
  • 超漂亮的Bootstrap 富文本编辑器summernote

    Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建。对bootstrap 文本编辑器相关知识感兴趣的朋友一起学习吧...2016-04-06
  • goland设置颜色和字体的操作

    这篇文章主要介绍了goland设置颜色和字体的操作方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-04