- PVSM.RU - https://www.pvsm.ru -
А вы знали, что 73% разработчиков по всему миру используют один редактор кода? Так и есть. Результаты проведённого в 2023 году опроса Stack Overflow показали, что VS Code является самой популярной средой разработки.
И мы все знаем почему — он очень крут!
Но в полной ли мере мы задействуем его потенциал? Текущая статья будет посвящена знакомству с некоторыми интересными возможностями VS Code, способными повысить продуктивность работы. К ним, помимо прочих, относятся локальный контроль исходного кода, анимация курсора и быстрое удаление строк. Использование этих возможностей поможет ускорить реализацию проектов разработки.
Окно Timeline представляет собой встроенную в редактор функцию управления исходным кодом.
Многие из нас знают, насколько полезен Git и другие инструменты управления версиями ПО, помогающие отслеживать изменения файлов и при необходимости откатывать их до определённой точки в прошлом.
В этом плане Timeline в VS Code предоставляет нам автоматически обновляемую временну́ю линию событий, относящихся к файлу, таких как коммиты Git, сохранения и тесты.
Разверните это окно, и вы увидите список снимков событий, связанных с текущим файлом. Здесь отмечены точки его сохранения, а также коммиты Git, при которых он индексировался.
Наведите курсор на снимок, чтобы увидеть время и дату его создания.
Выбрав снимок, вы увидите представление diff, демонстрирующее изменения между файлом в момент снимка и его текущей версией.
Можете сосчитать, сколько раз вы использовали эту комбинацию? Возможно, вы делаете это сейчас бессознательно.
Функция Autosave обеспечивает автоматическое сохранение файлов при работе с ними. Эта возможность исключает использование комбинации Ctrl + S, экономит время и даёт уверенность в том, что мы всегда работаем с последними версиями файлов.
Хотя есть тут и свои недочёты. Все плюсы и минусы мы подробно описали в этой статье [1], чтобы вы могли взвесить их более объективно.
Без автосохранения
Автосохранение включено — индикатор unsaved больше не отображается
Для включения этой функциональности используйте File > Auto Save.
Практически всё, что вы делаете в VS Code, помимо ввода кода, это выполнение команд.
Команды позволяют реализовывать в редакторе различные задачи, относящиеся к файлам, навигации, редактированию и работе в терминале. Каждая из них дополняет тот или иной аспект процесса редактирования.
Command Palette позволяет без проблем находить нужную команду и выполнять связанное с ней действие.
Открывается Command Palette следующими комбинациями клавиш:
Очевидно, что показанные справа комбинации используются для ускоренного выполнения команд с помощью клавиатуры.
Ключевое преимущество Command Palette перед использованием комбинаций проявляется в случаях, когда для команды нет комбинации, или когда вы ищете такую, в существовании которой не уверены.
Работать с помощью мыши получается довольно медлительно.
Да, вы можете кликнуть по файлу в панели Explorer, но есть и более быстрая альтернатива — комбинация Ctrl + P, позволяющая найти и открыть конкретный файл в проекте.
Удерживая Ctrl, нажимайте Tab для переключения между открытыми в редакторе файлами.
Также вы можете использовать Alt + Left и Alt + Right для быстрой навигации между этими файлами.
Все эти способы значительно ускоряют доступ к файлу в сравнении с использованием курсора.
Перескакивайте к нужным строкам без прокрутки.
Быстрый переход к той или иной строке невероятно полезен при отладке. Перескочив к искомой строке, вы можете проанализировать её код в контексте, просмотреть переменные и исправить проблему.
В этом вам поможет комбинация Ctrl + G.
Как быть, если, переключившись на строку, вы понимаете, что её нужно удалить?
Выделите её целиком, а затем клацнете Delete? Или же будете усердно жать Backspace, пока не сотрётся последний её символ?
Всему этому есть альтернатива — комбинация Ctrl + Shift + K, позволяющая удалить одну или множество строк в считаные секунды.
В VS Code есть функциональность анимирования курсора при движении, как в MS Word. При её использовании ввод и перемещение курсора по коду воспринимается более плавно.
Для включения этой функциональности откройте Settings в Command Palette и выполните поиск по запросу «smooth caret».
Здесь мы ищем установку Editor: Cursor Smooth Caret Animation, которая предлагает три варианта:
Для наиболее полноценного визуального восприятия выберите on.
Форматирование нацелено на повышение читаемости кода за счёт его структурированной и согласованной организации.
И если вы делаете это вручную, то знайте, что есть более удобный способ.
Это автоматическое форматирование, доступное через команду Format Document, находящуюся там же в Command Palette. В зависимости от языка документа, будет использоваться определённый «предустановленный» форматировщик. Ориентируясь на различные правила, он будет определять величину отступов, длину строк, используемые скобки и прочие нюансы.
И хотя есть неплохой встроенный инструмент форматирования JS/TS, я рекомендую более надёжное решение — расширение Prettier [2].
После установки его нужно выбрать как используемое по умолчанию.
Если вы сохраняете изменения вручную, то для облегчения форматирования рекомендуется включить дополнительную опцию:
После её включения VS Code будет автоматически форматировать код с помощью предустановленного форматировщика при сохранении файла через Ctrl + S, как вы видели в демо выше.
Если же вы используете автосохранение, то Format on save не работает. К тому же, при частом форматировании вам быстро надоест постоянно открывать Command Palette. В этом случае помогут комбинации клавиш:
Лично я работаю в Windows, и мне не нравится эта базовая комбинация. Автосохранение вынуждает меня делать форматирование постоянно, и спустя какое-то время нажатие Shift + Alt + F сильно надоедает.
Поэтому я поменял её на Ctrl + D, Ctrl + D — эту комбинацию гораздо проще запомнить и использовать, плюс она не имеет конфликтующих привязок клавиш. Так что рекомендую и вам поступить так же.
Многокурсорное редактирование позволяет размещать несколько курсоров в разных точках и удалять/вставлять в них один и тот же текст. Эта техника значительно повышает продуктивность за счёт более эффективного выполнения повторяющихся задач в разных частях кода.
Естественно, при редактировании всегда присутствует как минимум один курсор. Дополнительные можете добавлять с помощью Alt + Click.
Также можете с лёгкостью добавлять курсор непосредственно над или под текущей строкой с помощью комбинации Ctrl + Alt + Down или Ctrl + Alt + Up.
Эти комбинации выполняют команды Add Cursor Above и Add Cursor Below соответственно.
В любом серьёзном проекте мы неизбежно создаём каталоги и файлы, и если найдётся вариант ускорить этот процесс, то сэкономленное за счёт этого время значительно повысит продуктивность.
Если вы привыкли создавать файлы и каталоги через кнопки New File и New Folder, то есть и другой способ.
Да, вам не обязательно это делать
Вместо того, чтобы раз за разом перемещать курсор к этим мелким кнопкам, для создания файла можно просто дважды кликнуть по панели Explorer.
А как насчёт создания каталога? Каталоги по своей сути не отличаются от файлов, поэтому при создании файла вы можете просто добавить символ /
для указания иерархии и создания каталогов/подкаталогов, содержащих этот файл.
Для файла index.js создаётся каталог utils
Ещё эффективнее будет использовать комбинации клавиш.
Как бывший поклонник Atom, я быстро привык к использованию A и Shift + A для создания файлов и каталогов соответственно. В этом случае я понимал, что нужно делать.
Поскольку A и Shift + A, естественно, используются при вводе кода, я добавил здесь условие when
, чтобы они создавали файл/каталог, только когда выбрана панель Explorer, и в редакторе отсутствует активный курсор.
Так что для использования этих комбинаций при вводе кода сначала вам придётся выбрать панель Explorer, кликнув по ней или нажав Ctrl/Command + Shift + E.
В документации VS Code Key Bindings [3] содержится более углублённая информация о комбинациях клавиш и их настройке. Там же находится полный список всех предустановленных комбинаций VS Code [4] для вашей операционной системы.
Visual Studio Code во многом аналогичен текстовому редактору — это мощный инструмент, который при достаточном освоении способен значительно повысить вашу продуктивность и упростить процесс написания кода. Десять рассмотренных нами рекомендаций представляют лишь вершину айсберга. Продолжая знакомство с VS Code, вы обнаружите множество других возможностей и комбинаций, которые ещё больше повысят вашу продуктивность.
Так что продолжайте изучение и помните: ключ к эффективному написанию кода находится не только в самом коде, но и в используемых для этого инструментах.
Узнавайте о новых акциях и промокодах первыми из нашего Telegram-канала 💰 [5]
Автор: Дмитрий Брайт
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/news/387457
Ссылки в тексте:
[1] этой статье: https://codingbeautydev.com/blog/autosave-pros-cons/?utm_source=medium&utm_campaign=blog&utm_medium=social
[2] расширение Prettier: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
[3] VS Code Key Bindings: https://code.visualstudio.com/docs/getstarted/keybindings
[4] предустановленных комбинаций VS Code: https://code.visualstudio.com/docs/getstarted/keybindings#_default-keyboard-shortcuts
[5] Узнавайте о новых акциях и промокодах первыми из нашего Telegram-канала 💰: https://t.me/ruvds_community
[6] Источник: https://habr.com/ru/companies/ruvds/articles/765182/?utm_source=habrahabr&utm_medium=rss&utm_campaign=765182
Нажмите здесь для печати.