Как очистить терминал в visual studio code

name == String.Empty 

Пошаговое выполнение программы

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

1. Установите точку останова на открывающей фигурной скобке метода Main .
2. Нажмите клавишу F5 , чтобы запустить отладку. Visual Studio Code выделит строку точки останова. На этом этапе в окне Переменные показано, что массив args пуст, а name и currentDate имеют значения по умолчанию.
3. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Будет выделена следующая строка.
4. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio Code выполняет Console.WriteLine для запроса имени и выделяет следующую строку выполнения. Следующая строка — это Console.ReadLine для name . Окно «Переменные » не изменяется, а вкладка «Терминал » отображает запрос «Что такое ваше имя?».
5. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio выделит назначение переменной name . В окне Переменные видно, что name по-прежнему null .
6. Ответьте на этот запрос, введя строку на вкладке «Терминал» и нажав клавишу ВВОД . На вкладке Терминал может не отображаться введенная строка, однако метод Console.ReadLine будет записывать входные данные.
7. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio Code выделит назначение переменной currentDate . В окне Переменные отображается значение, полученное в результате вызова метода Console.ReadLine. На вкладке Терминал также отображается строка, указанная в командной строке.
8. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . В окне Переменные отображается значение переменной currentDate , которому было присвоено свойство DateTime.Now.
9. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio Code вызывает метод Console.WriteLine(String, Object, Object). В окне консоли отображается форматированная строка.
10. Выберите Запуск>Шаг с выходом или нажмите клавиши SHIFT + F11 .
11. Выберите вкладку Терминал. В окне терминала отобразится сообщение «Нажмите любую клавишу, чтобы выйти. «
12. Нажмите любую клавишу для выхода из программы.

Использование конфигурации сборки для выпуска

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

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

dotnet run --configuration Release 

Дополнительные ресурсы

• Debugging in Visual Studio Code (Отладка в Visual Studio Code)

Следующие шаги

В этом учебнике вы использовали средства отладки Visual Studio Code. В следующем руководстве вы опубликуете развертываемую версию приложения.

How can I clear the terminal in Visual Studio Code?

I need to clean the contents of the terminal in Visual Studio Code. Every time I use Maven, the output of the terminal is attached to the previous build, which is confusing me. How do I clear the terminal window with some command or keyboard shortcut? cls doesn’t work; it only hides the text.

2,067 1 1 gold badge 15 15 silver badges 34 34 bronze badges
asked Feb 9, 2018 at 20:26
8,248 7 7 gold badges 44 44 silver badges 47 47 bronze badges

Why is there so much repetition in the answers here? Please read what others wrote before you consider adding another answer to this.

Jun 9, 2020 at 23:03
‘ctr + L’ or ‘clear’ in console — 2022
Jan 19, 2022 at 15:28

First: That doesn’t work in VS Code — you have to restore the workbench.action.terminal.clear keybinding in current versions. (:facepalm:) @Mark Please try to be kinder, there are dozens of ways to search for something and they don’t always return good answers. I, myself, have spent days searching for something, only to discover that I was using the wrong term.

Jan 23, 2022 at 13:35

34 Answers 34

Use Ctrl + K . This goes clean your console in Visual Studio Code.

Per comments, in later versions of VSCode (1.29 and above) this shortcut is missing / needs to be created manually.

• Navigate: File > Preferences > Keyboard Shortcuts
• search for workbench.action.terminal.clear
• If it has no mapping or you wish to change the mapping, continue; otherwise note & use the existing mapping
• Double click on this entry & you’ll be prompted for a key binding. Hold CTRL and tap K . Ctrl + K should now be listed. Press enter to save this mapping
• Right click the entry and select Change when expression . Type terminalFocus then press enter.
• That’s it. Now, when the terminal is in focus and you press Ctrl + K you’ll get the behaviour you’d have expected to get from running clear / cls .

11.9k 7 7 gold badges 73 73 silver badges 111 111 bronze badges
answered Feb 9, 2018 at 20:39
Jeterson Miranda Gomes Jeterson Miranda Gomes
5,095 2 2 gold badges 14 14 silver badges 22 22 bronze badges

also don’t forget to add «when»: «terminalFocus» to the binding otherwise other bindings would not work (e.g. Ctrl+K+Enter )

Dec 1, 2018 at 11:56

To add on to what @PavelAgarkov mentioned, you can set the «when» by clicking the «keybindings.json» link in the message at the top of the keyboard shortcuts that says, «For advanced customizations open and edit keybindings.json»

Jan 9, 2019 at 20:56

@onieltelies keep in mind this will not delete your history, only clear your current screen. If you scroll up you’ll see history.

May 16, 2019 at 16:51
Works in OSX, but not in Windows. See the fuller answer below: stackoverflow.com/a/53343777/418150
Jul 29, 2019 at 8:53

update: the shortcut is saved, but it doesn’t work anymore (it clears it but the terminal show the results of the previous command)

Dec 11, 2020 at 19:39

Ctrl + Shift + P and select Terminal:clear

answered Jan 4, 2019 at 2:13
8,443 6 6 gold badges 33 33 silver badges 43 43 bronze badges
couldn’t get anything else other than this to work, thanks!
Jun 9, 2021 at 23:51

I use Windows and for some reason Ctrl+L doesn’t clear the Python session (in the integrated terminal). Normal powershell can be cleared using Ctrl+L but it just doesn’t work for Python. I associated a keybinding with this (I chose Ctrl+T Ctrl+L ) and now I can also clear the Python session. Thanks for the tip.

Jun 18, 2021 at 8:36

‘ctrl+shift+P’ clear console temporary, once you click on something else, the history back on. This answer didn’t fix it.

Sep 20, 2022 at 8:49

FOR VERSIONS AT AND ABOVE v1.32 SEE BELOW

Bindings for this command still need to be setup manually, even at v1.33.1 , which I am at. The command is there under Terminal: Clear but the binding is blank. Here is how you can setup bindings in v1.32 and up.

Open up the Keyboard Shortcuts with Ctrl + K , Ctrl + S . Then click on the <> next to the Keyboard Shortcuts tab to open up the keybindings.json file.

After doing so, find some open space anywhere in the file, and type in the key bind below.

FOR VERSIONS UP TO v1.32 SEE BELOW

This is for Visual Studio Code v1.18 up to v1.32 , I believe; I am on v1.29.1 . Since apparently there are a whole lot of assumptions about the default bindings, here is how you set up a binding, then use it. Keep in mind this binding will completely delete all of the history in your terminal too.

Open up the Keyboard Shortcuts with Ctrl + K , Ctrl + S . Once you are in Keyboard Shortcuts , click on keybindings.json in the text that says . open and edit keybindings.json . Then on the RIGHT side, in the keybindings.json , add this (make sure you put a comma before the first < if there are one or more bindings already):

Remember, the «key»: can be whatever binding you want. It doesn’t HAVE to be Ctrl + K .

To use the keybinding, you must have focus in your terminal, and then do the binding.

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

Добрый вечер, дорогие друзья. Не так давно я перешел с горяче любимого мне текстового редактора — Sublime Text 3 на новый софт. Думаю, что в скором времени, сделаю целый цикл постов по поводу нового редактора кода.

Мой выбор пал, на уже широко известный редактор кода — Visual Studio Code.

В этом посте хочу зафиксировать для себя (и вас) горячие клавиши. Таким образом эта инфа будет под рукой и не потеряется на компе или в закладках.

Итак представляю вашему вниманию переведенный и сгруппированный вариант горячих клавиш, для редактора кода — Visual Studio Code.

Перевод делался с использованием гугл-транслейтера, если по какому-то пункту у вас появятся вопросы, прошу писать их в комментариях к посту ��

Все сочетания горячих клавиш для редактора Visual Studio Code сгруппированы по функциональному признаку и изложены в виде таблиц.

Общие

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

Навигация

Поиск и замена

Мульти-курсор и выбор

Редактирование языков

Управление редактором

Управление файлами

Экран

Отлаживать код (debug)

Встроенный терминал

Создание и очистка проектов и решений в Visual Studio

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

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

Этот раздел относится к Visual Studio в Windows. Информацию о Visual Studio для Mac см. в статье Создание и очистка проектов и решений в Visual Studio для Mac.

Пользовательский интерфейс в вашем выпуске Visual Studio может отличаться от приведенного в этом разделе в зависимости от ваших текущих параметров. Чтобы изменить параметры, например на Общие или Visual C++, выберите Сервис>Импорт и экспорт параметров, а затем щелкните Сбросить все параметры.

Сборка, перестроение или очистка всего решения

1. В обозревателе решений откройте решение или выберите нужное решение.
2. В строке меню выберите Сборка, а затем одну из следующих команд.
3. Выберите Собрать или Собрать решение либо нажмите клавиши CTRL+SHIFT+B, чтобы скомпилировать только те файлы и компоненты проекта, которые были изменены с момента последней сборки.

Примечание. Если решение содержит несколько проектов, команда Собрать меняется на Собрать решение.

Сборка или перестроение одного проекта

1. В обозревателе решений выберите или откройте решение.
2. В строке меню выберите Сборка, а затем выберите либо Собратьимя_проекта, либо Перестроитьимя_проекта.
   • Выберите Собратьимя_проекта, чтобы собрать только те компоненты проекта, которые были изменены с момента последней сборки.
   • Выберите ПерестроитьИмя_проекта, чтобы очистить проект, а затем выполнить сборку файлов проекта и всех его компонентов.

Сборка только запускаемого проекта и его зависимостей

1. В строке меню выберите Сервис>Параметры.
2. В диалоговом окне Параметры разверните узел Проекты и решения и выберите страницу Сборка и запуск. Откроется диалоговое окно Сборка и запуск>Проекты и решения>Параметры.
3. Установите флажок При выполнении построить только запускаемые проекты и зависимости. При выборе этого поля проверка только текущий проект запуска и его зависимости создаются при выборе параметра «Запуск отладки» (F5) или «Запуск отладки>> без отладки» (CTRL+F5). При выборе решения сборки> (CTRL+SHIFT+B) создается все решение. После очистки этого поля проверка все проекты, их зависимости и файлы решения создаются при выполнении любой из предыдущих команд.

Сборка только выбранного проекта Visual C++

Выберите проект C++, а затем в строке меню выберите Сборка>Только проект и одну из следующих команд:

Эти команды применяются только к выбранному проекту C++ без сборки, перестроения, очистки или связывания зависимостей проектов и файлов решения. В зависимости от используемой версии Visual Studio подменю Только проект может содержать дополнительные команды.

Компиляция нескольких элементов проекта C++

В Обозреватель решений выберите несколько файлов, которые можно скомпилировать, откройте контекстное меню для одного из этих файлов, а затем нажмите кнопку «Компиляция» или нажмите клавиши CTRL+F7.

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

Остановка сборки

Выполните одно из следующих действий.

Связанный контент

• Практическое руководство. Просмотр, сохранение и настройка файлов журнала сборки
• Получение журналов сборки
• Компилирование и сборка
• Общие сведения о конфигурациях сборки
• Практическое руководство. Настройка конфигураций отладки и выпуска
• Справочные сведения о сборке C/C++
• Параметры командной строки для команды devenv
• Проекты и решения
• Создание и очистка проектов и решений (Visual Studio для Mac)

Руководство. Отладка консольного приложения .NET с помощью Visual Studio Code

В этом учебнике представлены средства отладки, доступные в Visual Studio Code для работы с приложениями .NET.

Необходимые компоненты

• В этом учебнике используется консольное приложение, созданное в руководстве Создание консольного приложения .NET в Visual Studio Code.

Использование конфигурации отладочной сборки

В .NET используются две встроенные конфигурации сборки — Отладка и Выпуск. Вы воспользуетесь отладочной конфигурацией сборки для отладки и конфигурацией для выпуска для окончательного выпуска программы.

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

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

1. Запустите Visual Studio Code.
2. Откройте папку проекта, созданную по инструкциям из статьи Создание консольного приложения .NET в Visual Studio Code.

Установка точки останова

Точка останова приостанавливает выполнение приложения на инструкции, предшествующей той строке, в которой установлена точка останова.

1. Откройте файл Program.cs.
2. Установите точку останова в строке, где отображается имя, дата и время, щелкнув в левом поле окна кода. Левое поле находится слева от номеров строк. Или нажмите клавишу F9 либо выберите в меню пункт Запуск>Перейти к следующей точке останова при выбранной строке кода. Красная точка в левом поле обозначает строку с точкой останова Visual Studio Code.

Настройка входных данных терминала

Точка останова находится после вызова метода Console.ReadLine . Консоль отладки не принимает входные данные терминала для выполняющейся программы. Чтобы использовать выходные данные терминала во время отладки, можно использовать встроенный терминал (одно из окон Visual Studio Code) или внешний терминал. В этом учебнике используется встроенный терминал.

1. Папка проекта содержит папку VSCODE . Откройте файл launch.json, который находится в папке VSCODE.
2. В файле launch.json измените console параметр с internalConsole integratedTerminal :

"console": "integratedTerminal", 

Запуск отладки

1. Откройте окно отладки, щелкнув значок «Отладка» в меню слева.
2. Щелкните зеленую стрелку в верхней части панели рядом с элементом .NET Core Launch (console) (Запуск .NET Core (консоль)). Еще один способ запуска программы в режиме отладки — нажать клавишу F5 или выбрать в меню пункт Запуск>Начать отладку.
3. Перейдите на вкладку «Терминал «, чтобы просмотреть запрос «Что такое ваше имя?», который отображается в программе перед ожиданием ответа.
4. Введите строку в окне Терминал в ответ на запрос имени, а затем нажмите клавишу ВВОД . Выполнение программы остановится, когда будет достигнута точка останова, то есть перед выполнением метода Console.WriteLine . В разделе Локальные окна Переменные отображаются значения переменных, которые определены в текущем выполняемом методе.

Использование консоли отладки

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

1. Выберите вкладку Консоль отладки.
2. Введите name = «Gracie» в запросе в нижней части окна Консоль отладки и нажмите клавишу ВВОД .
3. Введите currentDate = DateTime.Parse(«2019-11-16T17:25:00Z»).ToUniversalTime() в нижней части окна Консоль отладки и нажмите клавишу ВВОД . В окне Переменные отображаются новые значения переменных name и currentDate .
4. Продолжите выполнение программы, нажав кнопку Продолжить на панели инструментов. Еще один способ продолжить — нажать клавишу F5 .
5. Снова выберите вкладку Терминал. Значения, отображаемые в окне консоли, соответствуют изменениям, произведенным в окне Консоль отладки.
6. Нажмите любую клавишу, чтобы выйти из приложения и остановить отладку.

Установка условной точки останова

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

1. Щелкните правой кнопкой мыши красную точку, обозначающую точку останова (или щелкните ее, удерживая нажатой клавишу CTRL в macOS). В контекстном меню выберите Изменить точку останова, чтобы открыть диалоговое окно, в котором можно ввести условное выражение.
2. Выберите Expression в раскрывающемся списке, введите следующее условное выражение и нажмите клавишу ВВОД .

String.IsNullOrEmpty(name) 

При каждом достижении точки останова отладчик вызывает метод String.IsNullOrEmpty(name) и останавливается на этой строке только в том случае, если вызов метода возвращает true . Вместо условного выражения можно указать количество обращений (выполнение программы будет прервано, пока инструкция не будет выполнена указанное количество раз) или условие фильтра (выполнение программы будет прервано на основе таких атрибутов, как идентификатор потока, имя процесса или имя потока).

name == String.Empty 

Пошаговое выполнение программы

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

1. Установите точку останова на открывающей фигурной скобке метода Main .
2. Нажмите клавишу F5 , чтобы запустить отладку. Visual Studio Code выделит строку точки останова. На этом этапе в окне Переменные показано, что массив args пуст, а name и currentDate имеют значения по умолчанию.
3. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Будет выделена следующая строка.
4. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio Code выполняет Console.WriteLine для запроса имени и выделяет следующую строку выполнения. Следующая строка — это Console.ReadLine для name . Окно «Переменные » не изменяется, а вкладка «Терминал » отображает запрос «Что такое ваше имя?».
5. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio выделит назначение переменной name . В окне Переменные видно, что name по-прежнему null .
6. Ответьте на этот запрос, введя строку на вкладке «Терминал» и нажав клавишу ВВОД . На вкладке Терминал может не отображаться введенная строка, однако метод Console.ReadLine будет записывать входные данные.
7. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio Code выделит назначение переменной currentDate . В окне Переменные отображается значение, полученное в результате вызова метода Console.ReadLine. На вкладке Терминал также отображается строка, указанная в командной строке.
8. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . В окне Переменные отображается значение переменной currentDate , которому было присвоено свойство DateTime.Now.
9. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio Code вызывает метод Console.WriteLine(String, Object, Object). В окне консоли отображается форматированная строка.
10. Выберите Запуск>Шаг с выходом или нажмите клавиши SHIFT + F11 .
11. Выберите вкладку Терминал. В окне терминала отобразится сообщение «Нажмите любую клавишу, чтобы выйти. «
12. Нажмите любую клавишу для выхода из программы.

Использование конфигурации сборки для выпуска

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

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

dotnet run --configuration Release 

Дополнительные ресурсы

• Debugging in Visual Studio Code (Отладка в Visual Studio Code)

Следующие шаги

В этом учебнике вы использовали средства отладки Visual Studio Code. В следующем руководстве вы опубликуете развертываемую версию приложения.

How can I clear the terminal in Visual Studio Code?

I need to clean the contents of the terminal in Visual Studio Code. Every time I use Maven, the output of the terminal is attached to the previous build, which is confusing me. How do I clear the terminal window with some command or keyboard shortcut? cls doesn’t work; it only hides the text.

2,067 1 1 gold badge 15 15 silver badges 34 34 bronze badges
asked Feb 9, 2018 at 20:26
8,258 7 7 gold badges 44 44 silver badges 47 47 bronze badges

Why is there so much repetition in the answers here? Please read what others wrote before you consider adding another answer to this.

Jun 9, 2020 at 23:03
‘ctr + L’ or ‘clear’ in console — 2022
Jan 19, 2022 at 15:28

First: That doesn’t work in VS Code — you have to restore the workbench.action.terminal.clear keybinding in current versions. (:facepalm:) @Mark Please try to be kinder, there are dozens of ways to search for something and they don’t always return good answers. I, myself, have spent days searching for something, only to discover that I was using the wrong term.

Jan 23, 2022 at 13:35

34 Answers 34

Use Ctrl + K . This goes clean your console in Visual Studio Code.

Per comments, in later versions of VSCode (1.29 and above) this shortcut is missing / needs to be created manually.

• Navigate: File > Preferences > Keyboard Shortcuts
• search for workbench.action.terminal.clear
• If it has no mapping or you wish to change the mapping, continue; otherwise note & use the existing mapping
• Double click on this entry & you’ll be prompted for a key binding. Hold CTRL and tap K . Ctrl + K should now be listed. Press enter to save this mapping
• Right click the entry and select Change when expression . Type terminalFocus then press enter.
• That’s it. Now, when the terminal is in focus and you press Ctrl + K you’ll get the behaviour you’d have expected to get from running clear / cls .

11.9k 7 7 gold badges 73 73 silver badges 111 111 bronze badges
answered Feb 9, 2018 at 20:39
Jeterson Miranda Gomes Jeterson Miranda Gomes
5,095 2 2 gold badges 14 14 silver badges 22 22 bronze badges

also don’t forget to add «when»: «terminalFocus» to the binding otherwise other bindings would not work (e.g. Ctrl+K+Enter )

Dec 1, 2018 at 11:56

To add on to what @PavelAgarkov mentioned, you can set the «when» by clicking the «keybindings.json» link in the message at the top of the keyboard shortcuts that says, «For advanced customizations open and edit keybindings.json»

Jan 9, 2019 at 20:56

@onieltelies keep in mind this will not delete your history, only clear your current screen. If you scroll up you’ll see history.

May 16, 2019 at 16:51
Works in OSX, but not in Windows. See the fuller answer below: stackoverflow.com/a/53343777/418150
Jul 29, 2019 at 8:53

update: the shortcut is saved, but it doesn’t work anymore (it clears it but the terminal show the results of the previous command)

Dec 11, 2020 at 19:39

Ctrl + Shift + P and select Terminal:clear

answered Jan 4, 2019 at 2:13
8,443 6 6 gold badges 33 33 silver badges 43 43 bronze badges
couldn’t get anything else other than this to work, thanks!
Jun 9, 2021 at 23:51

I use Windows and for some reason Ctrl+L doesn’t clear the Python session (in the integrated terminal). Normal powershell can be cleared using Ctrl+L but it just doesn’t work for Python. I associated a keybinding with this (I chose Ctrl+T Ctrl+L ) and now I can also clear the Python session. Thanks for the tip.

Jun 18, 2021 at 8:36

‘ctrl+shift+P’ clear console temporary, once you click on something else, the history back on. This answer didn’t fix it.

Sep 20, 2022 at 8:49

FOR VERSIONS AT AND ABOVE v1.32 SEE BELOW

Bindings for this command still need to be setup manually, even at v1.33.1 , which I am at. The command is there under Terminal: Clear but the binding is blank. Here is how you can setup bindings in v1.32 and up.

Open up the Keyboard Shortcuts with Ctrl + K , Ctrl + S . Then click on the <> next to the Keyboard Shortcuts tab to open up the keybindings.json file.

After doing so, find some open space anywhere in the file, and type in the key bind below.

FOR VERSIONS UP TO v1.32 SEE BELOW

This is for Visual Studio Code v1.18 up to v1.32 , I believe; I am on v1.29.1 . Since apparently there are a whole lot of assumptions about the default bindings, here is how you set up a binding, then use it. Keep in mind this binding will completely delete all of the history in your terminal too.

Open up the Keyboard Shortcuts with Ctrl + K , Ctrl + S . Once you are in Keyboard Shortcuts , click on keybindings.json in the text that says . open and edit keybindings.json . Then on the RIGHT side, in the keybindings.json , add this (make sure you put a comma before the first < if there are one or more bindings already):

Remember, the «key»: can be whatever binding you want. It doesn’t HAVE to be Ctrl + K .

To use the keybinding, you must have focus in your terminal, and then do the binding.

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

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

Создать структуру документа

Это сочетание клавиш за секунду создаёт базовую структуру кода или вложенные теги.

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

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

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

Windows — Ctrl + G

macOS — Control + G

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

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

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

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

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

Windows Shift + Alt + ↓ / ↑

macOS Shift + Option + ↓ / ↑

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

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

Windows Ctrl + Shift + \

macOS Shift + Command + \

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

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

Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a , b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2 .

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

Windows — Shift + Alt + F

macOS Shift + Option + F

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

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

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

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

Windows — Alt + Z

macOS Option + Z

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

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

Windows — Ctrl + KZ

macOS — Command + KZ

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

�� Больше статей о фронтенде и работе в айти в телеграм-канале.

Материалы по теме

• 10 лучших тем для VS Code
• 34 инструмента для веб-разработчика на каждый день
• 10 полезных плагинов VS Code для вёрстки
• 17 плагинов для JavaScript в VS Code
• Обзор редакторов кода

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Dev Mode в Figma. Быстрый обзор бета-версии

Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.

Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.

Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.

• 10 августа 2023

Горячие клавиши Figma для быстрой работы

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

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

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

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

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

А если не пользуетесь — попробуйте.

• 7 августа 2023

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

• 2 августа 2023

Инструменты для работы со шрифтами

Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.

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

• 29 июня 2023

10 лучших тем для VS Code

VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.

• 11 июня 2023

10 полезных плагинов VS Code для вёрстки

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

Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.

• 9 июня 2023

17 полезных плагинов JavaScript в VS Code

Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.

Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.

• 6 июня 2023

Подборка микроанимаций для фронтенда с CodePen в 2023

⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.

• 12 апреля 2023

Как собрать проект на Webpack

Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.

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

• 7 апреля 2023

Webpack: инструкция по применению

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

Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование плагина CopyWebpackPlugin . Рассмотрим подробнее, как это делать.

CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию. Для начала установите CopyWebpackPlugin в свой проект:

npm install copy-webpack-plugin --save-dev 

После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:

const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); module.exports = < // ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: path.resolve(__dirname, 'src/assets'), to: path.resolve(__dirname, 'dist/assets') >] >) ] >; 

В плагине содержится массив объектов patterns . Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.

Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.

�� Научитесь работать с webpack и сократите время на разработку, сборку и тестирование проекта.

Копирование нескольких файлов

Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns .

Каждый объект-шаблон содержит свойство from , оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.

const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = < //ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: 'src/images', to: 'dist/images' >, < from: 'src/index.html', to: 'dist' >, ], >), ], >; 

В примере первый объект-шаблон копирует каталог images из src в dist/images , а второй — копирует файл index.html из src в dist . Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.

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

Другие способы

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

Лоадер file-loader позволяет копировать статические файлы в указанную папку при сборке проекта. Чтобы использовать file-loader , установите его с помощью npm :

npm install file-loader --save-dev 

Затем добавьте его в конфигурационный файл webpack.config.js :

module.exports = < // . ваша конфигурация webpack . module: < rules: [ < test: /\.(png|jpe?g|gif)$/i, use: [ < loader: 'file-loader', options: < name: '[name].[ext]', outputPath: 'images/', >, >, ], >, ], >, >; 

В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.

Лоадер url-loader работает аналогично file-loader , но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.

Для использования url-loader необходимо его установить:

npm install url-loader --save-dev 

Затем добавить в конфигурационный файл webpack.config.js :

module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, use: [ < loader: 'url-loader', options: < limit: 8192, >, >, ], >, ], >, >; 

Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images . Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.

Описанные лоадеры ещё используются в разработке, но рекомендуем ознакомиться с новой версией Webpack и её обновлениями.

• 30 марта 2023