Основные горячие клавиши
Hotkeys VS Code
Основные команды:
- F11 - полноэкранный режим
- ctrl + sh + p - по сути основное меню редактора - показать все команды
- ctrl + o - открыть файл
- ctrl + k ctrl + o - открыть папку
- ctrl + r - открыть список последних директорий
- ctrl + k ctrl + s - открыть список всех горячих клавиш
- ctrl + , - перейти в параметры программы (настройки)
- ctrl + ` - вызов терминала
- ctrl + g - открыть консоль
Панель действий:
- ctrl + sh + e - перейти в explorer
- ctrl + sh + f - поиск в explorer по проекту, файлам
- ctrl + sh + g - управление исходным кодом (git)
- ctrl + sh + d - запуск и отладка
- ctrl + sh + x - управление расширениями
- ctrl + sh + m - просмотр ошибок и проблем (левый нижний угол)
- ctrl + b - показать или скрыть панель действий
Область редактора:
- сtrl + 0 - перейти в explorer
- сtrl + 1 - перейти в первый (левый) сплит
- сtrl + 2 - перейти во второй (правый) сплит
- ctrl + tab - переход по открытым файлам в сплите
- ctrl + w - закрыть файл в сплите
- ctrl + f - локальный поиск по открытому файлу (также есть возможность замены!)
- alt + z - перенос строк кода (чтобы не было гор. прокрутки)
Строки:
- alt + [up, down] - передвинуть строчку вверх/вниз
- ctrl + alt + up - копировать строчку вверх
- ctrl + alt + down - копировать строчку вниз
- ctrl + sh + k - удалить строчку целиком
- sh + [up, down] - выделение строк кода вверх/вниз
Текст:
- ctrl + / - обернуть выделенный код в комментарий
- ctrl + alt + w - обернуть выделенную область текста в тег
- sh + ctrl + [left, right] - выделение слова целиков влево/вправо
- ctrl + d - выделить далее по документу аналогичный кусок кода (или слово)
Курсор:
- ctrl + mouse click - мультикурсор
Работа с проектом:
- ctrl + p - открывается командная панель по проекту (открывает список с недавно открытыми файлами, а так же позволяет перейти в любой файл проекта). В ней при помощи символа @ можно переходить сразу к сущностям языка (переменные, функции, классы - работает в JS и CSS). Например: @var - найдет эту переменную в JS файле.
Форматирование документа:
- ctrl + sh + i - документ будет внешне отформатирован
Советы
- Rename Refactoring - Выделяешь переменную, жмешь F2 и можешь вводить новое название переменной - замена будет сделана по всему файлу, работает в СSS и JS
- Shift + Ctrl + L - на выделенном тексте/слове - расставляет курсоры по совпадению выделенного текста или последнего слова перед курсором
- Расширение CSS peek - в файле html выделяешь нужный класс и жмешь F12, сразу перемещаешься в css файл на свойства этого класса
- ctrl + space - включить подсказки JS intellisense
Расширения
- Live Sass Compiler - компилятор scss в css
- Scss IntelliSense - автоподсказки по синтаксису scss
- Scss Formatter - форматер для файлов scss
- CSS Navigation - подстановка классов и айди из CSS в HTML по табу (связка файлов), а также перемещение из HTML по нажатию F12 в нужную строку CSS файла прямо на нужный селектор
- Live Server - локальный сервер для разработки
- Auto Complete tag - авторенейм + автокомплит (синяя иконка)
- Bracket Pair Colorizer - цветное обозначение вложенных скобок
- Indent-rainbow - окраска отступов (табов)
- BEM Helper - вставка элементов и модификаторов
- eCSStractor for VSCode - перенос классов из html в css файл
- ImagePreview - превью картинки, а при наведении на адрес открывается всплывашка
Сниппеты
Команда => ctrl + sh + p => >snippets => javascript.json
"Console Log": {
"prefix": "log",
"body": "console.log($1)",
"description": "Вывести в консоль."
}Теперь в файле JS можно писать log, жать клавишу tab и на курсор окажется на метке "$1".
Hotkeys Kubuntu 20.04
Основные:
- meta + l - блокировка экрана
- alt + пробел - показать строку поиска сверху экрана (kRunner)
- ctrl + esc - показать активность системы (системный монитор)
- ctrl + alt + shift + pgDw - выключить комп без подтверждения
- ctrl + alt + t - запустить terminal
- ctrl + z - выход из прогаммы
Dolphin:
- meta + e - открыть Dolphin (⌂)
- shift + del - удалить МИМО КОРЗИНЫ
- alt + enter - показать свойства файлов
- F2 - переименовать
- F3 - разделить на сплиты
- F10 - создать новую папку
Поведение внутри активного окна:
- alt + щелчок левой кн. мыши - перемещение окна
- alt + щелчок правой кн. мыши - изменить размер окна
Окна на одном раб. столе:
- alt + tab - переключение окон
- meta + alt + стр. влево - переключиться на окно слева
- meta + alt + стр. вправо - переключиться на окно справа
- meta + стр. вверх - распахнуть на весь экран (вернуть обратно)
- meta + стр. влево - распахнуть на левую половину экрана
- meta + стр. вправо - hаспахнуть на правую половину экрана
Рабочие столы:
- meta + tab - переключение раб. столов
- ctrl + num[0/1/2/3] - переключиться на раб. стол
- ctrl + meta + num[0/1/2/3] - перекинуть окно на раб. стол
- meta + "+" - увеличить масштаб раб. стола (к курсору)
- meta + "-" - уменьшить масштаб раб. стола
Видео по редактору VS Code
YouTube канал Владилена Минина
- 21:26, 22:04 - emmet (при помощи кнопки tab)
- 25:33 - просмотр подсказок (зажимаешь ctrl, чтобы видеть подсказки)
- 31:30 - табсайз
- 36:00 - про перенос текста word wrap + cursor style + multicursor(по ctrl)
- 37:00 - exclude - то, что исключает редактор (расширения файлов, папки), можно удалять и добавлять папки
- 44:30 - outline слева снизу
- 49:10 - про внутренний markdown
- 58:00 - prettier форматирование кода
YouTube канал Евгения Андриканича
- 11:25 - убрать лишнее из проводника
- 26:00 - про пробелы и табуляцию
- 27:00 - про подсказки при наведении
- 28:32 - про закрытие сплитов
- 29:33 - автоформатирование документа
- 38:40 - настройка sass компилятора (расширения)
- 50:00 - замена сочетаний клавиш для расширения
- 51:00 - eCSStractor
- 59:00 - связка проекта с репом гитхаба
- 61:00 - синхронизация настроек Settings Sync