Приемы vs code, которые ускоряют разработку
15 июля 2023 г.
Все команды, которые указаны, для Windows.
Snippets
Добавить сниппеты можно не используя никаких расширений.
Переходите File > Preferences (Code > Preferences on macOS) выбирайте Configure User Snippets. Затем можно создать новый файл или выбрать уже готовый.
Файлы написаны в формате JSON, в них можно указывать неограниченное количество сниппетов.
Пример добавления сниппета React.useReducer:
1{2 "my React.useReducer snippet": {3 "prefix": "rsr",4 "isFileTemplate": true,5 "body": [6 "const initialState = {",7 " //$1",8 "}",9 "",10 "function reducer(state = initialState, action) {",11 " switch (action.type) {",12 " default:",13 " return state",14 " }",15 "}",16 "",17 "function MyComponent() {",18 " const [state, dispatch] = React.useReducer(reducer, initialState)",19 " ",20 " return <div />",21 "}"22 ]23 }24}
Где
“my React.useReducer snippet” - название сниппета,
prefix - команда запуска (чтобы использовать сниппет, нужно ввести rsr),
body - код, который будет вставлен в документ.
Также можно добавить description - указать описание сниппета.
В примере
1{2 "For Loop": {3 "prefix": ["for", "for-const"],4 "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],5 "description": "A for loop."6 },7}
Есть три плэйсхолдера ${1:array}, ${2:element}, и $0. между которыми можно переключаться с помощью Tab. Строка после : это дефолтный текст.
Порядок заполнения восходящий от 1, 0 - необязательный и всегда идет последним.
Более подробно можно изучить здесь User Snippets.
Форматирование
Prettier
Документация: https://prettier.io/
Быстро форматировать код можно с помощью расширения vs code prettier.
Чтобы настроить конфигурацию файла нужно перейти на страницу плагина, в его настройки.
Команда Shift + Alt + F.
Комбинации клавиш для форматирования:
Объединение строки:
Если необходимо строки кода соединить в одну строку.
Windows - необходимо настроить.
Зайдите в File -> Preferences -> Keyboard shortcuts и в строке поиска введите editor.action.join, должна найтись строка join line.
Быстрое сворачивание блоков кода
Ctrl + Shift + [
Быстрое разворачивание блоков кода
Ctrl + Shift + ]
Сдвинуть код влево
Ctrl + [
Сдвинуть код вправо
Ctrl + ]
Создание элементов
Все указанные варианты можно сочетать друг с другом
Создать элемент и указать название класса
имя элемента + точка + класс + enter
Пример: div.container
Создать элемент и c пустым классом
имя элемента + точка + enter
Пример: div.
Создать элемент с детьми
название элемента + > + название дочернего элемента
Пример div>p
Создать несколько одинаковых элементов
элемент + * + количество элементов
Пример p*2
Дополнительные полезные сочетания клавиш
Скопировать строку вверх
Shift + Alt + стрелка вверх
Скопировать строку вниз
Shift + Option + стрелка вниз
Выделить слово
Ctrl + d
Чтобы выделить несколько таких же слов, нужно нажать это сочетание клавиш столько раз , сколько нужно выделить слов.
Перейти к определенной строке
Нужно открыть поле поиска через ctrl + g и ввести номер строки
Переход к символу
Ctrl + Shift + o
Удаление предыдущего слова
Ctrl + backspace
Выделение слов
Ctrl + Shift + стрелка вправо / влево
Удаление строки
Ctrl + x
Добавление курсора сверху
Ctrl + Alt + стрелка вверх
Добавление курсора снизу
Ctrl + Alt + стрелка вниз
Переименование
F2
Посмотреть список команд в vs code
Ctrl+Shift+P, F1
Открыть палитру поиска
Ctrl+P
Большой список горячих клавиш
https://webcomplex.com.ua/shpargalki/goryachie-klavishi-visual-studio-code.html
Источники:
https://techrocks.ru/2019/11/08/20-vs-code-shortcuts/