visual studio code форматирование кода сочетание клавиш

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью чуть упростить себе жизнь в Visual Studio Code.

Быстро добавить комментарий

Обычно чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + /, и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.

Перейти к строке под номером

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

Поменять строку местами с соседними

Случается такое, что ваш алгоритм — не алгоритм. Всё пошло не так, а вместо числа 42 вывелось сообщение «Данные удалены». Кому-то для этого нужно переписать весь код, но иногда бывает достаточно поменять строки местами и всё заработает.

Alt и стрелки меняют текущую строку местами с соседними.

Дублировать строку

Windows — Shift + Alt + ↓ / ↑

Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.

Перейти к парной скобке

Windows — Ctrl + Shift + \

Когда кода становится много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок, и вообще, что происходит. На помощь приходит Ctrl+Shift+\ — это хорошее дополнение к стандартной подсветке парных скобок в VS Code.

Переименовать переменную

Отформатировать документ

Windows — Shift + Alt + F

VS Code предложить установить расширение или выбрать из существующих, а потом красиво отформатирует документ — расставит по местам блоки, скобки, и сделает строки кода читаемыми.

Перейти к объявлению переменной

Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости, и где она объявлена. F12 перенесёт нас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.

Включить/выключить перенос слов

Вкусовщина. Если строки кода или текст не вмещается в редактор по ширине, включите перенос.

Включить дзен-режим

Windows — Ctrl + K Z

Лучшее решение для тех, кто входит состояние потока, когда пишет код. Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете плыть в волнах кода и думать только о нём. Чтобы вернуться обратно в реальный мир, нажмите Escape.

На интерактивных курсах все клавиши станут горячими

Потому что оторваться вообще не получается. 11 глав бесплатно, и −30% на подписку в первую неделю обучения.

Нажатие на кнопку — согласие на обработку персональных данных

Источник

Форматирование кода с помощью Prettier в Visual Studio Code

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

Данный мануал научит вас использовать инструмент Prettier, который автоматически форматирует код в Visual Studio Code (или VS Code)

Для демонстрации мы возьмем такой фрагмент кода:

Если вы знакомы с правилами форматирования кода, вы заметите несколько ошибок:

Требования

1: Команда Format Document

Установив расширение Prettier, вы можете использовать его для форматирования вашего кода. Для начала давайте рассмотрим команду Format Document. Эта команда сделает ваш код более последовательным по интервалам, переносам строк и кавычкам.

Чтобы открыть панель команд, нажмите Command+Shift+P в macOS или Ctrl+Shift+P в Windows.

В палитре команд найдите format, а затем выберите Format Document.

Затем панель может предложить вам выбрать формат, который нужно использовать. Для этого нажмите кнопку Configure.

Затем выберите Prettier – Code Formatter.

Примечание. Если панель не предложила вам выбрать формат по умолчанию, вы можете выбрать его вручную в Settings. Установите в Editor: Default Formatter значение ebsenp.prettier-vscode.

Теперь код будет отформатирован с учетом всех пробелов, переносов строк и правильных кавычек:

Это также работает для файлов CSS. Вы можете превратить код с неправильно расставленными скобками, точками с запятой и разбивкой на строки в хорошо отформатированный файл. Например, такой код:

Будет переформатирован так:

body <
color: red;
>
h1 <
color: purple;
font-size: 24px;
>

Теперь, когда мы изучили эту команду, давайте посмотрим, как запускать ее автоматически.

2: Форматирование кода при сохранении

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

Чтобы изменить этот параметр, нажмите Command+ в MacOS или Ctrl+ в Windows. Вы попадете в меню Settings. Открыв это меню, найдите параметр Editor: Format On Save и выберите его, поставив галочку.

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

3: Конфигурация Prettier

Prettier делает много полезного по умолчанию, но стандартное поведение можно изменить, отредактировав настройки.

Откройте меню Settings и найдите Prettier. На вашем экране появятся все параметры Prettier, которые вы можете изменить.

Вот несколько параметров, которые меняют чаще всего:

Главный недостаток встроенного меню конфигураций в VS Code – это то, что оно не обеспечивает согласованности настроек в вашей команде.

4: Создание конфигурационного файла Prettier

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

Вот пример конфигурационного файла в формате JSON:

<
«trailingComma»: «es5»,
«tabWidth»: 4,
«semi»: false,
«singleQuote»: true
>

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

Заключение

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

Prettier обеспечивает согласованность кода и может форматировать его автоматически.

Источник

20 сочетаний клавиш для ускорения работы в VS Code

Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

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

Объединить строку

Форматирование кода

Это сочетание помогает выровнять код в соответствии с заранее прописанными настройками редактора.

Обрезка множественных пробелов

Данное сочетание клавиш помогает избавиться от лишних пробелов в начале или конце строки.

Совет: применяйте в самом конце, когда завершаете работу над кодом в текущем файле.

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

Также мы добавили новую команду для запуска вручную (Trim Trailing Whitespace в палитре команд).

Если вы используете более новую версию VS Code, после открытия пользовательских настроек вы увидите следующее окно (поставьте галочку, как показано):

Сворачивание блоков кода

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

Свернуть внутреннюю область возле курсора вам помогут следующие сочетания клавиш:

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

Скопировать строку сверху или снизу

Назначенные сочетания можно посмотреть и отредактировать, пройдя по пути File > Preferences > Keyboard Shortcuts.

Разбить окно редактора по вертикали

Чтобы разбить окно редактора, можно воспользоваться командой split editor. Оригинальное сочетание клавиш для разделения окна — 123. Функция разделения полезна для параллельного редактирования файлов.

Назначенные сочетания также можно отредактировать, выбрав новые по своему вкусу (File > Preferences > Keyboard Shortcuts).

Окно редактора в виде сетки

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

Для поддержки гибких макетов можно создать пустые группы редактора. По умолчанию закрытие последнего редактора группы закрывает и саму группу, но это поведение можно изменить, добавив в настройках workbench.editor.closeEmptyGroups: false.

В меню View > Editor Layout можно посмотреть набор готовых вариантов разделения окна.

Выделить слово

Если нажать command + d больше одного раза, к выделению добавится еще одно вхождение того же слова далее по тексту.

Открыть или закрыть боковую панель

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

Переход к указанной строке

Примечание: чтобы перейти к нужной строке в файле, используйте сочетание клавиш ctrl + g, после которого введите номер строки. Или же сначала откройте меню файла при помощи command + p, затем введите двоеточие и номер нужной строки.

Переход к символу в файле

Символы можно группировать, добавив двоеточие:

Переход к символу в рабочем окружении

Удаление предыдущего слова

Полезно в ситуациях, если набрали лишнее, а жать несколько раз backspace не любите.

Выделение целых слов

Очень полезно для более быстрого выделения и редактирования.

Дублирование строки

Дублирование строк это очень полезный и хорошо известный функционал.

Удаление строки

Добавление курсора сверху / снизу

Функция дублирования курсоров в VS Code, пожалуй, сэкономит вам больше всего времени.

Переименование символа

Выделите нужный символ, а затем нажмите f2. Также можно использовать контекстное меню.

Выделение столбца

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

Палитра команд

При помощи этих сочетаний клавиш можно получить доступ ко всем доступным в вашем контексте командам. Вот самые используемые из них:

1. Открыть файл

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

2. Посмотреть сочетание клавиш для команды

Все команды в палитре команд приводятся с назначенными им сочетаниями клавиш (если такие назначения есть). Поэтому, забыв нужное сочетание, можно подсмотреть его в палитре.

Полезных сочетаний клавиш в VS Code очень много. При желании можно ознакомиться с ними подробнее:

Источник

Хоткеи для VS Code: гифки с демонстрацией и шпаргалка

Хоткеи для VS Code: гифки с демонстрацией и шпаргалка

Любую команду в Visual Studio Code можно выполнить через командную строку (Ctrl + Shift + P), но сочетания клавиш помогают сильно экономить время. Достаточно только привыкнуть их использовать.

Для вашего удобства в конце статьи есть шпаргалка со всеми хоткеями.

Прим. пер. Во всех сочетаниях используется английская раскладка.

Время от времени заходить в настройки всё же приходится. Этот хоткей ускоряет процесс.

Показать список горячих клавиш: Ctrl + K Ctrl + S

Переключиться между средами разработки: Ctrl + R

Этот хоткей открывает список ваших недавних рабочих пространств. Это быстрый способ переключаться между папками и проектами. Обратите внимание, что при переходе сессия терминала закроется (если она была активна).

Глобальный перенос по словам: Alt + Z

Простой и удобный способ сразу увидеть все длинные строки без горизонтальной прокрутки.

Перейти на строку: Ctrl + G

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

Перейти к файлу: Ctrl + P

Самый быстрый способ переключения между файлами (особенно если они ещё не открыты).

Перейти к следующей ошибке или предупреждению: F8

Отладка одной клавишей во плоти. Ещё можно переходить на предыдущую ошибку или предупреждение, используя Shift + F8.

Переключиться между вкладками: Ctrl + Tab

Быстрый способ переключения между уже открытыми файлами.

Поместить курсор в конец каждой выделенной строки: Shift + Alt + I

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

Выделить текущую строку: Ctrl + L

Хоткей используется для быстрого выделения всей строки, на которой установлен курсор.

Выделить все вхождения текущего выделения: Ctrl + Shift + L

Хоткей сэкономит время, потому что теперь не нужно использовать Ctrl + D во всём файле.

Выделить все вхождения текущего слова: Ctrl + F2

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

Подсказки по параметрам: Ctrl + Shift + Space

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

Форматировать документ: Shift + Alt + F

Специально для тех, кому лень постоянно придерживаться правил форматирования.

Форматировать выделенную область: Ctrl + K Ctrl + F

Такой же, как и предыдущий хоткей, но форматируется не весь документ, а только выделенная область.

Перейти к определению: F12

Быстрый способ перейти к определению функции или переменной.

Показать определение: Alt + F12

Сочетание клавиш похоже на прошлое, но в этом случае курсор никуда не перемещается.

Переименовать переменную: F2

Незаменимый хоткей для рефакторинга кода.

Обрезать пробелы в конце: Ctrl + K Ctrl + X

Чтобы вручную не удалять лишние пробелы в конце строки. Работает при выделении нескольких строк.

Отобразить открытый файл в проводнике: Ctrl + K R

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

Замена в файлах: Ctrl + Shift + H

Если одного файла вам не достаточно.

Превью Markdown-файла: Ctrl + K V

Открыть предпросмотр Markdown-файла.

Включить Zen Mode: Ctrl + K Z

Не позволяйте навязчивым интерфейсам отвлекать вас от программирования. Хоткей поможет сконцентрироваться на коде.

Источник

Горячие клавиши в Visual Studio

Сюда буду добавлять горячие клавиши в Visual Studio, способы быстрого ввода и прочие фишки, позволяющие кодить более комфортно.

Начнем с самого простого, что бывает нужно начинающему программисту:
cw + 2 раза Tab = Console.WriteLine();

Далее материалы статьи с Хабра, где-то с моими дополнениями, но в основном в чистом виде:

Комментирование

Ctrl+K,C — закомментировать выбранные линии в коде.
Ctrl+K,U — раскомментировать выбранные линии в коде.

Если перед именем метода набрать /// — автоматически будут добавлены XML комментарии, которые потом можно использовать для создания документации. Туда можно вписать название метода, описание переменных и т.п. Далее при использовании данного метода будут всплывать подсказки как раз с этой информацией.

Поиск

Ctrl+F — открывается стандартное окно поиска, если в буфер недавно было скопирован текст, то он автоматически подставиться.
Ctrl+F3 — поиск «активного» текста вниз (который выделен или слово на котором стоит курсор), без копирования в буфер обмена.
Ctrl+Shift+F3 — поиск «активного» текста вверх.
Ctrl+I — и начинаете печатать текст, этакий runtime поиск.

Вызов базового джина

Вам лень писать текст полностью?! Скорость выпадающего Intellisence не устраивает несущуюся впереди вас вашу мысль?!
Тогда самое время применить следующии комбинации:
Ctrl+Space — вызов Intellisence с показом «слов»
Ctrl+J — если вы подзабыли название метода класса или его свойсто, то эта комбинация вам поможет. Можно применять и предыдущую, но эта более «умная».
Ctrl+K, X — показ всех сниппетов, которые у вас есть, в виде выпадающего списка, использование интуитивно понятно 🙂
короткое_имя_снипета+Tab — использовать сниппет в коде.

Навигация по коду

Если обратите внимание то студия, по своей природе MDI, значит должна быть возможность перемещаться, между окнами:
Ctrl+Tab — аналог Alt+Tab в Windows, только применимо к студии.

Очень удобным инструментом в студии являются закладки, да-да, по аналогии с книжными. Можно отметить код чтобы потом перейти к нему:
Ctrl+B, T — поставить/снять закладку.
Ctrl+B, Ctrl+C — удалить все закладки.
Ctrl+B, N — перейти к следующей закладке.
Ctrl+B, P — перейти к предыдущей закладке.

Форматирование и редактирование

Многие знают и используют Ctrl+C и Ctrl+V, но студия обладает ещё рядом удобным комбинаций:
Ctrl+Shift+V — не отпуская Ctrl+Shift и нажимая на V, вы сможете вставить один из 10 последних кусков текста, скопированных в буфер обмена.
Tab — увеличить отступ.
Shift+Tab — уменьшить отступ.

Мне иногда не хватало вертикального выделения текста, бывает полезно. Оказывается и такая возможность есть! Стоит нажать Alt, и не отпуская, выделять мышкой текст. Но есть минус — меню и стрелочки клавиатуры :). Это решаемо, нажимаете Shift+Alt и используете стрелочки Left или Right

Если код доставшийся вам «грязен», не только по структуре, но и по внешнему оформлению, используйте:
Ctrl+E+D — форматирование всего документа, позволяет привести документ в более удобоваримый вид.
Ctrl+E+F — форматирование выбранной части текста

Иногда в целях рефакторинга или ещё каких-то благих начинаниях, есть смысл перевести все буквы в верхний или нижний регистр:
Ctrl+Shift+U — перевести выделенный блок в верхний регистр
Ctrl+U — перевести выделенный блок в нижний регистр

Небольшой экскурс в сборку и отладку

Конечно же со стороны хоткеев 🙂
Начнём со «сборки»:
Ctrl+Shift+B или F6 — собрать solution.
Shift+F6 — собрать активный проект.
Если честно, тут я немного пошаманил, заточив под себя, иногда бывает удобно пересобрать проект RebuildSolution, но почему-то хоткей для этого не предусмотрен, я поступил следующий образом:
F6 — собрать solution
Ctrl+Shift+B — пересобрать solution
Поступил я так из-за соображения, что иногда студия не выполняет пересборку проекта, а пишет «up-to-date», а мне нужно именно пересобрать.

Если появились ошибки, это плохо, но никто от них не застрахован:
F5 — запустить программу, с возможностью отладки. Или продолжить выполнение программы, после точки останова.
Ctrl+F5 — запустить программу без отладки
F9 — поставить/убрать точку останова — breakpoint
Ctrl+Shift+F9 — удалить все точки останова.
F10 — выполнить код, без захода внутрь
F11 — выполнить код, с заходом внутрь

В режиме отладки есть два типа просмотра — Watch и QuickWatch.
Вызвать QuickWatch вы можете нажав Ctrl+D, Q. Просто Watch — Ctrl+D, W.

Источник