Daily Dev Tips №96— Visual Studio Code — how to enable this new sexy Fira Code font?

Sep 6, 2018 · 3 min read

Fira Code is getting quite popular nowadays as a new dev font. It is a Monospaced font with programming ligatures. From its official github project,

Fira Code is an extension of the Fira Mono font containing a set of ligatures for common programming multi-character combinations. This is just a font rendering feature: underlying code remains ASCII-compatible. This helps to read and understand code faster.

Alright, let’s see how we can enable it in our favourite IDE VS Code.

1. Install the Fira Code

The installation is very straightforward, I am going to show you the easiest way to install it in Mac here, for windows etc, please check the official wiki page.

2. Enable Fira Code in VS Code

After the installation, you can open the settings.json file in VS Code.

1.) Press cmd+, (mac) or ctrl+, (windows) or Code -> Preferences -> Settings

2.) Upd a te the Font Family to Fira Code , enable the Font Ligatures , choose a font size that suits you, for me, it is 14px.

If you prefer directly update the settings.json file, you can add the following lines

3.) now open some javascript file and check the look and feel.

Can’t get FiraCode to show despite the font installed and ligatures activated in VS Code in Windows

In my settings I have:

«editor.fontLigatures»: true,
«editor.fontFamily»: «Fira Code, Comic Sans MS, Tahoma, Consolas»,

and I’ve tried (according to this) different combinations of apostrophes, spaces and capitalization. No matter what I do, I get Comic Sans to pop (or some plain, weird junk if I only specify Fira Code with no secondary font.

I verified that I’ve installed all the fonts from their GitHub and I can see the fonts in the list in my text processor (of course they do look as supposed to when typed with said font too). I also tried sweeten up the process using choco install FiraCode, reported as successful.

The ligatures are turned set to true, as shown above. The latest version of VSC is installed and the system is rebooted to the borders of ridiculity. I have almost no extensions and those few I had, I deactivated.

What else can I do to troubleshoot the issue?

2 Answers 2

In my case I downloaded Fira Code v2 without first uninstalling v1. And I don’t think it will ever work with both versions installed. So in Windows, go to your Settings/Font Settings and search for Fira Code — there will be an uninstall button there.

After installing v2, (install instructions https://github.com/tonsky/FiraCode/wiki/Installing) the variants you installed like Light , Regular , Medium , Bold and Retina` for example will be listed along with the version number.

Then I would definitely reboot your computer before trying to get Fira Code and font ligatures working in vscode. Also see vscode: update to stylistic sets using font ligatures with Fira Code for some gothchas with ligatures.

Then after changing the font face in vscode I would reload vscode too. These settings work for me:

if you want the other stylistic sets that Fira Code offers. The calt on the end was necessary to make most of the rest work for some reason. See the SO question link just above for more on that.

Невозможно отобразить FiraCode, несмотря на установленный шрифт и активированные лигатуры в VS Code в Windows

В моих настройках есть:

«editor.fontLigatures»: правда,
«editor.fontFamily»: «Fira Code, Comic Sans MS, Tahoma, Consolas»,

И я пробовал (в соответствии с этой) различные комбинации апострофов , пробелы и заглавные буквы. Независимо от того, что я делаю, я получаю Comic Sans, чтобы выскочить (или некоторый простой, странный мусор, если я только указываю Fira Code без вторичного шрифта.

Я подтвердил, что установил все шрифты из их GitHub и Я вижу шрифты в списке в моем текстовом процессоре (конечно, они выглядят так же, как и при наборе с указанным шрифтом). Я также попытался подсластить процесс с помощью choco install FiraCode , который был объявлен успешным.

Для лигатур установлено значение true, как показано выше. Последняя версия VSC установлена, и система перезагружена до границ смехотворности. У меня почти нет расширений, и те немногие, которые у меня были, я деактивировал.

Что еще я могу сделать, чтобы устранить проблему?

2 ответа

В моем случае я скачал Fira Code v2 без предварительной деинсталляции v1. И я не думаю, что это когда-либо будет работать с обеими версиями. Поэтому в Windows зайдите в «Настройки» / «Настройки шрифта» и найдите Fira Code — там будет кнопка удаления.

После установки v2 (установите инструкции https://github.com/tonsky/FiraCode/wiki/Install/) варианты, которые вы установили, например Light , Regular , средняя , полужирная and Retina`, например, будут перечислены вместе с номером версии.

Тогда я бы определенно перезагрузил ваш компьютер, прежде чем пытаться заставить Fira Code и лигатуры шрифтов работать в vscode. Также см. vscode: обновление до стилистических наборов с использованием лигатур шрифтов с Fira Code для некоторых готов с лигатурами.

Затем после изменения шрифта в vscode я бы тоже перезагрузил vscode. Эти настройки работают для меня:

Если вы хотите другие стилистические наборы, которые предлагает Fira Code. calt на конце был необходим, чтобы заставить большую часть остальных работать по некоторым причинам. См. Ссылку на вопрос SO чуть выше, чтобы узнать больше.

Привет, используйте эти настройки, просто выберите шрифт Fira Code Only

Vs code fira code windows

Fira Code: free monospaced font with programming ligatures

Programmers use a lot of symbols, often encoded with several characters. For the human brain, sequences like -> , or := are single logical tokens, even if they take two or three characters on the screen. Your eye spends a non-zero amount of energy to scan, parse and join multiple characters into a single logical one. Ideally, all programming languages should be designed with full-fledged Unicode symbols for operators, but that’s not the case yet.

Fira Code is a free monospaced font containing ligatures for common programming multi-character combinations. This is just a font rendering feature: underlying code remains ASCII-compatible. This helps to read and understand code faster. For some frequent sequences like .. or // , ligatures allow us to correct spacing.

Fira Code is a personal, free-time project with no funding and a huge feature request backlog. If you love it, consider supporting its development via GitHub Sponsors or Patreon. Any help counts!

What’s in the box?

Left: ligatures as rendered in Fira Code. Right: same character sequences without ligatures.

Fira Code comes with a huge variety of arrows. Even better: you can make them as long as you like and combine start/middle/end fragments however you want!

Fira Code is not only about ligatures. Some fine-tuning is done for punctuation and frequent letter pairs.

Fira Code comes with a few different character variants, so that everyone can choose what’s best for them. How to enable

Being a programming font, Fira Code has fantastic support for ASCII/box drawing, powerline and other forms of console UIs.

Unicode coverage makes Fira Code a great choice for mathematical writing.

20 лучших тем Visual Studio Code, которые вы должны использовать

3 min

Visual Studio Code от Microsoft, возможно, является одним из лучших редакторов кода. Благодаря обширной коллекции расширений, поддерживаемых сообществом, вы можете использовать VS Code для удовлетворения почти всех ваших потребностей в программировании.

Приложение доступно в Windows, macOS и Linux, что делает его идеальной программой для написания кода независимо от операционной системы. Одним из ключевых аспектов VS Code является его настраиваемость и надежные возможности создания тем.

Мы связали все темы, представленные в этой статье. Все, что вам нужно сделать, это кликнуть ссылки, чтобы посетить Visual Studio Marketplace, и нажать кнопку «Установить».

После установки вы можете переключаться между темами с помощью сочетания клавиш Ctrl + K Ctrl + T или перейти в Файл -> Настройки -> Цветовая тема.

Вы также можете искать эти темы в разделе «Расширения» VS Code.

1. Ariake Dark

Ariake Dark – это тема VS Code, вдохновленная традиционными цветами Японии. Излишне говорить, что его внешний вид приятен визуально.

Цветовая схема в этой теме выглядит хорошо без ущерба для читабельности и подсветки синтаксиса. Создатель темы рекомендует использовать шрифт Fira Code (вы можете изменить шрифт в меню Файл -> Настройки -> Настройки -> Текстовый редактор -> Шрифт -> Семейство шрифтов) для достижения наилучших результатов.

Скачать Темная тема Ariake

2. Pink pine

Pink pine придает VS Code уютную атмосферу и элегантный вид. Тема поставляется с соответствующей темой значков, которую вы можете выбрать в меню «Файл» -> «Настройки» -> «Тема значка файла», если хотите.

Вы получаете две дополнительные темы, а именно Rosé Pine Dawn и Rosé Pine Moon, с разными цветами фона, сохраняя при этом верную цветовую схему.

3. Celestial

Celestial – это более мрачная версия другой популярной темы VS Code, Horizon. Хотя Horizon – отличная тема сама по себе, Celestial предлагает более темный цвет фона, который я предпочитаю.

Хотя Celestial – мой личный фаворит в этом списке, он может быть приобретенным вкусом, если вы не часто используете и не цените действительно темные темы.

Вы можете попробовать Horizon (прокрутите вниз до шестой темы в этом списке), если вам не нужен такой темный фон, но вам нравится используемая здесь цветовая схема.

4. В постели до 19:00.

В постели к 19:00 – это тема от создателя широко используемой темы VS Code Night Owl (добавлена ​​на седьмую позицию в этом списке).

Как следует из названия, эта тема лучше всего подходит для тех, кто не часто ложится допоздна на сеансы программирования. Эта тема имеет отличные уровни контрастности, чтобы помочь вам легко различать различные элементы в коде.

Скачать В постели по теме 19:00

Примечание: есть проблемы со сном? Ознакомьтесь с нашими любимыми приложениями ASMR, которые помогут вам заснуть.

5. ReUI

Если вы ищете тему VS Code, скорее всего, вы хотя бы раз посетили официальный сайт React JS. Если вам нравится цветовая палитра, используемая во фрагментах кода веб-сайта React, тема ReUI переносит ее в VS Code. В результате получилась эстетическая тема с приятными для глаз цветами.

6. Горизонт

Как упоминалось ранее, Horizon – это основа Небесной темы. Horizon – это теплая тема с богатой цветовой палитрой, которая выделяется из общей массы.

Кроме того, разработчик дал несколько рекомендаций по настройке контрастности, удалению курсива и серых скобок в списке темы, чтобы настроить тему в соответствии с вашими предпочтениями.

7. Night Owl

Night Owl – это тема, созданная с учетом доступности. Он предлагает аккуратный контраст для лучшей читаемости, а цветовая схема здесь такова, что не будет неудобно для людей с дальтонизмом. Эта тема отвечает потребностям тех, кто часто работает допоздна.

Скачать Тема Ночной Совы

8. Andromeda

Andromeda – это тема с яркими цветами и темным фоном. Разработчик также создал вариант этой темы с выделенными курсивом ключевыми словами, которые хорошо сочетаются со шрифтами, включая Operator Mono и Catograph Mono. Также есть вариант с рамкой, если вам нравится различать несколько вкладок.

9. Nord

Тема Nord VS Code основана на цветовой палитре Nord от Arctic Ice Studio, вдохновленной красотой Арктики.

Одна примечательная часть Nord заключается в том, что его цветовая схема распространяется даже на популярные сторонние расширения синтаксиса, чтобы предложить вам унифицированный опыт.

Если вам нравятся минимальные настройки, вам, вероятно, понравится эта тема. Однако при ярком освещении он может выглядеть слишком бледным.

10. Tokyo Night

Как следует из названия, Tokyo Night – это тема, посвященная красивым ночным огням в центре Токио. Он намеренно устанавливает низкую контрастность многих элементов пользовательского интерфейса, чтобы не отвлекать программистов.

Тема поставляется в комплекте с двумя дополнительными вариантами, а именно Tokyo Night Light и Tokyo Night Storm. В листинге темы разработчик рекомендует отключить выделение семантического синтаксиса в настройках для достижения наилучших результатов.

Существуют также конфигурации для отключения курсива, увеличения яркости текста Codelens и настройки активных и неактивных границ.

Скачать Ночная тема Токио

11. Mayukai Mirage

Mayukai Mirage черпает вдохновение из нескольких других тем VS Code, включая тему Ayu, тему Material, Monokai, Andromeda и Gruvbox Darktooth.

По словам создателя, эта тема идеально подходит для дневной работы над программированием. Существует семь различных вариантов Mayukai, включая Mirage, Semantic Mirage, Dark, Mirage Gruvbox Darktooth, Mono, Alucard и Sunset.

Скачать Тема Mayukai Mirage

12. One Dark Pro

До того, как VS Code стал массовым, редактор кода Atom был предпочтительным выбором многих разработчиков, и нельзя отрицать, что тема Atom One Dark выглядит великолепно.

Если вам не хватает одной темной темы Atom, то One Dark Pro – это то, что вам нужно установить на VS Code. Создатели этой темы также включили в список фрагменты, которые помогут вам настроить цвета и добавить курсив в пользовательский интерфейс.

Скачать Тема One Dark Pro

13. LaserWave

LaserWave – это тема, вдохновленная синтвейвом 80-х, с теплым ретро-дизайном. В настоящее время он поддерживает Python, React JS, Angular, Ruby, Markdown, Java, C # и Dart.

Если вы ищете тему, которая не является темной и хорошо сочетается с вашим плейлистом lo-fi, вы не ошибетесь с LaserWave. У него уникальное ощущение, и оно вам обязательно понравится.

14. Даркула

Даркула (не путать с популярным Дракула Официальный) переносит знакомую тему Darcula, которую можно увидеть в IDE Jetbrains и Android Studio, в VS Code.

Тем не менее, создатель указывает, что есть несколько модификаций, которые должны улучшить работу программистов.

Вы можете использовать эту тему для унифицированного взаимодействия, если используете предложения IDE Jetbrains.

15. Огни большого города

Еще одна замечательная тема VS Code – City Lights, в которой преобладают матовые темно-синие тона. Он поддерживает более восьми популярных языков программирования.

Пока вы пробуете эту тему, убедитесь, что вы не пропустите пакет значков City Lights с более чем 60 значками типов файлов. Он также доступен для других популярных редакторов кода, таких как Sublime Text и Atom.

Скачать Тема “Огни большого города”

16. Quiet Light

Quiet Light – это официальный порт темы Quiet Light, созданный сначала для текстового редактора Espresso на Mac. Хотя VS Code поставляется с темой Quiet Light, эта версия настолько хороша, насколько и может быть, поскольку была разработана первоначальным дизайнером.

Тема поддерживает HTML / CSS / LESS / SCSS, JavaScript, PHP, Python, Markdown и другие. Если вам нравится тема Quiet Light по умолчанию, скорее всего, она вам понравится.

Скачать Тихая светлая тема

17. Тема GitHub

GitHub – это официальная тема VS Code, которая привносит возможности GitHub в VS Code. Если вам нравится внешний вид платформы для размещения кода, вы почувствуете себя как дома, переключившись на эту тему.

18. Light Pro

Brackets Light Pro переносит светлую тему редактора кода Adobe Brackets в VS Code. Если вы переходите на VS Code из Brackets, поскольку Adobe готова прекратить поддержку Brackets с 1 сентября 2021 года, вам понравится использовать тему Brackets Light Pro.

Рекомендуемые шрифты и значки для этой темы – Fantasque Sans Mono и VSCode Great Icons.

Скачать Brackets Light Pro Тема

19. Aofuji Light

Aofuji Light – это минималистичная тема для VS Code. Эта тема относительно новая, и подсветка синтаксиса была протестирована с файлами HTML, JavaScript, CSS и Markdown.

Если вы предпочитаете светлые темы, вы можете попробовать Aofuji Light, чтобы убедиться, что он идеально вписывается в ваш рабочий процесс.

Скачать Светлая тема Aofuji

20. Bluloco Light

Наконец, у нас есть тема Bluloco Light. Это форк темы One Light с приятной визуально цветовой палитрой Bluloco. Эта тема выглядит хорошо, даже если у вас включен режим Apple NightShift, по словам создателя. Это означает, что тема хорошо сочетается с фильтром синего света.

Скачать Тема Bluloco Light

Это наш выбор из лучших тем Visual Studio Code. Мы надеемся, что эта статья поможет вам выбрать новую тему и придаст общий вид вашей настройке кодирования.

Итак, какая из этих тем Visual Studio Code вам нравится больше всего? Дайте нам знать в комментариях ниже. Кроме того, если вы используете тему, которую мы не упомянули, но которая должна быть в списке, не стесняйтесь поделиться ею с другими в комментариях.