Любитель VSCode? Я знаю, что расширения - это наша жизненная поддержка для программирования. А если вы веб-разработчик, вам очень повезло. Ниже приведены некоторые полезные расширения / конфигурации, которые удивят вас после изучения их вариантов использования и преимуществ.

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

Кстати, все права на изображения и GIF-файлы, встроенные ниже, принадлежат их соответствующим авторам расширений

1. Visual Studio IntelliCode

Вы знаете о Tabnine, но знаете ли вы, что Microsoft уже предоставляет инструмент автозаполнения на базе искусственного интеллекта? Visual Studio Itellicode - это инструмент автозаполнения на базе ИИ для рабочего процесса разработки с использованием ИИ. Он действительно легкий и не требует дополнительного времени выполнения, как другие инструменты автозаполнения. Он использует облачные сервисы Microsoft Azure для обработки информации вместо локального компьютера.

2. Сокращение переноса тегов HTML (Emmet)

Вы можете очень просто заключить фрагмент кода в фигурные скобки / скобки / кавычки. Но это не работает с тегами HTML. Вы должны вручную написать открывающий / закрывающий теги.

Но у VSCode есть встроенное расширение emmet. Используя это, вы можете сделать так много всего и даже обернуть его тегом HTML.

Вот как это сделать

  1. выберите контент, который хотите обернуть
  2. Введите CTRL+SHIFT+p и выполните поиск "Эммет: Перенос с сокращением".
  3. Выберите первый и введите имя тега HTML, например div

Точнее, вы можете установить собственный ярлык для команды настройки раскладки клавиш, используя CTRL+k+s ярлык. Просто установите желаемую привязку клавиш, например CTRL+k+SHIFT+w для команды Emmet: Wrap with Abbreviation. Убедитесь, что желаемая привязка клавиш не используется для других команд, иначе функциональность этой команды может быть потеряна.

3. Обернуть консоль

Устали вручную писать console.log() & префиксы с метками, чтобы идентифицировать журнал консоли, из какого файла? Что ж, это расширение дает вам суперсилу писать полный журнал console.log с помощью одного ярлыка.

Он поддерживает строковые префиксы, динамические (вводимые вами) префиксы или вообще не поддерживает префиксы.

4. Документируйте это

Это генератор JSDoc JavaScript / Typescript. Вместо того, чтобы писать комментарии / структуры документа javascript вручную, вы можете ввести предварительно созданную настраиваемую структуру JSDoc с помощью простой команды / ярлыка

5. Конвертер строк шаблона

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

6. ES7 React / Redux / React-Native / фрагменты JS

Фрагменты JavaScript и React / Redux в ES7 + с функциями плагина Babel для VS Code

Ваш компонент React / React-Native - это только один способ сниппета благодаря этому замечательному расширению сниппета. Он предлагает все классные фрагменты для генерации стандартного кода для компонентов redux и response. Также предлагает новые фрагменты, связанные с синтаксисом ES7. Экономит время при создании реагирующих компонентов. Он также поддерживает Typescript

7. Интеграция Draw.io

Любите популярное приложение для диаграмм diagrams.net (ранее известное как draw.io)? Что ж, вам не нужно устанавливать какое-либо приложение / посещать веб-сайт для создания / редактирования / открытия диаграмм. Вы можете сделать это в VSCode. Поскольку draw.io является веб-интерфейсом, и vscode работает поверх Electron, его можно легко запустить внутри VSCode. Он также поддерживает совместное редактирование

8. Ошибка линзы

Устали наводить курсор мыши на имена переменных / функций / экземпляров, чтобы прочитать сообщение об ошибке? Что ж, ошибка-линза вас спасает. Вместо отображения информации об ошибке при наведении курсора она будет отображаться справа от места возникновения ошибки.

9. Путь Intellisense

Самое экономное расширение, которое я когда-либо находил. Он автоматически заполняет пути в строках на основе относительного пути. Также показывает каждый файл / папку с соответствующим значком (работает и со сторонними значками). Работает с любым языком / файлом

10 . Отступ радуги

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

11 . Дерево Тодо

В проекте сложно найти комментарии TODO. Иногда я находил определенные Todos через полмесяца после написания😅. VSCode Todo Tree помогает находить и перемещаться по всем комментариям, начинающимся с предложения TODO:. Работает для всех языков программирования.

12. IntelliSense для имен классов CSS в HTML

Эти расширения автоматически дополняют локально объявленные имена классов CSS в HTML и HTML, например в файлах (JSX, Vue, pug и т. Д.)

13. Стилизованные компоненты

Поддержка CSS в JS (подсветка синтаксиса CSS / автозаполнение). Несмотря на то, что он создан для styled-components библиотеки, он хорошо работает с другими библиотеками, если они используют строковые литералы для объявления стилей. Работает только с функциями типа styled.<html-tagname>\`,styled``&css``

14. : emojisense:

Автозаполнение смайлов в VS Code. Удивительно, но это работает и в поле для комментариев на вкладке интеграции Git. Это означает, что вы также можете использовать смайлики. Комментирование с помощью смайлов делает комментарий более информативным, а это расширение упрощает его

15. Проверка орфографии кода

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

16. Подсветка цвета

Это расширение стилизует CSS / веб-цвета, которые можно найти в любом файле. Чрезвычайно полезно для разработчиков интерфейса

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

Обычно HTML-теги переименовываются / изменяются. Но на это уходит много времени. С помощью тега автоматического переименования вы можете легко редактировать как начальные, так и конечные теги, редактируя только один из них.

После обновления VSCode 1.60 появилась новая функция под названием связанное редактирование, которая может заменить вариант использования этого расширения. Но вы должны вручную активировать режим с помощью ярлыка или панели команд, где это расширение просто работает. Но, как всегда, выбор за вами.

18. Инструменты SQL

Хотите выполнять простые запросы / вставки / обновления / удаления? Почему всегда нужно открывать приложение администрирования БД? Запуск требует времени и ресурсов. Также вредит опыту разработчиков. Но VSCode SQL Tools решает эту проблему. Простые и легкие операторы SQL можно легко запустить с любой базой данных SQL. Просто установите расширение драйвера, и все готово. Он даже поддерживает автозаполнение для текущей подключенной базы данных.

19. MongoDB для VS Code

Как SQLTools, но для NoSQL MongoDB

20. Средство просмотра регулярных выражений

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

Это все, ребята. Надеюсь, вам понравится, и не расстраивайтесь, если вы используете более 30–40 расширений. Как разработчик, я могу гарантировать, что расширения - это наша поддержка жизни🙂