eFusion 11 августа 2020

🔝 10 расширений VS Code для фронтенд-разработчика

Десятка расширений редактора Visual Studio Code для фронтенд-разработчика: линтинг, отладка, журналирование, работа с Git и многое другое.
🔝 10 расширений VS Code для фронтенд-разработчика

1. Turbo Console Log

🔝 10 расширений VS Code для фронтенд-разработчика

Расширение Turbo Console Log упрощает отладку, автоматизируя процесс записи журнальных сообщений. Всё просто: выбираем переменную для отладки и нажимаем [Ctrl] + [Alt] + [L].

<a href="https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log" target="_blank" rel="noopener noreferrer nofollow">Turbo Console Log</a>
Turbo Console Log

2. Quokka.js

🔝 10 расширений VS Code для фронтенд-разработчика

Расширение Quokka позволяет тестировать JavaScript-код, не переходя в консоль браузера. Ещё Quokka помогает в прототипировании и работе с файлами. Есть встроенные отчеты и форматирование выходных данных.

<a href="https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode" target="_blank" rel="noopener noreferrer nofollow">Quokka</a>
Quokka

3. Prettier

<a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank" rel="noopener noreferrer nofollow">Prettier</a>
Prettier

Популярное расширение Prettier помогает форматировать JavaScript-код, делая текст программы более читаемым, а стиль кода – согласованным. Можно форматировать не только JavaScript, но и TypeScript, JSON, GraphQL и другие языки программирования и разметки, учитывая особенности популярных библиотек и фреймворков.

4. Live Share Extension Pack

<a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack" target="_blank" rel="noopener noreferrer nofollow">Live Server</a>
Live Server

Live Serverпакет расширений для совместного редактирования и отладки в режиме реального времени. Есть даже голосовой и текстовый чаты, удаленный обзор кода и Live Reload для перезагрузки страницы при сохранении проекта. Всё устанавливается в один клик.

5. GitLens

🔝 10 расширений VS Code для фронтенд-разработчика

Расширение GitLens обрабатывает и визуализирует в редакторе информацию Git. В том числе логи коммитов и файловую историю. С помощью аннотаций git blame и code lens можно визуализировать историю работы над проектом.

🔝 10 расширений VS Code для фронтенд-разработчика

6. Polacode

🔝 10 расширений VS Code для фронтенд-разработчика

Расширение Polacode позволяет удобно делать красивые скриншоты фрагментов кода.

<a href="https://marketplace.visualstudio.com/items?itemName=pnp.polacode" target="_blank" rel="noopener noreferrer nofollow">Polacode</a>
Polacode

7. vscode-icons

🔝 10 расширений VS Code для фронтенд-разработчика

Расширение VScode-icons добавляет иконки файлов в Visual Studio Code. Найти нужный файл будет ещё проще.

<a href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons" target="_blank" rel="noopener noreferrer nofollow">VScode-icons</a>
VScode-icons

8. open in browser

🔝 10 расширений VS Code для фронтенд-разработчика

Используя расширение Open in browser, можно открывать в браузере любые типы файлов, а не только HTML-документы.

<a href="https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser" target="_blank" rel="noopener noreferrer nofollow">Open in browser</a>
Open in browser

9. ESLint

<a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" target="_blank" rel="noopener noreferrer nofollow">ESLint</a>
ESLint

ESLint – инструмент, который приводит разношерстный JavaScript код проекта к единому стилю. Во многом похож на JSLint и JSHint, но есть и отличия:

  • для синтаксического анализа JS используется Espree;
  • для оценки шаблонов в коде применяется AST;
  • продукт полностью встраиваемый, каждое правило является плагином, которое можно добавить их в рантайме.

10. Markdown Preview Enhanced

🔝 10 расширений VS Code для фронтенд-разработчика

Расширение Markdown Preview Enhanced предоставляет множество полезных функций: автосинхронизация скролла, поддержка языка диаграмм PlantUML, pandoc, экспорт PDF, создание презентаций и т. д. Отлично подойдет тем, кто знаком с Markdown Preview Plus или RStudio Markdown.

<a href="https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced" target="_blank" rel="noopener noreferrer nofollow">Markdown preview enhanced</a>
Markdown preview enhanced

Заключение

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

Источники

МЕРОПРИЯТИЯ

Расскажите про свои любимые расширения VS Code

ВАКАНСИИ

Добавить вакансию
Go-разработчик
по итогам собеседования
Разработчик С#
от 200000 RUB до 400000 RUB

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ