полезные комбинации и плагины vscode. Комбинации и плагиныvscode. F1 или Ctrl Shift P
 Скачать 50.92 Kb.
|
|
Полезные комбинации клавиш F1 или Ctrl + Shift + P – Показать все команды Shift + Alt + F – Комбинация для авто-исправления кодстайла (Лучше с расширением Prettier) Ctrl + Z – Отмена только что совершенного действия Alt + / - Передвижение курсора с помощью клавиатуры без использования мышки (Только с расширением MetaGo) Ctrl + / - Закомментировать или раскомментировать строку Ctrl + J – Открыть терминал Ctrl + K + Ctrl + S – Существующие сочетания клавиш Ctrl + Shift + 8 – Разделить редактор Ctrl + P – Поиск Ctrl + R – Недавно открытые рабочие пространства Ctrl + N – Создать новый файл Ctrl + G – Переход на строку Ctrl + F – Ведите искомое-высветятся все найденные места Alt + Z - переключение режима переноса по словам Alt + ↑/↓ - Переместить строку вверх или вниз Alt + ←/→ - Перемещение далее назад Ctrl + X – Вырезать F2 – Переименовать файл Ctrl + Shift + O – Перемещение по тэгам Ctrl + , - Параметры Если зажать Alt и кликать туда, куда нужно добавить курсор – размножение курсора Наводишь курсор на название идентификатора/класса в файле HTML, затем зажимаешь Ctrl и щелчок (либо щелчок на название затем нажимаем F12 – Перейти к идентификатору(id)/классу(class) из файла html в файл css) (Только с расширением CSS Navigation) Shift+Alt+T – Переводит текст (Только с расширением vscode google translator) Shift+Alt+U – Сохраняет все настройки и плагины из vscode в GitHub (Только с расширением Settings Sync) Ctrl + Space – все возможные вставки (emmet, snippets, id/class) Alt + W - Обертывает выделенный фрагмент тэгами HTML (Нужно настраивать) Ctrl + W/Alt+F4 – закрывает окно Home/end – в начало/конец Полезные расширения Auto Rename Tag – При редактировании тега автоматически редактирует закрывающийся тег Auto Close Tag – при написании тега автоматически добавляет закрывающий тег Bookmarks – Закладки Bracket Pair Colorizer – Открывающиеся и закрывающиеся фигурная скобка разного цвета Indent-Rainbow - добавляет цвета к вашим отступам, что делает читаемость еще лучше EditorConfig for VS Code – какая то фигня нужная для .editorconfig CSS Navigation – Перейти к идентификатору(id)/классу(class) из файла html в файл css. Наводишь курсор на название идентификатора/класса в файле HTML, затем зажимаешь Ctrl и щелчок (либо щелчок на название затем нажимаем F12) Как вывод нас перемещает уже в файл CSS к тому самому идентификатору/классу. Также расширение связывает наши файлы стилей с другими файлами. Во-первых, он будет подсказывать нам об имеющихся классах наших файлов стилей. Например, мы создадим класс red. Когда мы пишем нашу разметку html, мы хотим здесь написать класс. Начинаем писать r и у нас сразу появляется подсказка, что такой класс есть, и мы можем с ним работать. HTMLHint – Производит статичный анализ кода. Подсвечивает ошибки. Space Ocean Kit Refined; Gruvbox Material Soft; Material Theme – цветовые темы Better Comments – комментирование  eCSStractor for VSCode - Плагин, который помогает копировать классы из html в css\scss\sass. Установим его и сразу создадим сочетания клавиш, чтобы делать все быстро. Заходим в сочетания клавиш(ctrl+k+ctrl+s) в поиске набираем eCSStractor, в данном случае нам нужно два значения “eCSStractor Run (With BEM Nesting)” и “eCSStractor Run” (один с BEM другой без) назначаем им удобные для нас клавиши и пользуемся *Про BEM - https://habr.com/ru/post/203440/ Image Preview – подключаем картинку, после мы видим на полях появилась ее маленькая иконка. Vscode Google Translate – переводит текст на клавишу Shift+Alt+T Settings Sync – Он сохранить все настройки из vscode в GitHub и при сохранении (на клавишу Shift+Alt+U) мы получаем все настройки и плагины буквально за один клик. Google Fonts – шрифты из гугла, заходим в сочетания клавиш (Ctrl+K+Ctrl+S) затем набираем google fonts назначаем клавиши. Ставим нужный шрифт пользуемся. Например:  Live Server – локальный сервер, который позволяет видеть ваш сайт в живую MetaGo – передвижение курсора с помощью клавиатуры без использования мышки (alt+/ и тд (нужно настраивать)) htmltagwrap – Обертывает выделенный фрагмент тэгами HTML (Alt + W) Нужно настраивать. Highlight Matching Tag – Подсвечивает закрывающий или открывающий тег. ______ ESLint – статически анализирует код для быстрого поиска проблем, которые может автоматически скорректировать. (для JavaScript) BEM Helper - Это помощник при работе с методологией BEM. Он умеет вставлять сразу новый элемент по методологии bem, учитывая родителя, учитывая блок. Может вставлять модификатор, помимо всего умеет формировать файл стилей, будь-то css или scss файл на основе bem-разметки в html коде. /alt+b s/alt+b e/alt+b m/ Guides, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, ftp-simple, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart no jQuery Snippets, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, GitLens — Git supercharged, Kite |