VSCode — самая популярная в мире IDE, но настройки, которые поставляются с VSCode, могут показаться слишком сложными и лишними для большинства целей программирования.

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

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

К этому!

Давай начнем!

The Settings.JSON File

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

Нажмите Control + Shift + P, чтобы открыть палитру команд, и введите «Настройки». В раскрывающемся меню выберите «Настройки: Открыть настройки (JSON)».

Большинство настроек, которые я представлю в этом руководстве, говорят сами за себя, но я приложил несколько комментариев к более неясным, объясняющим, что они делают.

Если вам не нравится какое-либо конкретное изменение, которое я представил, не стесняйтесь вернуть его обратно! Помните: все люди разные, и ваш VSCode должен быть адаптирован для вас!

Наведение порядка в макете

Во-первых, давайте разберемся с грязным и загроможденным макетом VSCode. Примените следующие настройки, скопировав их и вставив в файл JSON.

Вам может быть интересно, почему я решил переместить боковую панель и проводник слева направо. Две причины:

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

Опять же, если вам не нравится это изменение, не стесняйтесь вернуть его обратно! Я лично предпочитаю вот так.

Упрощение нашего редактора

Мы очистили наш макет, и теперь давайте сосредоточимся на нашем редакторе.

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

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

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

Другие настройки макета и редактора

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

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

В качестве шрифта редактора я использую Gruvbox Material Theme, Material Icons и Cartograph CF.

Сохранение и предварительный просмотр изменений

После того, как вы применили все нужные настройки, обязательно сохраните файл settings.json и перезапустите VSCode. Если все было сделано правильно, ваш редактор теперь должен выглядеть примерно так:

Разве это не выглядит намного лучше?

Подождите секунду… Мой макет все еще не похож на ваш!

Ага! Это верно.

VSCode имеет множество настроек, но все же имеет свои ограничения. Остальные изменения макета и пользовательского интерфейса здесь были сделаны с помощью расширения под названием Customize UI.

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

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

Тогда увидимся!