Раскраска пары скобок, тег автоматического закрытия и многое другое

В этой статье я представлю несколько действительно интересных расширений Visual Studio Code.

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

Вот как установить расширение VS Code

  • Откройте свой код Visual Studio.
  • Нажмите отмеченную кнопку на панели слева.
  • Введите имя расширения, которое вы ищете, в поле «Расширения поиска».
  • Теперь вы можете выбрать один из результатов и установить его.

1. Раскраска для пар скобок

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

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

Чтобы избежать этого и сохранить обзор, существует расширение Bracket Pair Colorizer, которое выделяет цветом скобки, которые принадлежат друг другу.

Чтобы получить это тоже, вам просто нужно установить расширение, настройка полностью необязательна.

2. Автоматическое закрытие тега

На первый взгляд это может быть просто расширение для тех, кто работает с HTML, но автоматическое закрытие работает для всех тегов с типичным синтаксисом <XML></XML>.
Неважно, в XML ли это, JSX или даже Vue.js файлы.

Итак, это расширение действительно экономит много времени, и все должны знать о нем, а может быть, вы уже знаете о нем.

3. Автоматическое переименование тега

Еще одно уже довольно известное расширение, которое используется аналогично только что упомянутому. Это также экономит много времени, потому что мы можем легко редактировать связанные теги одновременно.

Это расширение также работает с JSX, Vue, XML и многими другими.

Особенно в сочетании с Auto Tag Closer, он очень эффективен, когда мы что-то вводим неправильно, а теперь обе части тега неверны.

4. Стоимость импорта

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

Вот почему Стоимость импорта действительно удобна для обзора. Это классное расширение даже различает фактический размер файла и размер после сжатия с помощью gzip.

5. Синхронизация настроек

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

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

Да, настройка немного сложнее, но если вы ее переместите, вы действительно сэкономите много времени и нервов.

Отблагодаришь позже!

6. Команды для отображения на сенсорной панели

Извините, но этот предназначен только для тех, у кого есть MacBook Pro с TouchBar, но он все еще настолько удобен, что я должен вам показать. К счастью, многие разработчики используют MacBook Pro в качестве рабочего инструмента.

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

7. Компоненты в стиле Vscode

Styled-components действительно практичны. Единственный недостаток заключается в том, что вам нужно писать псевдокод CSS в обратных кавычках (``), который по умолчанию VS Code интерпретирует только как строку, поэтому, например, не выполняется цветовое кодирование.

Это выглядит так:

Это не делает работу со стилизованными компонентами очень приятной. Но vscode-styled-components предоставляет средство защиты и делает код таким:

8. Live Share

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

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

Есть также много других интересных функций, таких как голосовой чат и совместное использование терминала.

Если вы хотите узнать больше, вы можете посетить официальный сайт.

Спасибо за прочтение!