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

ВАКАНСИИ

Добавить вакансию
AppSec BP
по итогам собеседования
Flutter Developer
по итогам собеседования

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