Улучшите внешний вид вашей любимой IDE

Самая первая статья, которую я когда-либо публиковал здесь на Medium / Better Programming, была о нескольких расширениях VS Code, которые я использую по сей день. Я всегда намеревался создать дополнительные элементы, касающиеся настройки VS Code, но так и не дошел до этого. Поскольку предыдущая часть была больше сосредоточена на расширениях, эта часть будет больше сосредоточена на настройках.

Многие люди уже используют VS Code из-за множества расширений, которые легко доступны через вкладку расширений. Тем не менее, вы можете многое настроить прямо сейчас, не загружая никаких расширений. Это будет нашей основной целью. Вы можете быстро получить доступ к своим предпочтениям, щелкнув команду и запятую (cmd +,) или перейдя к ней в разделе Код ›Настройки› Настройки.

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

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

Автосохранение

Вы заметили ошибку в своем коде и приступили к ее исправлению. Когда вы идете протестировать исправление, ничего не изменилось ... ошибка сохраняется. Странно, но вы уверены, что ваша логика верна, но, тем не менее, перепроверьте ее. Разочарованный, вы пробуете что-то еще, но все еще не играете в кости. Цикл повторяется, и вы тратите на эту проблему больше времени, чем вы думаете. Почему ваши решения не работают? О, ты забыл сэкономить.

Чтобы избежать описанного выше сценария, включите автосохранение. VS Code предоставляет вам несколько вариантов того, как вы хотите обрабатывать автосохранение. Я выбираю базовую задержку времени с задержкой, установленной на 1000. Это гарантирует, что мне никогда не придется беспокоиться о сохранении изменений вручную.

Если вы пользуетесь пользовательским интерфейсом, автосохранение будет первой доступной вам опцией. Если вы редактируете файл setting.json, вы можете включить эту функцию, установив для files.autoSave значение afterDelay и установив files.autoSaveDelay на 1000.

Настройки курсора

Это может показаться странным, но вы можете немного изменить эту мигающую строку, которую видите в VS Code. Поле editor.cursorBlinking принимает blink, expand, smooth, phase или solid как допустимые значения.

blink используется по умолчанию и предоставляет вам постоянно мигающий курсор. expand заменяет мигание анимацией, переходящей от полной высоты к исчезновению и обратно к полной высоте. phase делает курсор более тусклым. smooth, как следует из названия, представляет собой более плавную мигающую анимацию. Наконец, solid сохраняет ваш курсор всегда видимым. Если вам нравится плавная анимация, вы также можете установить editor.smoothCaretAnimation на true.

Вы также можете изменить стиль курсора, установив в поле editor.cursorStyle одно из шести значений. Значение line - значение по умолчанию, с которым вы, вероятно, уже знакомы. При использовании block линия становится толстой и обволакивает следующий за ней символ, выделяя его в процессе. С block-outline вы получите то же самое, только без выделения. Значение underline изменяет ваш курсор с вертикальной полосы на горизонтальную. Вы можете добавить -thin к любой строке или подчеркнуть его, чтобы сделать курсор тоньше.

Для чего-то более практичного вы можете назначить привязку клавиш для создания нескольких курсоров с помощью editor.multiCursorModifier. Принимает одно из двух значений. alt позволяет удерживать клавишу выбора и щелкать в любом месте, чтобы в редакторе появились дополнительные курсоры. Между тем, значение ctrlCmd заставляет вас удерживать командную клавишу и щелкать мышью для создания дополнительных курсоров.

С помощью курсора вы можете сделать еще больше настроек. Если вы выберете line в качестве стиля курсора, вы можете настроить editor.cursorWidth, чтобы настроить ширину курсора. С помощью editor.multiCursorPaste вы можете настроить поведение того, что происходит, когда вы вставляете текст в VS Code, когда у вас есть несколько активных курсоров. С full каждый курсор вставляет все, а с spread каждый курсор вставляет одну строку текста.

Настройки для конкретного языка

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

Рассмотрим на мгновение как Ruby, так и JavaScript. Традиционно код Ruby оформлен таким образом, что отступы имеют ширину в два пробела. С другой стороны, в JavaScript для отступов используется традиционная табуляция (четыре пробела). Это может раздражать, когда вам приходится переключать отступ каждый раз, когда вы переключаетесь на другой язык. К счастью, в VS Code есть функция, позволяющая установить настройки для определенного языка.

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

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

Предпочитаемый шрифт

Помимо VS Code, я трачу значительное количество времени на кодирование нескольких IDE, созданных JetBrains. Недавно они выпустили новый шрифт под названием JetBrains Mono. Этот шрифт доступен во всех их IDE, но JetBrains любезно выпустила этот шрифт для общественности бесплатно (и с открытым исходным кодом). Для меня это большой плюс, поскольку для единообразия я предпочитаю, чтобы все мои редакторы использовали один и тот же шрифт. До JetBrains Mono я использовал Fira Code, который можно найти здесь.

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

  1. Как следует из названия, это моноширинный шрифт, то есть каждый символ занимает одинаковую ширину.
  2. Строчные буквы выше по сравнению с другими шрифтами.
  3. У него очень простой вид. Никаких причудливых волнистых штрихов на таких символах, как g или r.
  4. Поддерживает лигатуры.
  5. Особое внимание было уделено тому, чтобы такие символы, как 1, l и I, а также 0 и O, были легко различимы.

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

После загрузки шрифта откройте VS Code и перейдите к своим предпочтениям. Отсюда, если вы используете редактор пользовательского интерфейса, найдите Editor: Font Family и введите свой шрифт (соблюдайте регистр и пробелы).

Кроме того, вы можете получить доступ к этому полю в файле settings.json - ключ - editor.fontFamily. Пока мы здесь, сейчас хорошее время, чтобы установить размер шрифта (например, editor.fontSize’: 14), и если вы поклонник лигатур, вы можете включить их прямо сейчас (editor.fontLigatures’: true).

Небольшие личные штрихи

Вы можете изменить способ открытия настроек VS Code, установив значение в поле workbench.settings.editor. Значение по умолчанию - ui, но вы можете изменить его на JSON, если хотите. Если вы измените его на JSON, то в следующий раз, когда вы откроете свои настройки, VS Code автоматически откроет файл settings.json, а не покажет вам пользовательский интерфейс.

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

Я не считаю эту функцию очень полезной. Вы можете отключить эту функцию, чтобы освободить немного больше места. Для этого установите editor.minimap.enabled и установите значение false.

Панировочные сухари позволяют быстро увидеть структуру файлов. Чтобы настроить это, просто установите breadcrumbs.enable на true, а затем breadcrumbs.filePath на on. После этого в правом верхнем углу (под вашим открытым файлом) вы должны увидеть путь к файлу, ведущий к вашему текущему местоположению.

В последней версии macOS терминал по умолчанию заменен с Bash на Zsh. Однако для людей, которые не обновляли свою ОС, но все же предпочитают использовать Zsh, вы все равно можете это сделать. Вы можете использовать terminal.integrated.shell.osx, чтобы указать путь к терминалу Zsh.

Хотя я не упомянул здесь какие-либо расширения, я хочу упомянуть быструю настройку, которая поможет поддерживать ваши расширения в актуальном состоянии. Установив в поле extensions.autoCheckUpdates значение true, VS Code будет автоматически отмечать расширение как устаревшее всякий раз, когда доступна более новая версия. Вы сможете увидеть это в режиме просмотра расширений.

Более того, VS Code может автоматически устанавливать обновления для ваших расширений, задав для extensions.autoUpdate значение true. Обе эти команды используют онлайн-сервис Microsoft для получения обновлений.

Эксперимент

VS Code известен как очень настраиваемый редактор. Это безумие, как много внимания Microsoft вложила в каждый аспект редактора. Мелочи, такие как различные настройки курсора, поразили меня, когда я впервые обнаружил их. Еще более удивительно то, что здесь рассматривается лишь небольшая часть того, что доступно для редактирования. Когда у вас есть возможность, я призываю вас открыть свой settings.json файл и повозиться с ним.

Наконец, хотя я и упомянул, что сосредоточусь на настройках, я все же хочу упомянуть одно связанное расширение. Синхронизация настроек - это расширение, которое я, к сожалению, не упомянул в своей статье о расширениях VS Code. Относительно простое расширение, синхронизация настроек, синхронизирует различные аспекты вашего редактора (включая settings.json file —, а также расширения и их конфигурации) на нескольких устройствах. Это идеально, если вы работаете на нескольких компьютерах или просто хотите поделиться своими настройками с другом или коллегой. Вот мои настройки на случай, если вы захотите их посмотреть.

Надеюсь, вы нашли здесь что-то полезное. Поразительно, насколько настраиваемым является VS Code даже без учета расширений.