16 лучших расширений VS Code для веб-разработчиков

Microsoft Visual Studio Code (VS Code) - один из лучших редакторов кода для разработчиков программного обеспечения. С момента выпуска его популярность резко возросла не только из-за стабильной платформы, которую он предоставляет, но и из-за того, что Microsoft встроила в него расширяемость. Торговая площадка расширений - это рог изобилия надстроек и функций, которые позволяют разработчикам настраивать VS Code в среду разработки своей мечты. Мы хотим разбить некоторые из лучших расширений VS Code, доступных сегодня, чтобы вы не пропустили ни одного.

1. Sublime Text Keymap и импортер настроек

Первое место в нашем списке занимает Sublime Text Keymap and Settings Importer. В случае, если заголовок не был достаточно описательным, это расширение позволяет вам использовать существующие таблицы клавиш и настройки Sublime Text, чтобы вы могли легко перейти на использование VS Code по умолчанию. Поскольку так много людей любят Sublime и потратили на это годы, заставлять VS Code сохранять заработанную мышечную память из этого редактора имеет большой смысл.

2. Фрагменты кода JavaScript (ES6)

Ввод JavaScript (или любого другого кода) может стать громоздким, если вы повторяете одни и те же фрагменты снова и снова. Это расширение помогает решить эту проблему, позволяя вам писать ярлыки для часто используемых фрагментов кода. При запуске сниппет просто заменяет текст и вставляет прямо в документ.

3. Раскраска пара скобок 2

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

4. ESLint

Во многих отношениях ESLint является ЛИНТЕР для JavaScript. Выявление ошибок и немедленная обратная связь и предупреждения необходимы для поддержания чистоты кода вашей команды, и на самом деле нет лучшего способа сделать это в JS, чем ESLint. Мы настоятельно рекомендуем установить его как можно скорее.

5. Менеджер проекта

Проблема с VS Code, которая возникает довольно часто, заключается в том, как переключаться между разными проектами. По умолчанию поток не совсем интуитивно понятный. Таким образом, Project Manager работает над решением этой проблемы, предоставляя вам меню на боковой панели, которое вы можете использовать для сохранения различных папок и проектов Git, чтобы легко переключаться между ними. Это не столько улучшение редактора, сколько улучшение качества жизни.

6. Предварительный просмотр в браузере

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

7. Красивее

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

8. gitlink

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

9. Лучшие комментарии

Комментирование кода - одна из важнейших привычек разработчика. Более того, хорошее комментирование кода - это навык, которому следует обучать в каждом классе информатики и во всех учебных курсах по программированию. Тем не менее, Better Comments - это одно из тех расширений VS Code, которые нужны каждому, потому что, если вы верите в название, позволит вам оставлять лучшие комментарии в вашем коде. Благодаря сочетаниям клавиш, которые позволяют различать вопросы, восклицания, закомментированный код, запросы, предупреждения, основные моменты и TODO, это расширение не только упростит вам жизнь, но и упростит жизнь вашей команде. И любой разработчик, который придет после вас в проект. Мы не можем рекомендовать это достаточно.

10. Значки кода VS

Основная часть настройки VS Code с расширениями - это фактическая настройка. Не только функциональные изменения. С помощью значков VS Code редактор становится немного красочнее, и в нем легче ориентироваться. Файловая система покрыта значками, представляющими различные типы файлов, которые отображаются в проводнике, а также на самих вкладках документов. Это значительно упрощает работу со сложными файловыми системами и избавляет от головной боли. Буквально иногда. Легко читаемые значки предотвращают утомление глаз и, как следствие, головную боль. Так что для вашего здоровья установите VS Code Icons.

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

Может быть, это мы, но ввод закрывающих тегов для любого языка становится такой рутинной работой. Есть что-то в добавлении этого / in в конце, что заставляет нажатия клавиш чувствовать себя немного не так. Не бойся. Auto Close Tag сделал нашу жизнь проще. Поэтому мы хотим упростить вам задачу. Это просто и легко, и вы можете продолжать печатать между ними и просто нажимать клавиши, чтобы перейти к следующей строке или к ее концу. Установите его и дайте пальцам отдохнуть от гимнастики закрытия ярлыков вручную.

12. раскрасить

CSS великолепен. Выбор цветов в CSS - нет. Когда вы имеете дело с шестнадцатеричными кодами и значениями RGBA, иногда сложно представить себе, какую палитру вы установили для сайта. Это расширение помогает облегчить это, предоставляя визуальную заметку для любых цветовых кодов, которые вы используете в своих файлах. Вы можете видеть цвета, которые вы используете внутри самого текста, как выделение, чтобы вам не приходилось постоянно переключаться между образцами, селекторами цветов и т. Д.

13. Полакод

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

14. GitLens

Трудно полностью объяснить, что делает GitLens таким замечательным. Он работает так, как будто Git и VS Code были разработаны с учетом друг друга, и вместо работы с иерархиями командной строки вы получаете визуализации и идеи, которые устраняют путаницу из командной работы с Git. Вы можете просматривать вещи с помощью наведения, видеть последние изменения и аннотации, сравнительные представления в самом VS Code, тепловые карты, историю строк и многое другое. По сути, это идеальное расширение для Git, и мы думаем, что вам следует установить его немедленно.

15. Живой сервер

Вы когда-нибудь хотели запустить локальный сервер разработки из среды IDE и работать на нем в режиме реального времени? Независимо от того, как вы ответили на этот вопрос, вы захотите попробовать Live Server. Потому что это именно то, что вы можете с ним делать. Хотя это может не полностью устранить потребность в таких продуктах, как Local by Flywheel и MAMP, во многих ситуациях это, безусловно, сокращает их потребность.

16. Украсить

Beautify использует популярный js-beautify, чтобы ваш JavaScript выглядел красиво и аккуратно. Не беспокойтесь о ломаных линиях, странных интервалах и отступах. Просто нажмите кнопку, и весь ваш код будет готов к просмотру крупным планом (возможно, с помощью Polacode сверху).

Заключение

Этот список может включать тысячи пунктов. Фактически, у некоторых из вас, вероятно, установлены сотни различных расширений, которые вы включаете и отключаете в разное время. Но мы чувствуем, что это расширения VS Code, которые вы можете установить, а затем узнать, что еще вы хотите, по мере углубления в рынок.

Какие расширения VS Code вы предпочитаете? Дайте нам знать об этом в комментариях!

Статья Лучшее изображение: SVIATLANA SHEINA / shutterstock.com