На днях я небрежно пролистывал LinkedIn, занимаясь своими делами, и наткнулся на этот пост. Этот чувак демонстрирует свою работу, и я должен сказать, что она впечатляет. Но затем, из ниоткуда, этот случайный парень оставляет комментарий со словами: «Ваш vscode выглядит непрофессионально». Что сказать? UnPr0FesSi0naL? Серьезно?
Но эй, угадай что? Чем дольше вы остаетесь в этой отрасли, тем больше вы понимаете, что старый добрый VSCode просто не подходит. А если серьезно, кого волнует тот чувак в разделе комментариев, который говорит, что ваш VSCode выглядит непрофессионально? Как, правда? В этом посте я покажу вам, как прокачать вашу IDE и сделать ее предметом зависти на рабочем месте. Приготовьтесь раскачать свою игру по кодированию с помощью некоторых действительно крутых настроек VSCode!
Давайте сделаем VSCode красивым (снова)
Тема
Лично я выбрал тему «Темный модерн». Он обеспечивает баланс между тем, чтобы быть достаточно темным, чтобы обеспечить гладкий внешний вид, но не быть чрезмерно интенсивным. Цветовой контраст в самый раз, что облегчает работу глаз во время длительных сеансов кодирования. Это утонченный и утонченный внешний вид, который добавляет нотку элегантности в мою среду кодирования.
Тема «Темный модерн» была введена в качестве темной темы по умолчанию в апреле 2023 года в версии 1.78 VSCode. Если вы все еще используете старую версию, самое время обновить ее. Сейчас почти июнь, и вы не хотите отставать от остальных более чем на два месяца, не так ли?
Палитра команд и файл settings.json
Прежде чем мы перейдем к теме, позвольте мне представить вам палитру команд. Вы можете легко получить к нему доступ, нажав комбинацию клавиш Ctrl+Shift+P. Это удобный инструмент, который позволяет выполнять команды и получать доступ к различным функциям всего несколькими нажатиями клавиш. Как только вы начнете использовать его, вы поймете, насколько это удобно и экономит время.
После отображения командной палитры просто введите «пользовательские настройки», и вы увидите две опции: «Предпочтения: пользовательские настройки (Json)» и «Предпочтения: открыть пользовательские настройки». Первый вариант позволяет редактировать все настройки с помощью файла JSON, а второй вариант предоставляет графический пользовательский интерфейс (UI) для настройки. Лично я считаю, что быстрее использовать файл JSON вместо навигации по пользовательскому интерфейсу. Выберите тот вариант, который подходит вам лучше всего, исходя из ваших предпочтений и уровня комфорта при редактировании настроек.
Шрифт
FiraCode — отличный выбор. Это моноширинный шрифт, который привносит в таблицу программные лигатуры, делая ваш код еще более стильным и читабельным.
Шрифт, используемый в теме Dark Modern, не только визуально привлекателен, но и приятен для глаз. Низкоконтрастные цвета создают успокаивающий и комфортный опыт кодирования. Лично я предпочитаю низкоконтрастные цвета, поскольку они помогают мне сохранять концентрацию и не отвлекаться. Если вы хотите использовать шрифт, вы можете загрузить его, следуя инструкциям, предоставленным создателями шрифта.
Моя текущая настройка для этого:
"editor.fontFamily": "'FiraCode NF', 'firaCode Nerd Font', 'Cascadia Code', Consolas, 'Courier New', monospace", "editor.fontLigatures": true,
Меню
Я скрываю меню в VSCode для более чистого интерфейса и полагаюсь на ярлыки для более быстрой навигации и действий. Теперь строка заголовка чистая.
"window.menuBarVisibility": "compact"
Я считаю, что команда в центре выглядит очень круто и упрощает определение рабочей области, над которой я сейчас работаю, особенно при работе с несколькими рабочими областями.
"window.commandCenter": true
Миникарта
Чтобы справиться с раздражением, вызванным мини-картой, которая отвлекает многих людей, в том числе и меня, я нашел способ вернуть драгоценное пространство экрана, не жертвуя его полезностью во время определенных задач, таких как рефакторинг. Изменив настройки, я настроил мини-карту так, чтобы она появлялась только при наведении курсора на крайнюю правую часть редактора. Таким образом, у меня есть больше места, чтобы сосредоточиться на моем коде, и в то же время иметь доступ к мини-карте, когда она мне нужна.
"editor.minimap.autohide": true, "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "editor.minimap.scale": 1, "editor.minimap.showSlider": "mouseover", "editor.minimap.side": "right",
Миникарта служит удобным инструментом для быстрого определения нашего положения в коде. Однако чрезмерное отображение сложных символов может снизить производительность. Я решил уменьшить миникарту до значения 1.
Панировочные сухари
Функция хлебных крошек может иметь свою эстетическую привлекательность, но лично я считаю, что она малопригодна для практического применения. Поэтому я принял решение отключить его вообще.
"breadcrumbs.enabled": false
Стиль курсора, окружение курсора и желоб
Тонкий курсор трудно найти, цвет по умолчанию смешивается с текстом, пока вы печатаете обычный текст.
"editor.cursorBlinking": "solid",
"editor.cursorSmoothCaretAnimation": "off",
"editor.cursorSurroundingLines": 10,
"editor.cursorSurroundingLinesStyle": "default",
"workbench.colorCustomizations": {
"editorCursor.background": "#ff930f",
"editorCursor.foreground": "#ff930f",
}
Установка цвета фона и переднего плана на "#ff930f" выделяет курсор из черной темы, и его легче найти, чем ваши носки.
Настройка «cursorSurroundingLines» очень удобна, особенно когда вы перемещаетесь по файлу с помощью клавиш со стрелками. Это гарантирует, что у вас будет 10-строчное смещение при прокрутке, что поможет вам сохранить свою позицию в коде.
Задержка зависания
Задержка при наведении по умолчанию слишком медленная для суетливого человека, и ее также необходимо изменить:
"editor.hover.delay": 300, "workbench.hover.delay": 1,
Установка задержки наведения в редакторе на 300 миллисекунд — хороший выбор для достижения баланса между отзывчивостью и удобством использования. Эта задержка позволяет вам быстро перемещаться по коду, не вызывая непреднамеренного зависания.
Пары кронштейнов
В VSCode есть встроенная функция, называемая выделением пары скобок, которая помогает вам легко идентифицировать совпадающие пары скобок в вашем коде. Включив подсветку пары горизонтальных скобок, вы можете отслеживать соответствующие открывающие и закрывающие скобки при прокрутке кода вверх и вниз.
Кроме того, визуализация отступа и выделение активного отступа могут быть полезны при навигации по коду.
"editor.guides.bracketPairs": true, "editor.guides.bracketPairsHorizontal": "active", "editor.guides.highlightActiveBracketPair": true, "editor.guides.highlightActiveIndentation": true, "editor.guides.indentation": true, "editor.bracketPairColorization.enabled": true, "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
Выделите события
Включение выделения вхождений в вашем коде может быть чрезвычайно полезным при отладке и чтении вашего кода.
"editor.occurrencesHighlight": true,
Окрашивание фона и переднего плана
Я также меняю окраску для других компонентов, меняйте как хотите
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#ff930f",
"editor.lineHighlightBorder": "#9fced11f",
"editorCursor.background": "#ff930f",
"editorCursor.foreground": "#ff930f",
"editorLineNumber.activeForeground": "#A020F0",
"editorLineNumber.foreground": "#5DE23C",
"titleBar.activeBackground": "#000000",
"titleBar.activeForeground": "#F4DB01",
"titleBar.inactiveBackground": "#000000",
"titleBar.inactiveForeground": "#ffffff",
"tab.activeBorder": "#F4DB01",
"terminal.tab.activeBorder": "#F4DB01",
"statusBar.background": "#000000",
"statusBar.debuggingBackground": "#007acc",
"statusBar.foreground": "#F4DB01",
"statusBar.noFolderBackground": "#007acc"
}
Липкая прокрутка
Я отдаю предпочтение производительности, а не причудливому пользовательскому интерфейсу, поэтому я отключил плавную прокрутку в VSCode. Плавная прокрутка иногда может привести к ненужным накладным расходам, влияющим на общую производительность.
Кроме того, я увеличил чувствительность быстрой прокрутки, что позволяет мне быстрее перемещаться по коду при использовании клавиши Alt с колесиком прокрутки.
Кроме того, я нахожу липкую прокрутку особенно полезной, особенно при работе с длинными файлами. Это помогает мне сохранять чувство местоположения и легко отслеживать свою позицию, подобно тому, как хлебные крошки работают в навигации.
"workbench.list.smoothScrolling": true, "editor.fastScrollSensitivity": 5, "editor.smoothScrolling": false, "editor.stickyScroll.enabled": true,
Иконки
Иконки vscode действительно хороши и достаточно четкие.
Привязка клавиш Vim
Хочешь быть самой быстрой рукой на западе? используйте привязку клавиш vim. Может быть, вы спрашиваете: «Почему бы вам не использовать вместо этого vim, чтобы вы могли быть такими же быстрыми, как Flash?». Ответ очень прост, vim очень хорошо справляется с задачами без мыши, но я считаю, что есть вещи, которые можно сделать лучше с помощью интерактивного пользовательского интерфейса, например, разрешение конфликтов git. Более того, конфигурация в vim пугает новичка вроде меня.
Давайте установим расширение vim (идентификатор vscodevim)
Краткое введение
Прежде чем мы начнем, полезно иметь общее представление о Vim и его расширении для Visual Studio Code. Взгляните на Введение в Vim и документацию по расширениям, чтобы ознакомиться с концепциями.
В Vim есть три основных режима: обычный режим, режим вставки и визуальный режим. В строке состояния удобно отображается текущий режим, что позволяет легко отслеживать состояние редактирования. Эти три режима вы будете использовать чаще всего при работе в Vim.
- Режим вставки: для вставки.
- Нормальный режим: для модификации
- Визуальный режим: для выбора.
Сопоставление клавиш в settings.json
Во-первых, мы сопоставляем ведущий ключ с пространством. Вы можете представить это как ⌘ в MacOS.
"vim.leader": "<space>",
Сопоставления клавиш в Vim настраиваются в файле settings.json с использованием массивов для каждого режима.
"vim.visualModeKeyBindings": [], "vim.visualModeKeyBindingsNonRecursive": [], "vim.insertModeKeyBindings": [], "vim.insertModeKeyBindings": [], "vim.normalModeKeyBindingsNonRecursive": []
Например, если я хочу нажать «tt», чтобы закрыть все открывающиеся вкладки в обычном режиме, я добавляю это в раздел normalModeKeyBindingNonrecursive.
{
"before": ["t", "t"],
"commands": ["workbench.action.closeEditorsInGroup"]
}
Или, если вы хотите сделать отступ, вместо того, чтобы нажимать вкладку, вы можете сопоставить его с ›, вы можете сделать это так
{
"before": [">"],
"commands": ["editor.action.indentLines"]
},
Сопоставление клавиш в keybindings.json
Чтобы устранить необходимость в клавишах со стрелками, мы можем создать настраиваемые сопоставления клавиш в файле keybindings.json. Вы можете получить доступ к этому файлу, открыв палитру команд и выполнив поиск «сочетания клавиш».
Например, если мы хотим нажать ctrl+j и ctrl+k в действиях кода вместо кнопки со стрелкой вниз и стрелкой вверх, мы можем сделать это:
{
"key": "ctrl+j",
"command": "workbench.action.quickOpenSelectNext",
"when": "!textInputFocus && inQuickOpen"
},
{
"key": "ctrl+k",
"command": "workbench.action.quickOpenSelectPrevious",
"when": "!textInputFocus && inQuickOpen"
},
EasyMotion
При использовании Vim вы можете перемещаться с помощью jkhl вместо клавиш со стрелками. Но для еще более быстрой навигации вы можете попробовать расширение EasyMotion. Он предоставляет расширенные параметры перемещения и ярлыки для быстрого перехода к определенным местам в вашем коде.
Нажав «Leader Leader s» + «символ, к которому вы хотите перейти», можно уменьшить количество повторяющихся нажатий клавиш.
Например, чтобы перейти к определенной букве «c» на экране с помощью EasyMotion, вы можете дважды нажать ведущую клавишу, а затем «s», а затем «c». Имейте в виду, что если на экране есть несколько вхождений «с», вам может потребоваться нажать дополнительные клавиши, чтобы указать, к какому вхождению вы хотите перейти.
Утилиты
Перетащите
Если вы хотите отключить сенсорную панель на своем ноутбуке, чтобы избежать случайного перетаскивания во время набора текста, вы обычно можете сделать это через настройки сенсорной панели в вашей операционной системе.
"editor.dragAndDrop": false,
Перенос слова
Длинная строка — признак запаха кода, мы также используем мышь для быстрой навигации внутри длинной строки. Но мы пытаемся избежать использования мыши и дополнительных движений здесь.
К счастью, есть возможность переносить длинную строку, чтобы избежать прокрутки.
"editor.wordWrap": "on"
Код объектива
Code Lens может быть полезен для быстрых действий, таких как отладка и запуск теста во время прокрутки. Иногда это может быть полезно
"editor.codeLens": true
Форматировать при вставке и при сохранении
Включение функции автоматического форматирования в редакторе может избавить вас от ручного форматирования кода. Настроив его на запуск при сохранении файла или при вставке текста, вы можете гарантировать, что ваш код будет последовательно отформатирован без необходимости дополнительных нажатий клавиш.
"editor.formatOnPaste": true, "editor.formatOnSave": true, "editor.formatOnType": false,
подсказкаInTrustedWorkspace
Когда вы работаете на локальном компьютере, и вы просто хотите открыть пустую папку для быстрого эксперимента или создания заметок, запрос доверия рабочей области может стать немного надоедливым. Хотя он служит цели для удаленных рабочих мест и определенных сценариев, он может оказаться ненужным для ваших обычных локальных проектов. К счастью, вы можете отключить запрос доверия рабочей области и обеспечить более плавный рабочий процесс без перерывов.
"security.workspace.trust.banner": "never", "security.workspace.trust.emptyWindow": true, "security.workspace.trust.enabled": false, "security.workspace.trust.startupPrompt": "never",
Расширения
Есть некоторые расширения, которые могут быть полезны здесь
Codesnap позволяет создать изображение вашего кода
Обычные коммиты позволяют вам делать коммиты git с предопределенной структурой.
Diff позволяет сравнить 2 текстовых файла
Анализ Markdown и предварительный просмотр Markdown могут быть полезны при написании документации по уценке.
GitLens не спонсирует этот пост, но мне достаточно их бесплатного уровня.
Объектив ошибки
Error Lens дает вам лучший UI / UX, чем стандартное оформление ошибок в VSCode.
Если вы сочтете пост полезным, подумайте о том, чтобы угостить меня кофе.
Обновление: я создал репозиторий на github и загрузил свои конфигурации здесь.
