Сценарист: Дэвид Герберт
Visual Studio Code по-прежнему остается самой популярной IDE для современной веб-разработки из-за множества функций, но самое лучшее в VS Code — это открытый исходный код, что делает его легко расширяемым.
Он поддерживается большим сообществом разработчиков, компаний и участников, которые постоянно добавляют новые функции и утилиты для расширения его возможностей с помощью множества расширений, доступных через Visual Studio Marketplace.
Если вы обнаружите, что количество доступных расширений слишком велико, читайте дальше. В этом руководстве рассматриваются пятнадцать лучших расширений VS Code, которые каждый разработчик должен установить в своей среде разработки.
Зачем вам эти расширения?
Хотя VS Code уже является надежным редактором кода, расширения позволяют настраивать его с помощью функций, которые лучше соответствуют вашим потребностям и помогают повысить производительность.
Расширения могут помочь вам правильно форматировать код, упростить отладку, улучшить читабельность и доступность, а также создать моментальные снимки фрагментов кода, помимо других задач. Есть расширения практически для всего и вся. Проще говоря, расширения дают вам сверхспособности.
Какие типы расширений включены?
В этой статье речь пойдет о следующих типах расширений:
- Форматтеры
- Инструменты автозаполнения
- Менеджеры сниппетов
- Инструменты отслеживания кода
- Проверка орфографии
- Инструменты тайм-менеджмента
- Инструменты для совместной работы
- Общие инструменты повышения производительности
1. Раскрасить
Когда вы работаете с цветами в таблице стилей, может быть неприятно писать код или название цвета, не видя, как он выглядит.
Расширение Colorize устраняет эту проблему, выделяя фон текста точно таким же цветом, как он будет отображаться в вашем приложении.
2. Просмотр CSS
CSS Peek позволяет вам расширять файлы HTML и EJS для отображения кода CSS/SCSS/LESS в исходном коде HTML и быстро переходить к нужному коду CSS, если вы знаете имя или идентификатор класса CSS.
Это особенно полезно, когда вы хотите быстро отредактировать свой CSS из текущего исходного файла, не переходя к фактическому файлу CSS, или если вы хотите просмотреть текущий стиль, связанный с классом или идентификатором.
3. Табнин
Tabnine — это расширение на основе искусственного интеллекта для глубокого обучения, которое использует машинное обучение, чтобы помочь вам быстрее писать код за счет его автоматического завершения. Это расширение поддерживает все популярные языки и предоставляет соответствующие подсказки.
Tabnine работает на основе модели машинного обучения, которая была обучена анализу кода GitHub с открытым исходным кодом.
4 шт
Ежедневная рутина любого разработчика программного обеспечения обычно включает в себя написание большого количества кода. Наряду с этим возникает рутинная задача — писать одни и те же строки кода снова и снова.
Pieces — это расширенное расширение менеджера фрагментов кода, которое обеспечивает быстрый способ сохранения фрагментов кода, не прерывая рабочий процесс и не покидая рабочего места. Pieces также поддерживает все популярные языки программирования и интегрируется с другими платформами, что упрощает сохранение фрагментов и доступ к ним.
Сохраняя фрагменты кода, к которым можно получить доступ в любом месте и в любое время, Pieces повышает вашу производительность. Вам не придется сосредотачиваться на переписывании одного и того же кода дважды.
5. Красивее
Prettier — форматировщик кода, исправляющий неаккуратную структуру кода. Он анализирует ваш код и добавляет надлежащие правила форматирования, включая перенос кода и отступы, когда это необходимо, и обеспечивает согласованный стиль, чтобы его было легче читать.
Когда дело доходит до форматирования кода и поддержания единообразия стилей, ни одно расширение не справится с этим лучше, чем Prettier.
6. Живой сервер
С более чем 19 миллионами установок Live Server является одним из самых популярных расширений, доступных на рынке VS Code. Он позволяет запускать локальный сервер разработки с функцией перезагрузки в реальном времени для разработки как статических, так и динамических веб-страниц.
Помимо того, что вы можете тестировать свой код, он обеспечивает удаленные подключения, отладку Chrome и удобные горячие клавиши для запуска и остановки сервера, превращая ваш редактор VS Code в полноценную IDE.
7. Автоматическое переименование тега
Как следует из названия, Auto Rename Tag автоматизирует переименование или изменение тегов HTML/XML, отражая любые изменения, сделанные в открывающем теге, в соответствующем закрывающем теге.
С этим расширением вам не придется мучиться с поиском соответствующего закрывающего тега элемента при внесении изменений в открывающий тег.
8. Прямая трансляция
Live Share — это инструмент для совместной работы, который позволяет вам совместно редактировать и отлаживать код в режиме реального времени, независимо от используемого вами языка программирования. В наш век удаленной работы Live Share делает парное программирование и отладку быстрыми, простыми и доступными.
Процесс прост. Вы создаете сеанс и отправляете ссылку коллегам, чтобы они могли присоединиться к вашему сеансу. Когда они это сделают, они получат копию вашей среды и код в своем редакторе без необходимости что-либо устанавливать.
9. Павлин
Павлин позволяет вам назначать разные цвета для разных экземпляров вашего рабочего пространства VS Code.
С помощью этого расширения вы можете легко определить свой редактор, если у вас есть несколько экземпляров VS Code или когда вы используете VS Live Share или удаленные функции VS Code.
10. ВакаТайм
WakaTime поможет вам отслеживать время, которое вы тратите на каждый проект. Он автоматически генерирует метрики панели мониторинга и информацию о вашей деятельности по написанию кода, а также предоставляет вам еженедельные и ежемесячные отчеты.
WakaTime достаточно умен, чтобы знать, когда вы на самом деле программируете — он не просто отслеживает время, проведенное в вашем редакторе; он также поддерживает кроссплатформенную интеграцию, например прямую интеграцию с GitHub.
WakaTime пригодится, когда вы хотите знать, сколько времени вы тратите на кодирование проекта. Это особенно важно при фрилансе, чтобы вы могли более точно взимать плату с клиентов в зависимости от времени, которое вы отработали.
11. ГитЛенс
GitLens — это расширение с открытым исходным кодом, которое поможет вам лучше понять изменения, внесенные в ваш код. Он дополняет текущие функции VS Code Git возможностью параллельного сравнения кода с вашими предыдущими фиксациями и изменениями, а также другими функциями.
Вы можете изучить историю кодовой базы, чтобы лучше понять ее эволюцию и узнать, когда и почему была изменена строка или блок кода.
12. Проверка правописания кода
Каждый в какой-то момент делает опечатки, а затем тратит драгоценное время на их поиск. Code Spell Checker проверяет ваш код на наличие опечаток и орфографических ошибок до того, как они станут проблемой в вашем рабочем процессе.
Когда вы вводите комментарии, переменные, строки и обычный текст, расширение выделяет распространенные орфографические ошибки. Он также хорошо работает с CamelCase.
13. Закладки
Как следует из названия, Закладки помогают вам отмечать и называть определенные позиции или разделы в вашем коде для удобной навигации. Он также предлагает специальную боковую панель и команды выбора, которые позволяют вам выбирать строки и области между строками, которые были отмечены закладками. Это действительно полезно для анализа файла журнала.
14. Лучшие комментарии
Вы когда-нибудь хотели чего-то более мощного, чем комментарии по умолчанию в VS Code? Лучшие комментарии помогают вам писать более читаемые и удобные для человека комментарии, позволяя выделять комментарии на основе типов аннотаций.
Каждый тип аннотаций имеет свой цвет для разных целей, что делает комментарии более читабельными и удобными для организации. Поддерживаемые типы включают оповещения, запросы, задачи и основные моменты. Кроме того, вы можете настроить выделение на основе комментариев, которые могут вам понадобиться для других целей.
15. Фрагменты кода JavaScript (ES6)
С помощью фрагментов кода JavaScript (ES6) вы можете сократить время, затрачиваемое на повторный ввод одного и того же кода, и вместо этого сосредоточиться на реальной работе.
Это расширение поставляется с множеством полезных фрагментов кода для синтаксиса JavaScript ES6, которые вы можете использовать как ярлыки кода. При срабатывании фрагмент просто заменяет текст и вставляет его прямо в документ. Например, ввод «clg» быстро приведет к вызову console.log().
Заключение
Самым ценным в использовании Visual Studio Code может быть широкий спектр расширений, доступных в большом поддерживающем сообществе VS Code. В этом руководстве вы познакомились с пятнадцатью лучшими расширениями VS Code, которые можно включить в ваши рабочие процессы. Использование этих расширений может повысить производительность программирования и помочь вам стать лучшим разработчиком.
Во всех случаях установка и запуск этих расширений займет всего несколько минут. Учитывая, что они могут сделать для ваших проектов, это время будет потрачено не зря.
