Любитель VSCODE? Я знаю, что расширения — это наша жизненная поддержка кодирования. И если вы веб -разработчик, вам везет. Ниже приведены некоторые полезные расширения/конфигурации, которые сделают вас пораженными после изучения их использования и преимуществ
Это всего лишь небольшое описание расширений, так что не ожидайте полных подробностей здесь. Вы можете узнать больше информации о расширениях из их соответствующих документов/репозитории
Кстати, все кредиты для изображений и гифкеров, встроенных ниже, идет к их соответствующим авторам расширения
1. Visual Studio Intellicode
Вы знаете о Tabnine, но знаете ли вы, что Microsoft уже предоставляет инструмент автоматического заполнения с AI? Visual Studio Itellicode-это инструмент автозаполнения с AI, для рабочего процесса разработки с AI. Это действительно легкий и не требует дополнительной времени выполнения, как и другие инструменты автозаполнения. Он использует облачные сервисы Microsoft Azure для обработки информации вместо локального компьютера
2. Html Tag wrap wrap
Вы можете обернуть кусок кода с вьющимися скобками/скобками/кавычками просто просто. Но это не работает для тегов HTML. Вы должны вручную написать теги открытия/закрытия.
Но vScode имеет встроенное расширение Emmet. Используя это, вы можете сделать так много вещей и даже обернуть его с помощью HTML -тега
Вот как это сделать
- Выберите контент, который вы хотите обернуть
- Тип
Ctrl+shift+pЗатем найдите «Emmet: Оберните с аббревиатурой» - Выберите первый и введите имя тега HTML, например,
дивизион
Точнее, вы можете установить пользовательский ярлык для команды, настраивая карты клавиш, используя Ctrl+k+s ярлык. Просто установите желаемое связывание ключей, например, Ctrl+k+shift+w Для команды «Emmet: обернуть с аббревиатурой». Убедитесь, что ваше желаемое связывание клавиш не используется для других команд или это может удалить функциональность этой команды
3. Обернуть консоль
Устал от ручного написания console.log () & Префикс с этикетками для определения журнала консоли, исходящего из какого файла? Что ж, это расширение дает вам сверхдержаву, чтобы написать полную консоль.
Он поддерживает префиксы строки, динамические (вы набираете) префиксы или вообще нет префиксов
4. Документировать это
Это JavaScript/TypeScript JSDOC Generator. Вместо того, чтобы вручную писать комментарии/структуры DOC JavaScript, вы можете внедрить предварительно настраиваемую структуру JSDOC с простой командой/ярлыком
5. Шаблон строкового преобразователя
Это действительно раздражает конвертировать обычную строку в шаблонные строки, когда вы сможете войти в эту строку. Вот где шаблон-стронг-конвертер делает жизнь
6. ES7 React/Redux/React-National/JS Snippets
JavaScript и React/Redux фрагменты в ES7+ с функциями плагина Babel для кода VS
Ваша компонент React/React-родной-это только один фрагмент благодаря этому удивительному расширению фрагмента. Он предлагает все прохладные фрагменты для генерации кода шаблона для компонентов Redux & React. Также предлагает новые связанные с синтаксисом ES7 фрагменты. Экономит много времени при создании компонентов React. Он также поддерживает TypeScript
7. Draw.io Integration
Поклонник популярного приложения диаграммы Diagrams.net (Ранее известный как draw.io )? Что ж, вам не нужно устанавливать какое -либо приложение/посещать веб -сайт для создания/редактирования/открытия диаграмм. Вы можете сделать это в VSCODE. Поскольку Draw.io находится на основе Web & VSCODE на верхней части электрона, поэтому его можно легко запускать внутри VSCODE. Он также поддерживает совместное редактирование
8. Ошибка объектива
Устали от зависания над переменной/именами функции/экземпляров, чтобы прочитать сообщение об ошибке? Ну, ошибка линза сохраняет вас. Вместо того, чтобы показывать информацию об ошибке на пахни, это показало бы ее справа от происходящей ошибки места
9. Путь Intellisense
Самое экономное расширение, которое я когда-либо находил. Это автозаполняет пути на строках на основе относительного пути. Также показывает каждый файл/папку с соответствующим значком (также работает со значками сторонних лиц). Работает с любым языком/файлом
10. Отменить радугу
Смещение действительно сбивает с толку, и хотя это ничего особенного Но это всегда стесняется, поэтому это расширение исправляет все это цветами
11. Todo Tree
Трудно найти комментарии Тодо в проекте. Иногда я обнаруживал, что я обнаружил, что через 1/2 месяца после написания. Vscode Todo Tree помогает вам найти и ориентироваться в всех комментариях, начиная с Тодо: пункт. Он работает для всех языков программирования
12. Intellisense для имен классов CSS в HTML
Эти расширения AutoCopletes локально объявлены имена классов CSS в файлах HTML & HTML (JSX, Vue, Pug и т. Д.)
13. Стилизованные компоненты
Поддержка CSS в JS (CSS -синтаксис выделение/автозаполнение). Хотя он создан для Стилидированные компоненты библиотека Но это хорошо работает с другими библиотеками, если они используют струнные литералы для объявления стилей. Работает только с функциями, названными как Styleled. , `styleled \` \ & CSS \ «
14.: eMojisense:
Автозаполнение для смайликов в коде VS. Удивительно, но это работает и в поле «Комментарий» в вкладке Git Integration. Это означает, что вы тоже можете совершить смайлики. Комментирование с помощью смайликов делает комментарий более описательным, и это расширение облегчает его
15. Кодовая проверка орфографии
Основная проверка орфографии, которая хорошо работает с кодом Camelcase. Удивительное расширение обязательного использования, чтобы сохранить ваш код удобный и безопасный от опечаток. Вы даже можете создать свою собственную библиотеку слов, сохранив неизвестные, но правильные слова. Также предоставляет предложения
16. Цвет
Это стили расширения CSS/веб -цвета, найденные в любом файле. Чрезвычайно полезен для разработчиков фронта
17. Автопродажа тег
Обычно переименовать/изменять теги HTML. Но это тратит впустую много времени. С тегом автоматической переименования вы можете легко отредактировать как запуск, так и заканчивая теги, редактируя только один из них.
После обновления VSCODE 1.60 появилась новая функция под названием Редакция Linked-Editing Это может заменить использование случая этого расширения. Но вы должны вручную активировать режим с помощью ярлыка или командного поддона, где это расширение просто работает. Но, как всегда, это ваш выбор, что вы хотите использовать
18. Инструменты SQL
Хотите запустить простые запросы/вставки/обновление/удалить? Зачем всегда открывать заявку на администрирование БД? Требуется время и ресурсы для запуска. Также ранит опыт разработчика. Но инструменты VSCODE SQL решают эту проблему. Простые и легкие операторы SQL могут легко работать против любой базы данных SQL. Просто установите расширение драйвера, и все готово. Он даже поддерживает автозаполнение для в настоящее время подключенной базы данных
19. MongoDB для VS -кода
Так же, как SQLTools, но для nosql mongodb
20. Предварительный просмотр корпуса
Полное расширение жизни. Только взрослые мужчины/женщины знают боль в создании корпуса, так как нет способа узнать, сработает ли она до тех пор, пока она не запустит. Но это расширение позволяет человеку создавать регуляцию, интерактивно и супер быстро. Просто напишите регулярность в своем файле и напишите слова/предложения, которые вы хотите сопоставить с этим режимом.
Это все люди. Надеюсь, вам это понравится, и вы не будьте несчастными, если вы используете расширения 30-40+. Как разработчик, я могу гарантировать, что расширения — это наша жизненная поддержка ^
Оригинал: «https://dev.to/krtirtho/vscode-extensions-that-you-need-webdevs-2pkp»