Как поменять шрифт в visual studio code
Обновлено: 07.07.2024
Итак, какой шрифт по умолчанию для редактора кода Visual Studio во всех средах (Ubuntu, MAC OS и Windows)? И как я могу это изменить?
Шрифт, используемый для заголовков вкладок, меню и другого текста, который является частью самого кода VS, в отличие от содержимого, такого как код в редакторе, в настоящее время является Arial.Перейти к Preferences > User Settings . (В качестве альтернативы Ctrl + , / Cmd + , в macOS)
Затем вы можете ввести в объект JSON любые параметры, которые вы хотите переопределить. Пользовательские настройки для каждого пользователя. Вы также можете настроить параметры рабочего пространства для проекта, над которым вы сейчас работаете.
Знаете ли вы настройки шрифта по умолчанию (семейство, размер, вес), которые использует VSCode, если ничего не установлено? я считаю, что это Монако, и размер, кажется, между 12 и 13 Это просто для того, чтобы подтвердить, что в Windows 8.1 шрифтом является Monaco, и по крайней мере на моем экране 3200x1800 размер шрифта по умолчанию равен 14. Вот сравнение с Monaco 14 в Intellij Idea (код синий):! Код / Идея ничего не делает . вижу все тот же шрифт. Нужно ли принудительно обновлять настройки? Например, перезапустить vscode? даже после перезапуска без изменений Как только вы сохраните его, если он не изменится, обязательно перезапустите код Visual Studio. Есть два места, которые вам могут понадобиться, чтобы изменить это. Одним из них является Файл -> Настройки -> Настройки. Другое - если у вас есть папка .vscode, то под ней будет файл settings.json.В настройках по умолчанию VS Code использует следующие шрифты (14 пт) в порядке убывания:
- Монако
- Менло
- Consolas
- "Droid Sans Mono"
- "Inconsolata"
- "Новый Курьер"
- моноширинный (резервный)
Как проверить: VS Code запускается в браузере. В первой версии вы можете нажать F12, чтобы открыть Инструменты разработчика. Осматривая DOM, вы можете найти несколько строк, составляющих эту строку кода. Изучив один из этих диапазонов, вы увидите, что font-family - это просто список выше.
Как установить и настроить шрифт JetBrains Mono в редакторе кода Visual Studio Code. Небольшая инструкция по настройке шрифта в редакторе VSCode.
В начале 2020 года JetBrains выпустили свой собственный шрифт для своих IDE. Шрифт получил название JetBrains Mono. Примечательно что шрифт поддерживает кирилицу и лигатуры, находится в открытом доступе и доступен для скачивания всеми желающими. Поэтому его можно установить и в редактор VSCode.
Установка JetBrains Mono в Windows
Для начала нужно скачать шрифт JetBrains Mono на его оф. странице.
Распакуйте архив. Затем зайдите в папку ttf , где выделите все шрифты, нажмите правую кнопку мыши и в появившемся контекстном меню выберите пункт Установить.
Установку шрифта в системах MacOs и Linux смотрите на странице шрифта.
Настройка шрифта в VSCode
В редакторе VSCode откройте Параметры → Шрифт и пропишите для Font Family название шрифта
Если вам е понравится шрифт JetBrains Mono и вы захотите вернуть шрифты по умолчанию, то изначально было установлено:
На оф странице шрифта вы можете увидеть что JetBrains рекомендуют для своего шрифта применять следующие параметры: Size: 13 и Line spacing: 1.2 . Поэтому в файле settings.json с настройками редактора прописываем:
Так же проверьте чтобы у вас были включены лигатуры
*Лигатуры в кодинге, это когда сочетания определённых символов отображается более изящным решением. Например неравно != будет выводится как зачёркнутое равно ≠ , а стрелки -> или => будут показаны как нормальные цельные стрелки с одинарным и двойным хвостикомсоответственно: → и ⇒ . Там ещё есть целый ряд таких сочетаний. В общем, это очень удобно для чтения кода.
Итого, в settings.json у вас должны быть прописаны следующие строки:
Если после редактирования настроек вы не видете изменений, то просто перезапустите ваш VSCode.
Итак, какой шрифт по умолчанию используется в редакторе кода Visual Studio во всех средах (Ubuntu, MAC OS и Windows)? А как его поменять?
Перейдите в Preferences > User Settings . (В качестве альтернативы, Ctrl + , / Cmd + , в macOS)
Затем вы можете ввести в объект JSON любые настройки, которые хотите переопределить. Пользовательские настройки для каждого пользователя. Вы также можете настроить параметры рабочего пространства для проекта, над которым вы сейчас работаете.
В настройках по умолчанию VS Code использует следующие шрифты (14 pt) в порядке убывания:
- Монако
- Menlo
- Consolas
- "Droid Sans Mono"
- «Инконсолата»
- "Новый Курьер"
- моноширинный (резервный)
Как проверить: VS Code работает в браузере. В первой версии вы могли нажать F12, чтобы открыть Инструменты разработчика. Изучая DOM, вы можете найти объект, содержащий несколько s, составляющих эту строку кода. Осмотрев один из этих диапазонов, вы увидите, что семейство шрифтов - это всего лишь список выше.
Для окон пожалуйста, следуйте этим шагам Перейти -> Файл -> настройки -> настройки
ИЛИ нажмите CTRL +, (только для Windows) вы увидите страницу настроек, там найдите вкладку опций текстового редактора слева, затем нажмите «Шрифт», затем добавьте туда любое допустимое название семейства шрифтов, которое вы хотите применить к vscode.
Перейдите в Инструменты-> Параметры в меню в главном окне. В контейнере среды вы можете увидеть шрифты и цвета. Вы можете выбрать нужный шрифт и цвет.
В Linux, чтобы получить список шрифтов (и их имена, которые вы должны использовать), запустите это в другой оболочке:
Вы можете указать список шрифтов, чтобы иметь запасные значения на случай отсутствия шрифта.
Другой способ определить шрифт по умолчанию - начать набирать "editor.fontFamily" в настройках и посмотреть, что предлагает автозаполнение. На Mac по умолчанию отображается:
"editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
Что подтверждает сказанное Энди Ли.
В Windows настройки по умолчанию следующие (я никогда не устанавливал Monaco или Menlo)
Размер шрифта в настройках равен 12, а высота строки - 16, что близко к Visual Studio, установленному на Consolas с размером 10pt. Мне не удалось получить точное совпадение (шрифт VS Code немного жирнее), но достаточно близко.
На моем компьютере с Windows 8.1 шрифт VS Code по умолчанию - Consolas, но вы можете легко изменить шрифт в File-> Preferences-> User Preferences. Файл setting.json будет открыт вместе с файлом настроек по умолчанию, откуда вы можете взять синтаксис и имена для свойств настроек и установить свои собственные в settings.json.
В VSCode, если "editor.fontFamily": "" пусто, размер шрифта НЕ будет работать. Установите семейство шрифтов, чтобы изменить размер.
"editor.fontFamily": "Verdana", или "editor.fontFamily": "Monaco",
На самом деле, используйте любое семейство шрифтов, которое вам нравится.
Тогда "editor.fontSize": 16, должно сработать.
Шрифты по умолчанию различаются в Windows, Mac и Linux. Начиная с VSCode 1.15.1, настройки шрифта по умолчанию можно найти в исходный код:
Перевод статьи «Here are some super secret VS Code hacks to boost your productivity».
Вы можете быть профессиональным разработчиком или просто увлекаться программированием — в любом случае вы должны знать, что наличие продуманных и хорошо настроенных инструментов жизненно важно для каждого, кто хочет добиться максимальной эффективности в работе.
Я собрал небольшую коллекцию советов, приемов и расширений для работы в Visual Studio Code, а для этой статьи выбрал из них самые редкие и при этом самые полезные для разработчика. Как мы знаем, экосистема JavaScript очень велика и по-прежнему растет. Поэтому я постараюсь быть как можно более непредубежденным.
Делаем VS Code красивым и дружелюбным
Если инструмент хорошо выглядит и приятен в использовании, вам понравится проводить время за работой с ним.
1. Material — тема и значки
Я считаю, что «материальная» тема больше всего напоминает письмо при помощи ручки и бумаги, только в редакторе (особенно если вы не используете контрастный вариант этой темы). Переход от встроенных инструментов к текстовому редактору происходит максимально гладко.
А ведь эта сногсшибательная тема идет в связке с такими же сногсшибательными значками. Material Theme Icons это прекрасная замена дефолтным значкам VSCode. Большой каталог значков хорошо интегрируется с темой, еще более украшая ее. Новые значки помогут вам быстрее находить ваши файлы.
2. Zen Mode («дзен-режим») с центрированием
Вероятно, вы уже знакомы с Zen Mode View, также известным как Distraction Free View («неотвлекающий» режим). Те, кто раньше пользовался Sublime Text, наверняка его знают. В этом режиме с экрана удаляется все, кроме кода. Но знаете ли вы, что можно сделать так, чтобы код в этом режиме располагался по центру экрана? Это очень помогает сфокусироваться на коде.
3. Шрифты с лигатурами
Можете попробовать шрифт Fira Code — он красивый (а кроме того еще и опенсорсный). Вот как поменять шрифт в VSCode (после того как установили его):
4. Rainbow Indent («радужный отступ»)
Делайте стильные отступы. Это расширение расцвечивает отступы четырьмя разными цветами на каждом шаге.
Дефолтная настройка предполагает использование разных цветов радуги. Я сделал собственную схему с оттенками серого. Если хотите получить результат, как в приведенном примере, вставьте этот отрывок в ваш файл settings.json:
5. Настройка панели названия
Это отличный визуальный прием. Я скопировал его в одном из уроков по React и GraphQL (Wes Bos). Суть приема в том, что вы в каждом проекте меняете цвет панели с названием, чтобы легче их различать. Это очень пригождается при работе над приложениями, где могут быть одинаковые названия файлов (например, мобильное приложение на react-native и веб-приложение на react).
Цвет меняется путем редактирования настроек панели названия (Title Bar) в настройках окружения (Workspace Settings) в каждом проекте, где вы хотите сменить цвет панели.
Более быстрый кодинг
Суть-то в том, чтобы завершить работу вовремя.
1. Окружение тегами (Tag Wrapping)
Если вы не знакомы с Emmet, вам, наверное, нравится печатать все собственноручно. Emmet позволяет вам вводить сокращенный код и получать соответствующие теги. Делается это путем выделения кода и ввода команды Wrap with Abbreviated (я для этого назначил специальное сочетание клавиш shift+alt+). Посмотрите на примере, как это происходит:
Допустим, вы хотите окружить тегами весь этот код, но в качестве отдельных сток. Для этого нужно использовать wrap with individual lines, а затем вставить * после сокращения, например, div*.
Если вас заинтересовал Emmet, возможно, вам будет интересна эта шпаргалка.
2. Балансировка внутрь и наружу
В VS Code можно выделять теги и их содержимое при помощи команд Emmet — balance inward (балансировка внутрь) и balance outward (балансировка наружу). Будет полезным назначить этим командам сочетания клавиш, например, Ctrl + Shift + стрелка вверх для Balance Outward и Ctrl + Shift + стрелка вниз для Balance Inward.
3. Turbo Console.log()
Иногда для отладки нужно часто выводить в консоль большое количество информации. Этот процесс можно значительно ускорить при помощи расширения Turbo Console Log. Оно автоматически вставляет строку с вызовом console.log сразу за выделенной переменной:
Также можно за один раз (при помощи команд Alt+Shift+u/ и Alt+Shift+c ) раскомментировать (или закомментировать) все логи, добавленные этим расширением. Более того, их все можно удалить при помощи команды Alt+Shift+d.
4. Live server
Прекрасное расширение, которое поможет вам запустить локальный сервер с функцией «живой» перезагрузки для статических и динамических страниц.
А при помощи VSCode LiveShare можно даже поделиться своим localhost.
5. Копирование и вставка с множественными курсорами
Одна из тех вещей, которые наиболее поразили меня, когда я начал работать в VS Code, это возможность редактирования нескольких строк одновременно путем добавления нескольких курсоров. Гораздо позже я открыл для себя еще один вариант использования этой фичи. Можно скопировать контент, выделенный при помощи этих курсоров, и вставить его именно в том порядке, в котором он был скопирован.
Обратите внимание на пример:
6. Хлебные крошки
«Хлебные крошки» (breadcrumbs) показывают текущее местоположение и позволяют вам быстро перемещаться между файлами. Чтобы начать использовать breadcrumbs, включите этот функционал при помощи команды View > Toggle Breadcrumbs или в настройках: breadcrumbs.enabled.
Разное
Мелочи, способные всё изменить.
1. Code CLI
Интерфейс командной строки в VS Code позволяет вам управлять тем, как запускается редактор. При помощи различных опций можно открывать файлы, устанавливать расширения, менять язык отображения и т. д.
2. Polacode
Наверняка вам часто попадаются красиво оформленные скрины кода с пользовательскими шрифтами и темами, как в примере:
Этот скрин был сделан при помощи расширения Polacode.
Я знаю, что Carbon тоже хорош, к тому же имеет больше настроек. Но зато Polacode позволяет вам оставаться в редакторе и использовать любой проприетарный шрифт, который вы приобрели.
3. Quokka (JS/TS ScratchPad)
Quokka это «песочница» для прототипирования на JavaScript и TypeScript. Код запускается немедленно по мере ввода. При этом в редакторе вы видите различные результаты выполнения и console log-и.
Особенно Quokka может пригодиться при подготовке к техническим собеседованиям, поскольку так вы сможете выводить каждый шаг без необходимости устанавливать breakpoints в дебаггере.
5. WakaTime
Это расширение помогает записывать и сохранять показатели и аналитику, касающиеся вашей программистской активности. Вы можете устанавливать себе цели, просматривать, какие языки программирования вы используете чаще всего, а также сравнивать свои результаты с чужими.
Читайте также: