VS Code - отличный редактор с множеством функций, но из-за этого пользовательский интерфейс кажется загроможденным.

Этот пост посвящен тщательно продуманному списку настроек, тем, шрифтов и расширений для улучшения внешнего вида. Имейте в виду, что я использую редактор в основном для Javascript и React, и я не использую некоторые интересные функции, такие как git, отладчик или интеграцию с терминалом. И я предпочитаю использовать палитру команд (⇧⌘P) вместо того, чтобы иметь параметры в пользовательском интерфейсе.

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

Прежде всего, давайте сравним пользовательский интерфейс VS Code по умолчанию с моим минимальным подходом:

Чтобы добиться этого «чистого» пользовательского интерфейса, я использую шрифт Operator Mono, тему Material Theme Palenight High Contrast, а также некоторые расширения и настройки, о которых я расскажу ниже.

Прежде чем подробно остановиться на настройках, я хочу упомянуть некоторые общие особенности моей настройки:

  • Я удалил панель активности (первый левый столбец, позволяющий переключаться между проводником, git, отладчиком и расширениями)
  • Я удалил лишнюю информацию, которая была «исправлена» в пользовательском интерфейсе (например, строка состояния, миникарта или раздел открытого редактора).
  • Я хотел, чтобы пользовательский интерфейс фокусировался на коде и не отвлекал, с тонкими цветами для номеров строк, текущей глубиной отступа и соответствующими скобками.
  • Я использую Prettier, поэтому мне не нужны визуальные подсказки для пробельных символов или направляющих отступов.
  • Я использую шрифт немного большего размера, используя курсив для зарезервированных слов или комментариев.

Настройки

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

У каждой измененной настройки есть краткое объяснение, поэтому вам будет проще использовать только те, которые вам интересны.

И последнее замечание о настройках. Вы можете настроить цветовую тему с помощью объекта workbench.colorCustomizations, посмотрите Справочник цветов темы, чтобы узнать о нем больше.

Расширения

Шрифты

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

Темы

Я всегда использую темные темы, в настоящее время я использую Material Theme Palenight High Contrast, но есть и другие отличные варианты.

Спасибо за прочтение! Надеюсь, это было полезно для настройки пользовательского интерфейса VS Code.