Как изменить шрифт в коде Visual Studio

Обновлено: 03.07.2024

По какой-то причине шрифт вашего терминала VSCode слишком велик или слишком мал. Я собираюсь показать вам, как именно вы можете изменить размер шрифта терминала, чтобы вам действительно было удобно его читать.

Шаг 1. Откройте файл settings.json в VSCode

В VS Code файл settings.json звучит именно так. Он содержит все ваши пользовательские настройки, так что вы можете настроить редактор по своему вкусу. В этом случае мы можем использовать его для изменения определенного набора параметров, предназначенных для встроенного терминала в VS Code.

Шаг 1.1. Откройте палитру команд

Самый простой способ найти файл settings.json — через палитру команд.

Чтобы открыть палитру команд, используйте сочетание клавиш, соответствующее вашей операционной системе:

Windows: Ctrl + Shift + P.
MacOS: Command + Shift + P.

Шаг 1.2. Войдите в «Открыть настройки (JSON)»

Просто начните вводить текст, и он будет заполнен автоматически. Как только он заполнится автоматически, вы можете нажать Enter или выбрать нужный вариант вручную.

Шаг 2. Добавьте в файл «terminal.integrated.fontSize».

Это волшебная настройка, которая вам нужна для изменения размера шрифта терминала.

Примечание. В VS Code используются размеры шрифта в пикселях. Это означает, что установка «16» будет эквивалентна 16px. По умолчанию размер шрифта терминала установлен на 14 пикселей, что довольно мало.

Все, что вам нужно сделать, это добавить эту строку в файл и сохранить:

Возможно, придется немного повозиться с числом, пока вы не получите его правильно.

Вот как это должно выглядеть после редактирования параметра:

Примечание. Убедитесь, что вы добавили запятую после предыдущей настройки, иначе ваш JSON будет недействительным. В приведенном выше GIF вы можете видеть, что после «window.zoomLevel» стоит запятая.

В качестве дополнительного бонуса, вот некоторые другие настройки терминала, которые вы можете обновить в VS Code:

terminal.integrated.fontFamily

Это относится к типу шрифта терминала. Если вам не нравится шрифт по умолчанию, вы можете заменить его другим шрифтом на вашем компьютере. Просто имейте в виду, что терминал поддерживает только моноширинные шрифты.

terminal.integrated.fontSize

Это говорит само за себя 🙂

terminal.integrated.fontWeight

Так какой шрифт по умолчанию используется в редакторе кода Visual Studio во всех средах (Ubuntu, MAC OS и Windows)? И как я могу это изменить?

Шрифт, используемый для заголовков вкладок, меню и другого текста, который является частью самого VS Code, в отличие от содержимого, такого как код в редакторе, в настоящее время — Arial.

Шрифт по умолчанию в Linux очень уродлив и намного хуже читаем, чем в Sublime Text, даже при большем размере. Плюс изменить его даже не получится!!

11 ответов 11

Выберите «Настройки» > «Настройки пользователя». (В качестве альтернативы Ctrl + , / Cmd + в macOS)

Затем вы можете ввести в объект JSON любые настройки, которые хотите переопределить. Пользовательские настройки для каждого пользователя. Вы также можете настроить параметры рабочего пространства для проекта, над которым вы сейчас работаете.

Вот пример:

Это просто подтверждение того, что в Windows 8.1 используется шрифт Monaco, и, по крайней мере, на моем экране 3200x1800 размер шрифта по умолчанию равен 14. Вот сравнение с Monaco 14 в Intellij Idea (Code — синий): !Code / Идея

ничего не делает. Я вижу все тот же шрифт. Должен ли я принудительно обновить настройки? Например. перезапустить vscode? даже после перезагрузки без изменений

Если после сохранения он не изменится, обязательно перезапустите Visual Studio Code. Есть два места, которые вам могут понадобиться, чтобы изменить это. Один из них — «Файл» -> «Настройки» -> «Настройки». Другой вариант: если у вас есть папка .vscode, в ней будет файл settings.json.

В настройках по умолчанию VS Code использует следующие шрифты (14 pt) в порядке убывания:

Монако
Менло
Консоли
"Дроид без моно"
"Неконсолата"
"Новый курьер"
моноширинный (резервный вариант)

Как проверить: VS Code работает в браузере. В первой версии вы могли нажать F12, чтобы открыть инструменты разработчика. Изучая DOM, вы можете найти несколько s, составляющих эту строку кода. Изучив один из этих диапазонов, вы увидите, что семейство шрифтов — это просто список выше.

Я получил "Segoe WPC", "Segoe UI", SFUIText-Light, HelveticaNeue-Light, sans-serif, "Droid Sans Fallback" . Я использую его в archlinux, если это имеет значение.

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

Параметры шрифта и размера являются глобальными для всех текстовых элементов во всех редакторах Visual Studio.

Имена шрифтов фиксированной ширины выделены жирным шрифтом.

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

Чтобы узнать, как настраивать шрифты и цвета для IDE, а не только для редактора кода, см. страницу Как изменить шрифты и цвета в Visual Studio.

Изменить начертание, размер и цвет шрифта по умолчанию

Выберите «Параметры» в меню «Инструменты». В разделе "Среда" выберите "Шрифты и цвета".

В разделе "Показать настройки для" выберите "Текстовый редактор".

Измените параметры "Шрифт" и "Размер", чтобы изменить начертание и размер шрифта для всех текстовых элементов во всех редакторах.

Выберите соответствующий элемент в разделе Отображать элементы, а затем измените параметры Передний план элемента и Фон элемента.

Нажмите «Использовать настройки по умолчанию», чтобы восстановить настройки по умолчанию.

Выберите ОК.

Выберите «Параметры» в меню «Инструменты». В разделе "Среда" выберите "Шрифты и цвета".

В разделе "Показать настройки для" выберите "Текстовый редактор".

Нажмите «Использовать настройки по умолчанию», чтобы восстановить настройки по умолчанию.

Нажмите "ОК".

Дальнейшие шаги

Дополнительные сведения об изменениях шрифта и цвета, которые можно внести в среду IDE с помощью диалогового окна "Параметры", см. на странице "Шрифты и цвета, среда, диалоговое окно параметров".

Узнайте, как изменить шрифт кода по умолчанию в Visual Studio Code, а также дополнительную информацию о том, почему или почему бы не использовать шрифт кода, отличный от шрифта по умолчанию в VSCode.

Как изменить шрифт кода VSCode по умолчанию

Чтобы изменить шрифт кода VSCode по умолчанию, вы можете либо использовать пользовательский интерфейс настроек VSCode, либо настроить его непосредственно в файле настроек JSON ( settings.json ). Я всегда настраиваю в файле JSON, так как он дает вам 100% контроль.

Чтобы открыть настройки JSON, сначала откройте палитру команд, нажав:

Cmd + Shift + P на Mac.
Ctrl + Shift P в Windows

Теперь найдите «Настройки» и выберите «Открыть настройки» (JSON) в раскрывающемся списке.

В зависимости от существующей конфигурации VSCode у вас может быть несколько файлов settings.json. Выберите тот, который находится в вашем пользовательском каталоге. Для справки, мой файл settings.json находится по этому пути на моем Mac:

В вашем пользовательском файле settings.json вы можете перезаписать любую конфигурацию VSCode по умолчанию — и это намного проще, чем кажется.

Подождите, откуда берутся настройки VSCode по умолчанию?

Из файла Open Default Settings (JSON) ( defaultSettings.json ).

Мы будем использовать этот файл в качестве эталона, так что откройте его:

Откройте палитру команд (Cmd + Shift + P) и найдите «настройки».
Выберите «Открыть настройки по умолчанию (JSON)».

Теперь у вас открыты два файла:

Ваши пользовательские настройки (JSON): settings.json
Открытые настройки VSCode по умолчанию (JSON): defaulSettings.json

Любые конфигурации, которые вы добавляете в свои настройки (JSON), перезаписывают настройки по умолчанию (JSON).

Поскольку вы хотите изменить шрифт кода VSCode, найдите «editor.fontFamily» в параметрах Open Default Settings (JSON). Вы должны найти строку, которая выглядит следующим образом:

Теперь скопируйте эту строку (вам не нужно копировать текст комментария) и вставьте ее в свой файл user settings.json, чтобы она выглядела примерно так:

Если вы сомневаетесь, посмотрите это короткое видео, в котором я открываю как файлы пользовательских настроек, так и файлы настроек по умолчанию:

Примечание. Если в файле user settings.json уже есть конфигурации, не удаляйте их. Просто добавьте запятую и перейдите на новую строку, а затем вставьте ее туда. Посмотрите на файл defaultSettings.json в качестве справки. Он имеет множество конфигураций.

Чтобы изменить семейство шрифтов кода, существует несколько способов. Это зависит от того, какой шрифт вы хотите использовать.

Использовать встроенный/системный шрифт

Если кодовый шрифт, который вы хотите использовать, является частью VSCode или установлен на вашем компьютере (например, системный шрифт), все, что вам нужно сделать, это добавить имя шрифта в начале значения вашего свойства:

В целях тестирования предположим, что вы хотите использовать шрифт Monaco вместо Menlo. Просто измените порядок шрифтов в значении свойства:

Как только вы сохраните (Cmd + S), вы должны увидеть перед собой изменение шрифта кода. Теперь Monaco — ваш кодовый шрифт!

Установить новый/пользовательский шрифт

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

Загрузить код Fira:

Перейдите в официальный репозиторий на GitHub.
Прокрутите вниз до раздела «Загрузить и установить» и нажмите, чтобы загрузить. Это небольшой файл.
Распакуйте файл rar.

В распакованном каталоге Fira_Code откройте папку с именем ttf.

Выбрать все файлы шрифтов
Нажмите правой кнопкой мыши и выберите "Открыть" (или "Открыть с помощью книги шрифтов").
Выберите "Установить шрифт".

Теперь Fira Code установлен на вашем Mac.

Установить в Windows

В распакованном каталоге Fira_Code откройте папку с именем ttf.

Выбрать все файлы,
Нажмите правой кнопкой мыши и выберите "Установить".

Теперь, чтобы заставить Fira Code работать в VSCode, добавьте Fira Code в качестве значения семейства шрифтов в файле settings.json:

Сохраните файл, и теперь ваш шрифт кода VSCode — Fira Code!

Зачем менять шрифт кода?

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

Шрифт Menlo по умолчанию, поставляемый вместе с VSCode, совсем неплох. Возможно, вам это понравится, и это нормально.

Однако вы не узнаете, какое значение имеет тот или иной шрифт в вашем рабочем процессе, пока вам не будет с чем сравнивать. Дайте шрифту Fira Code, о котором вы узнали из этого руководства, шанс на пару дней. Если вы пришли к выводу, что это не ваш тип шрифта, попробуйте другой. Вы всегда можете вернуться в Менло.

Вы можете решить, что шрифт Menlo — идеальный для вас, и это здорово! Речь идет не о том, какой шрифт лучше для каждого человека. Такого нет.

Люди разные.

Что такое хороший кодовый шрифт?

Вот список критериев хорошего шрифта для кодирования:

Хороший кодовый шрифт — это тот, который легко читать — для вас — до тех пор, пока вам это нужно каждый день в рабочее время.
Хороший кодовый шрифт содержит все необходимые глифы (символы, символы), необходимые как для написания кода, так и для написания (комментариев, документации и т. д.).
Хороший кодировочный шрифт почти всегда является монотипным. Я говорю почти всегда, потому что не могу исключить никаких исключений, но я их не нашел.< /li>

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

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

Вам не нужно выходить и пробовать все когда-либо созданные монотипные шрифты. Посмотрите на 4-5 и выберите тот, который вам больше нравится.

Помимо шрифта Fira Code, о котором вы узнали из этого руководства, я также рекомендую IBM Plex Mono, который доступен бесплатно в Google Fonts.

Было ли это полезно для вас?

Вы можете поддержать мою работу, поделившись этой статьей с другими, или угостить меня чашечкой кофе 😊

Читайте также: