Хочешь уверенно проходить IT-интервью?
![Готовься к IT-собеседованиям уверенно с AI-тренажёром T1!](https://media.proglib.io/banner/2025/01/28/t1.jpg)
Мы понимаем, как сложно подготовиться: стресс, алгоритмы, вопросы, от которых голова идёт кругом. Но с AI тренажёром всё гораздо проще.
💡 Почему Т1 тренажёр — это мастхэв?
- Получишь настоящую обратную связь: где затык, что подтянуть и как стать лучше
- Научишься не только решать задачи, но и объяснять своё решение так, чтобы интервьюер сказал: "Вау!".
- Освоишь все этапы собеседования, от вопросов по алгоритмам до диалога о твоих целях.
Зачем листать миллион туториалов? Просто зайди в Т1 тренажёр, потренируйся и уверенно удиви интервьюеров. Мы не обещаем лёгкой прогулки, но обещаем, что будешь готов!
Реклама. ООО «Смарт Гико», ИНН 7743264341. Erid 2VtzqwP8vqy
1. Turbo Console Log
![🔝 10 расширений VS Code для фронтенд-разработчика](https://media.proglib.io/posts/2020/08/10/affbe32a62486e7f7ede0d3c26daffce.jpg)
Расширение 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>](https://media.proglib.io/posts/2020/08/10/d1f15811b222ccabd7618c5c48c2aef6.gif)
2. Quokka.js
![🔝 10 расширений VS Code для фронтенд-разработчика](https://media.proglib.io/posts/2020/08/10/9f18b4b85da9a7f9e47e49ed05170e23.jpg)
Расширение Quokka позволяет тестировать JavaScript-код, не переходя в консоль браузера. Ещё Quokka помогает в прототипировании и работе с файлами. Есть встроенные отчеты и форматирование выходных данных.
![<a href="https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode" target="_blank" rel="noopener noreferrer nofollow">Quokka</a>](https://media.proglib.io/posts/2020/08/10/cfb3221d9ed5689353dcdc1ace2c28d1.gif)
3. Prettier
![<a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank" rel="noopener noreferrer nofollow">Prettier</a>](https://media.proglib.io/posts/2020/08/10/ccb2acf0c53f97d20d1db185fea2dd81.jpg)
Популярное расширение 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>](https://media.proglib.io/posts/2020/08/10/15d9480e7f09a55321138b035ae72302.jpg)
Live Server – пакет расширений для совместного редактирования и отладки в режиме реального времени. Есть даже голосовой и текстовый чаты, удаленный обзор кода и Live Reload для перезагрузки страницы при сохранении проекта. Всё устанавливается в один клик.
5. GitLens
![🔝 10 расширений VS Code для фронтенд-разработчика](https://media.proglib.io/posts/2020/08/10/89ee93a8f287e76d830470541795e357.jpg)
Расширение GitLens обрабатывает и визуализирует в редакторе информацию Git. В том числе логи коммитов и файловую историю. С помощью аннотаций git blame
и code lens
можно визуализировать историю работы над проектом.
![🔝 10 расширений VS Code для фронтенд-разработчика](https://media.proglib.io/posts/2020/08/10/f140318ab36b32049588d10b6e36c2ae.gif)
6. Polacode
![🔝 10 расширений VS Code для фронтенд-разработчика](https://media.proglib.io/posts/2020/08/10/61c0d8d80680d40d39f966c6a554dcbe.jpg)
Расширение Polacode позволяет удобно делать красивые скриншоты фрагментов кода.
![<a href="https://marketplace.visualstudio.com/items?itemName=pnp.polacode" target="_blank" rel="noopener noreferrer nofollow">Polacode</a>](https://media.proglib.io/posts/2020/08/10/f47eb6f4093cc5e78fcb4ef773c0c61d.gif)
7. vscode-icons
![🔝 10 расширений VS Code для фронтенд-разработчика](https://media.proglib.io/posts/2020/08/10/5f3f8a7130d7ac187b4d1a02ad8fbcb4.jpg)
Расширение 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>](https://media.proglib.io/posts/2020/08/10/180604bbf8170f4a9b1be6d98d3cc773.gif)
8. open in browser
![🔝 10 расширений VS Code для фронтенд-разработчика](https://media.proglib.io/posts/2020/08/10/284d1cb5ddda3855ead4457fb280bf90.jpg)
Используя расширение 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>](https://media.proglib.io/posts/2020/08/10/e9ab8f11d0ef3dbbe680af5e1598857f.jpg)
9. ESLint
![<a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" target="_blank" rel="noopener noreferrer nofollow">ESLint</a>](https://media.proglib.io/posts/2020/08/10/948f4502cf85b21baa4ed40b6fc8301f.jpg)
ESLint – инструмент, который приводит разношерстный JavaScript код проекта к единому стилю. Во многом похож на JSLint и JSHint, но есть и отличия:
- для синтаксического анализа JS используется Espree;
- для оценки шаблонов в коде применяется AST;
- продукт полностью встраиваемый, каждое правило является плагином, которое можно добавить их в рантайме.
10. Markdown Preview Enhanced
![🔝 10 расширений VS Code для фронтенд-разработчика](https://media.proglib.io/posts/2020/08/10/85c36b0f93ff685cb1ab4af17ed4d077.jpg)
Расширение 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>](https://media.proglib.io/posts/2020/08/10/d4aea1eda2bc45afa1e29031ee6f1461.png)
Заключение
Мы рассмотрели десять полезных расширений VS Code, призванных улучшить, ускорить и облегчить процесс разработки. Обязательно попробуйте их в деле или поделитесь теми, что используете сами.
Расскажите про свои любимые расширения VS Code