Как сделать много курсоров vs code

Обновлено: 03.07.2024

Каковы сочетания клавиш для создания нескольких курсоров в VS-коде?

Я не могу найти способ комментировать и раскомментировать несколько строк кода в Visual Studio Code . Можно ли комментировать и раскомментировать несколько строк в Visual Studio Code с помощью какого-то ярлыка? Если да, то как это сделать?

согласно документации здесь , я могу добавить несколько курсоров в visual studio code, используя alt+Click в Редакторе. К сожалению, alt+drag уже используется оконным менеджером для перемещения окна, поэтому visual-studio-code не получает никаких ключевых событий. Так как же мне изменить эту.

Нажмите Alt и нажмите кнопку. Это работает на Windows и Linux*,, и это должно работать и на Mac.

Дополнительные функции с несколькими курсорами теперь доступны в Visual Studio Code 0.2:

Улучшения с несколькими курсорами
Ctrl+D ( Cmd+D на Mac) выбирает следующее вхождение слова под курсором или текущего выделения
Ctrl+K Ctrl+D перемещает последний добавленный курсор к следующему вхождению слова под курсором или текущего выделения
По умолчанию команды используют matchCase. Если виджет "Найти" открыт, то настройки виджета "Найти" (matchCase / matchWholeWord) будут использоваться для определения следующего вхождения
Ctrl+U ( Cmd+U на Mac) отменяет последнее действие курсора, поэтому, если вы добавили слишком много курсоров или допустили ошибку, вы можете нажать Ctrl+U ( Cmd+U на Mac), чтобы вернуться в предыдущее состояние курсора. Добавление курсора вверх или вниз ( Ctrl+Alt+Up / Ctrl+Alt+Down ) ( Cmd+Alt+Up / Cmd+Alt+Down на Mac) теперь показывает последний добавленный курсор, чтобы упростить работу с несколькими курсорами на более чем 1 высоте видового экрана одновременно (т. е. выберите 300 строк, и только 80 поместятся в окне просмотра).

Это значительно упрощает введение нескольких курсоров

* Linux конфликт перетаскивания окна:

Некоторые дистрибутивы (например , Ubuntu) назначают перетаскивание окна Alt+LeftMouse , что будет конфликтовать с VSCode.

Таким образом, последние версии VSCode позволяют переключаться между Alt+LeftMouse и Ctrl+LeftMouse в меню выбора, как описано в другом ответе .

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

Многословный:

• Ctrl+Shift+L / ⌘+Shift+L выбирает все экземпляры текущего выделенного слова
• Ctrl+D / ⌘+D выбирает следующий экземпляр. и еще один после этого. и так далее.

Многострочный:

Для многострочного выбора Ctrl+Alt+Down / ⌘+Alt+Shift+Down расширит ваш выбор или положение курсора до следующей строки. Ctrl+Right / ⌘+Right переместится в конец каждой строки, независимо от ее длины. Чтобы избежать многострочного выбора, нажмите Esc .

Нам всегда нужно комментировать несколько строк кода во время программирования. В visual studio code я хочу знать, как комментировать несколько строк?

Май 2017 года
По состоянию на версию 1.13 Добавьте несколько курсоров с помощью Ctrl / Cmd + Click

VSCode разработчики ввели новую настройку editor.multiCursorModifier , чтобы изменить ключ-модификатор для применения нескольких курсоров на Cmd + Click на macOS и Ctrl + Click на Windows и Linux. Это позволяет пользователям из других редакторов, таких как Sublime Text или Atom, продолжать использовать модификатор клавиатуры, с которым они знакомы.

Эта настройка может быть установлена на:

• ctrl/Cmd - Карты на Ctrl на Windows и Cmd на macOS.
• alt - Существующее значение по умолчанию Alt .

Существует также новый пункт меню Использовать Ctrl + Click для Multi-Cursor в меню Selection , чтобы быстро переключить этот параметр.

Жесты Перейти к определению и Открыть ссылку также будут учитывать эту настройку и адаптироваться таким образом, чтобы они не конфликтовали. Например, если параметр ctrl/Cmd , можно добавить несколько курсоров с помощью Ctrl / Cmd + Click , и открытие ссылок или переход к определению могут быть вызваны с помощью Alt + Click .

У меня была проблема с ключом ALT, исправление состоит в том, чтобы изменить alt+click как горячую клавишу Gnome, которая блокирует выбор нескольких курсоров в VSCode, на super+click , запустив:

Попробуй Ctrl + Alt + Shift + ⬇ / ⬆ , без мыши, или удерживайте "alt" и нажмите на все строки, которые вы хотите.

Примечание : Проверено на Windows.

Cmd + Option + Shift ⬇ / ⬆ работает для меня на новейшем VSCode 1.29.1 и новейшем OSX High Sierra 10.13.6, Macbook Pro.

Это добавляет вертикальную линию вверх/вниз на экране, как это делает перетаскивание Option +Click/Vertical в Sublime Text.

Чтобы добавить несколько курсоров в любой точке файла , включая несколько курсоров в одной строке , нажмите Cmd (or Option) +в любом месте, как показано в этом видео . Вы также можете выполнить поиск текста ( Cmd +F), который повторяется несколько раз, затем нажмите Option + Return , чтобы добавить курсоры в конце слова EACH.

На Ubuntu , чтобы включить щелчок несколькими курсорами, вам нужно будет сначала назначить Alt+click, выполнив команду ниже. Это связано с тем, что по умолчанию Ubuntu использует сам ярлык и имеет приоритет.

На XFCE перейдите на Applications -> Settings -> Settings editor - > xfwm4 -> easy_click(disable value)

Теперь вы можете Insert Cursor с Alt + Нажать

Я также отключил рабочее пространство L/R ( ctrl + alt + L/R ) настройки в Settings -> Window manager -> Keyboard

Начиная с версии Visual Studio Code 0.10.9, теперь вы можете создать несколько курсоров из выбранных строк , выбрав несколько строк и нажав Shift+Alt+I

Примечание: Это похоже на функциональность Ctrl+Shift+L Sublime Text.

Нет никакой привязки именно к тому, что вы хотите.

Единственное, что близко, - это Ctrl + F2 , которые будут выбирать их все сразу.

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

• Нажмите на File > Preferences > Keyboard Shortcuts
  Вы должны увидеть панель, полную текущих привязок, а справа-список пользовательских привязок
• В текущих привязках найдите Ctrl + F2 , скопируйте всю эту строку и вставьте ее в правую панель.
• Возможно, вам придется удалить запятую в конце, а затем изменить Ctrl + F2 на Ctrl + D , а затем сохранить файл.

Это должно выглядеть примерно так:

Ctrl + Alt + ⬇ / ⬆ добавьте курсоры выше и ниже текущей строки. Тем не менее, все еще далеко не так хорошо, как sublime или скобки. Я не вижу ничего эквивалентного Ctrl + D в sublime в файле сочетаний клавиш.

Новая версия (Visual Studio 0.3.0) поддерживает больше функций с несколькими курсорами.

И короткий отрезок изменения курсора select multi на cmd + d(это то же самое, что и Sublime Text. лол)

Мы можем ожидать, что следующая версия будет поддерживать более удобную функцию с несколькими курсорами ;)

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

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

Боковую панель в VS Code можно открывать и закрывать без нажатия клавишей мыши на левую боковую вкладку с помощью следующих хоткеев:

• Mac — CMD + B
• Windows — Ctrl + B
• Ubuntu — Ctrl + B

Особенно полезно при нахождении в режиме разделенного редактора.

2. Выбрать слово

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

• Mac — CMD + D
• Windows — Ctrl + D
• Ubuntu — Ctrl +D

При повторном нажатии сочетания клавиш к выделению добавится еще одно вхождение того же слова далее по тексту.

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

Полезно, если нужно сравнить несколько файлов.

• Mac — CMD + \ или 2,3,4
• Windows — Shift + Alt + \ или 2,3,4
• Ubuntu — Shift + Alt + \ или 2, 3, 4

4. Свернуть блоки кода

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

• свернуть самую внутреннюю несвернутую область под курсором:
  • Mac — CMD + Option + [
  • Windows/Ubuntu — Ctrl + Shift + [
  • Mac — CMD + Option + ]
  • Windows/Ubuntu — Ctrl + Shift + ]

  Если нужно скопировать текущую строку в строку выше или ниже, нажмите:

  • Mac — Shift + Option + Up/Down
  • Windows — Shift + Alt + Up/Down
  • Ubuntu — Ctrl + Alt + Up/Down

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

  Позволяет выровнять код в соответствии с заранее прописанными настройками редактора. Вот как это сделать.

  • Mac — Shift + Option + F
  • Windows — Shift + Alt + F
  • Ubuntu — Ctrl + Shift + I

  7. Обрезать множественные конечные пробелы

  Позволяет избавиться от пробелов в начале или конце строки.

  Для автоматической обрезки пробелов, можно изменить свойства VS Code. Для этого:

  Пройдите в P references > Settings > User Setting Tab и добавьте новый параметр “files.trimTrailingWhitespace : true” в документы User Settings. После сохранения файла пробелы будут удаляться автоматически.

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

  Позволяет объединить выделенные строки в одну линию.

  • Mac — Ctrl + J
  • Ubuntu/Windows — откройте существующие сочетания клавиш: File > Preferences > Keyboard shortcuts и назначьте удобное сочетание клавиш для editor.action.joinLines .

  9. Быстрое открытие файла

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

  Открывает доступ ко всем доступным командам.

  • Mac — CMD + Shift + P
  • Windows/Ubuntu — Ctrl + Shift + P

  11. Переключить терминал

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

  12. Переключить вкладки

  Позволяет переключать между разделами, которые вы разделили.

  • Mac — CMD + 1, CMD + 2, CMD + 3
  • Windows/Ubuntu — Ctrl + 1, Ctrl + 2, Ctrl + 3

  13. Перейти на строку

  С помощью этого сочетания клавиш можно перейти на строку, на которой стоит курсор.

  
  

  14. Удалить строку

  Чтобы удалить строку, нажмите следующее сочетание клавиш:

  • Mac — CMD + Shift + K
  • Windows/Ubuntu — Ctrl + Shift + K

  15. Переместить строку

  Для перемещения строки в VS Code используются следующие хоткеи:

  • Mac — Option + Up/Down arrow
  • Windows/Ubuntu — Alt + Up/Down arrow

  16. Найти слово/фразу

  Чтобы найти в текущем файле нажмите:

  Чтобы искать по проекту:

  • Mac — CMD + Shift + F
  • Windows/Ubuntu — Ctrl + Shift + F

  17. Показать определение

  Функция Peel Definition позволяет просматривать и редактировать исходный код нужного символа.

  • Mac — Option + F12
  • Windows/Ubuntu — Alt + F12

  
  

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

  Позволяет переименовать переменную. Очень полезный хоткей для рефакторинга.

  19. Выбор нескольких курсоров

  VS Code поддерживает функцию нескольких курсоров для быстрого одновременного редактирования. Чтобы их добавить нажмите:

  • Mac — Option + Клик левой кнопкой мыши
  • Windows/Ubuntu — Alt + Клик левой кнопкой мыши

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

  В VS Code дублирование строки выполняется с помощью следующих сочетаний клавиш:

  
  

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

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

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

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

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

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

  Предпосылки

  Чтобы следовать этому руководству, вы должны владеть хотя бы одним языком программирования и фреймворком. Вы также должны быть знакомы с системой контроля версией git. Вам также необходимо иметь учетную запись на платформе удаленного хранилища, такой как GitHub. Я рекомендую вам настроить SSH Keys для подключения к вашему удаленному репозиторию.

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

  Немного истории

  Если вы новичок в программировании, я рекомендую вам начать с простого текстового редактора, такого как Windows NotePad. Это самый простой текстовый редактор, который не предлагает никакой помощи. Основным преимуществом его использования является то, что он заставляет вас запоминать синтаксис языка и делать свои собственные отступы. Как только вы освоитесь с написанием кода, следующим логическим шагом будет обновление до более качественного текстового редактора, такого как NotePad++ . Он предлагает немного важной помощи при кодировании с такими функциями, как раскраска синтаксиса, автоматическое отступление и базовое автозаполнение. При обучении программированию важно не перегружаться информацией и помощью.

  Как только вы привыкли к лучшему опыту написания кода, пришло время обновиться. Не так давно это были полностью интегрированные среды разработки:

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

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

  Разработчики Mac имели доступ к TextMate, который был выпущен в октябре 2004 года. Система фрагментов кода, используемая всеми вышеперечисленными редакторами, была основана на TextMate. Воспользовавшись всеми из них, я почувствовал, что появившийся после этого редактор значительно улучшил текущий. Согласно опросу разработчиков, проведенному Stack OverFlow в 2019 году, Visual Studio Code является самой популярной средой разработки кода с 50,7% использования. Visual Studio IDE занимает второе место, а NotePad++ - третье.

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

  Настройка и обновления

  Установщик пакета кода Visual Studio занимает менее 100 МБ и потребляет менее 200 МБ при полной установке. Когда вы посещаете страницу загрузки, ваша ОС будет автоматически обнаружена, и будет выделена правильная ссылка для загрузки.

  Обновление VS Code очень просто. Он отображает уведомление при каждом выпуске обновления. Пользователям Windows необходимо щелкнуть уведомление, чтобы загрузить и установить последнюю версию. Процесс загрузки происходит в фоновом режиме, пока вы работаете. Когда он будет готов к установке, появится запрос на перезагрузку. Нажав на это, вы установите обновление и перезапустите VS Code.

  Для дистрибутивов на основе Ubuntu, нажав на уведомление об обновлении, вы просто откроете веб-сайт, на котором вы сможете загрузить последнюю версию установщика. Гораздо проще - просто выполните sudo apt update && sudo apt upgrade -y . Это обновит все установленные пакеты Linux, включая Visual Studio Code. Причина этого заключается в том, что VS Code добавил репо в реестр репозитория при первоначальной установке. Вы можете найти информацию о репо по этому пути: /etc/apt/sources.list.d/vscode.list .

  Пользовательский интерфейс

  Давайте сначала познакомимся с пользовательским интерфейсом:

  
  

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

  1. Activity Bar: позволяет переключаться между представлениями: проводник, поиск, контроль версий, отладка и расширения.
  2. Side Bar: содержит активный вид.
  3. Editor: здесь вы можете редактировать файлы и просматривать файлы уценки. Вы можете расположить несколько открытых файлов рядом.
  4. Panel: отображает различные панели: встроенный терминал, панели вывода для отладочной информации, ошибок и предупреждений.
  5. Status: отображает информацию о текущем открытом проекте и файле. Также содержит кнопки для выполнения действий по управлению версиями, а также для включения / отключения функций расширения.

  Также есть верхняя строка меню, где вы можете получить доступ к системе меню редактора. Для пользователей Linux встроенным терминалом по умолчанию, вероятно, будет оболочка Bash. Для пользователей Windows это PowerShell. К счастью, внутри выпадающего списка терминала находится селектор оболочки, который позволит вам выбрать другую оболочку. Если установлено, вы можете выбрать любой из следующих:

  1. Command Prompt
  2. PowerShell
  3. PowerShell Core
  4. Git Bash
  5. WSL Bash

  Работа с проектами

  В отличие от полноценных IDE, Visual Studio Code не обеспечивает создание проектов и не предлагает шаблоны проектов традиционным способом. Он просто работает с папками. На моей машине для разработки Linux я использую следующий шаблон папок для хранения и управления своими проектами:

  Если вы хотите создать новый проект и открыть его в VS Code, вы можете использовать следующие шаги. Откройте терминал и выполните следующие команды:

  Вы также можете сделать это в проводнике. При доступе к контекстному меню мыши вы сможете открыть любую папку в VS Code.

  Если вы хотите создать новый проект, связанный с удаленным репо, проще создать его на сайте - например, GitHub или BitBucket.

  
  

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

  Как только редактор будет запущен, вы можете запустить встроенный терминал с помощью сочетания клавиш Ctrl+~ (тильда). Используйте следующие команды для генерации package.json и установки пакетов:

  Затем откройте package.json и замените раздел scripts следующим:

  Окно кода Visual Studio должно выглядеть следующим образом:

  
  

  Прежде чем мы рассмотрим следующий раздел, я хотел бы упомянуть, что VS Code также поддерживает концепцию многокорневых рабочих пространств. Если вы работаете со связанными проектами - front-end, back-end, docs и т.д. - вы можете управлять ими в одном рабочем пространстве в одном редакторе. Это облегчит синхронизацию вашего исходного кода и документации.

  Контроль версий с помощью Git

  
  

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

  
  

  Проверьте следующие расширения для еще лучшего опыта работы с Git:

  Поддержка другого типа SCM, такого как SVN, может быть добавлена ​​путем установки соответствующего расширения SCM с рынка.

  Создание и запуск кода

  
  

  Настройки пользователя и рабочей области

  Чтобы получить доступ к настройкам параметров VS Code, используйте сочетание клавиш Ctrl+, . Вы также можете получить к нему доступ через команду меню следующим образом:

  1. В Windows / Linux - File > Preferences > Settings
  2. В macOS - Code > Preferences > Settings

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

  
  

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

  Параметры кода Visual Studio подразделяются на две разные области:

  1. Настройки пользователя: настройки хранятся под учетной записью пользователя. Они будут действовать на все проекты, над которыми вы работаете.
  2. Рабочая область: настройки хранятся в папке проекта или рабочей области. Они будут применяться только в этом конкретном проекте.

  В зависимости от вашей платформы вы можете найти пользовательские настройки VS Code в следующих местах:

  1. Windows: %APPDATA%\Code\User\settings.json
  2. macOS: $HOME/Library/Application Support/Code/User/settings.json
  3. Linux: $HOME/.config/Code/User/settings.json

  Для Workspace просто создайте папку .vscode в корне вашего проекта. Затем создайте файл settings.json внутри этой папки. Если вы работаете с панелью редактора настроек, она сделает это автоматически, когда вы измените настройки в области рабочего пространства. Вот подмножество глобальных настроек, с которыми я предпочитаю работать:

  Я склонен работать с несколькими проектами одновременно, поэтому настройка window.openFoldersInNewWindow позволяет открывать новые папки проектов, не закрывая (не заменяя) активную. Для editor.defaultFormatter , я поставил Prettier, который является расширением. Далее давайте посмотрим на языковые ассоциации.

  Ассоциация языков

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

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

  До сих пор мы рассмотрели два сочетания клавиш:

  1. Ctrl + , : Открыть настройки
  2. Ctrl + Shift + P : Открыть командную строку

  Command Palette обеспечивает доступ ко всем функциям Visual Studio Code, включая сочетание клавиш для общих операций. Если вы устанавливаете расширение, любые действия, инициируемые вручную, будут перечислены здесь. Однако для таких расширений, как Prettier и Beautify, они будут использовать одну и ту же команду Format. Visual Studio Code также имеет свой собственный встроенный модуль форматирования. Чтобы указать, какой плагин должен выполнять действие, вам нужно перейти в редактор настроек и изменить конфигурацию стандартного форматера. Вот пример того, как я установил это в моем случае:

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

  1. Ctrl + P позволит вам перейти к любому файлу или символу, набрав его имя
  2. Ctrl + Tab проведет вас по последнему набору открытых файлов
  3. Ctrl + Shift + O позволит вам перейти к определенному символу в файле
  4. Ctrl + G позволит вам перейти к определенной строке в файле

  Вот мои любимые команды, которые я часто использую при написании кода:

  1. Ctrl + D : нажмите несколько раз, чтобы выбрать одинаковые ключевые слова. Когда вы начинаете печатать, он переименовывает все выбранные ключевые слова
  2. Ctrl + Shift + Up/Down : Добавить курсор выше или ниже, чтобы редактировать несколько строк одновременно
  3. Alt + Shift + Click : Добавить курсор в нескольких местах для одновременного редактирования в разных разделах кода
  4. Ctrl + J : Добавить 2 или более строк в одну.
  5. Ctrl + F : Поиск ключевого слова в текущем файле
  6. Ctrl + H : Поиск и замена в текущем файле
  7. Ctrl + Shift + F : Поиск по всем файлам

  Если вы зайдете в меню параметров, вы найдете горячие клавиши для большинства команд. Лично я никогда не привык к некоторым сочетаниям клавиш по умолчанию, которые поставляются с Visual Studio Code из-за использования таких редакторов, как Atom, в течение длительного времени. Решением, которое я нашел, было просто установить Atom Keymap. Это позволяет мне использовать сочетание клавиш Ctrl + \ для переключения боковой панели. Если вы хотите отредактировать привязки клавиатуры самостоятельно, просто перейдите в меню File > Preferences > Keyboard Shortcuts. (Code > Preferences > Keyboard Shortcuts в macOS).

  Возможности редактора кода

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

  Intellisense

  1. JavaScript, TypeScript
  2. HTML
  3. CSS, SCSS и Less

  При вводе кода появится всплывающее окно со списком возможных вариантов. Чем больше вы печатаете, тем короче список. Вы можете нажать Enter или, Tab когда нужное ключевое слово будет выделено, для автозаполнения кода. Нажатие Esc удалит всплывающее окно. Вставка . в конце ключевого слова или нажатие Ctrl + Space приведет к появлению всплывающего окна IntelliSense.

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

  Снипеты

  Ввод повторяющегося кода, такого как операторы if , циклы for и объявление компонентов, может быть немного утомительным. Вы можете копировать и вставлять код, чтобы работать быстрее. К счастью, Visual Studio Code предлагает функцию Snippets , которая называется просто шаблонами кода. Например, вместо ввода console.log просто введите log , и IntelliSense предложит вам вставить фрагмент.

  Есть много фрагментов, к которым вы можете получить доступ, если вы запомнили сокращение или ключевое слово, которое вызывает вставку фрагмента. Поскольку вы новичок в этом, вы можете получить доступ к списку всех фрагментов, доступных через Command Palette > Insert Snippets:

  
  

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

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

  Часто при наборе или вставке кода из разных источников мы склонны смешивать стили кодирования. Например:

  1. отступ с пробелом против табов
  2. точка с запятой
  3. двойные кавычки или одинарные кавычки

  Форматирование важно, так как делает код читаемым. Однако это может занять много времени, когда вы сталкиваетесь с большими разделами неформатированного кода. К счастью, Visual Studio Code может выполнить форматирование для вас с помощью одной команды. Вы можете выполнить команду форматирования через палитру команд. Visual Studio Code поддерживает форматирование для следующих языков из коробки:

  Вы можете настроить форматирование кода Visual Studio, изменив следующие параметры на true или false :

  1. editor.formatOnType : отформатировать строку после ввода
  2. editor.formatOnSave : отформатировать файл при сохранении
  3. editor.formatOnPaste : форматировать вставленный контент

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

  1. Flow · JSX · JSON
  2. CSS · SCSS · Less
  3. Vue · Angular
  4. GraphQL · Markdown · YAML

  После установки вам нужно установить его как форматировщик по умолчанию:

  Также рекомендуется установить пакет prettier локально как зависимость dev:

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

  Linting

  Lint или ЛИНТЕР является инструментом, который анализирует код и проверяет на наличие синтаксических ошибок, проблем стилизации, вызовы на необъявленных переменных, использование устаревших функций, неправильного охвата и многие другие вопросы. Visual Studio Code не поставляется вместе с Linter. Тем не менее, это облегчает настройку для используемого вами языка программирования. Например, если вы работаете над новым проектом Python, вы получите приглашение установить его для вас. Вы также можете открыть панель команд ( Ctrl+ Shift+ P ) и выбрать команду Python: Select Linter.

  Для JavaScript вам нужно установить расширение, такое как ESLint, которое является самым популярным. Это расширение требует, чтобы вы установили ESLint как dev-зависимость. Вам также может понадобиться один или несколько плагинов ESLint, которые помогут вам подобрать стиль и структуру кодирования, которые вы используете.

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

  Отладка

  Если вы используете операторы print для отладки, вы должны прекратить это делать, поскольку есть лучший способ отладки вашего кода. С VS Code вы можете устанавливать точки останова и проверять переменные во время работы вашего кода.

  Читайте также:

    
  • Как сделать орхиэктомию
    
  • Как сделать родителей ответственными
    
  • Как сделать макароны золотистыми
    
  • Как сделать из флешки сервер
    
  • Как сделать индукционную плиту без импульсного режима