22 полезных расширения для начинающего программиста

Расширения для Chrome

1. WhatFont — простой способ узнать, какой именно шрифт используется на том или ином сайте, чтобы найти его и применять в своих проектах.

2. Pesticide — инструмент для выделения контуров <div> и модификаций CSS. Полезен при освоении блочной модели вёрстки.

3. Colorzilla — инструмент для получения точных цветов с веб-сайтов. Для удобства код цвета копируется прямо в буфер обмена.

4. CSS Peeper  — расширение для просмотра используемых на сайтах цветов и ассетов: иллюстраций, текстовых документов, файлов вёрстки, видеофайлов.

5. Wappalyzer  —  утилита, которая позволяет идентифицировать системы управления контентом, фреймворки, серверное ПО, инструменты аналитики и другие технологии, используемые на сайтах.

6. React Developer Tools  —  полезный инструмент для отладки приложений на React.js.

7. Redux DevTools  —  инструмент для отладки приложений с использованием Redux.

8. JSON Formatter  —  расширение для упрощения читаемости JSON с подсветкой синтаксиса, отступами, кликабельными ссылками.

9. Vimeo Repeat and Speed  —  простое расширение для ускорения видео сервиса Vimeo, что бывает полезно при просмотре видеоуроков.

Расширения для VS Code

10. Auto Rename Tag —  расширение для переименования тегов HTML. При изменении открывающего тега автоматически сменится и закрывающий.

11. HTML CSS Support  —  поддержка CSS для HTML-документов с подсветкой синтаксиса, подключением удалённых CSS-файлов и другими полезными функциями.

12. HTML Snippets  —  готовые фрагменты кода для экономии времени.

13. Babel ES6/ES7  —  инструмент для подсветки и проверки синтаксиса JavaScript Babel.

14. Bracket Pair Colorizer  —  инструмент для окрашивания открывающих и закрывающих скобок определёнными цветами для их быстрого поиска.

15. ESLint  —  интеграция ESLint в Visual Studio Code для проверки качества вашего кода и поиска ошибок.

16. Guides  —  добавление дополнительных направляющих линий в код для большего удобства при поиске открывающих и закрывающих элементов.

17. JavaScript Console Utils  —  утилита для упрощения создания полезных инструкций console.log(), в том числе быстрой вставки кода для логирования выбранной переменной.

18. Code Spell Checker  —  расширение для быстрой проверки орфографии кода.

19. GitLens  —  полезный инструмент для визуализации информации об истории кода, что позволяет отслеживать, когда и кем были внесены изменения.

20. Path Intellisense  —  инструмент для автоматического дополнения имён файлов по мере ввода строки.

21. Prettier  —  расширение для автоматического форматирования кода и приведения его различных участков к единому виду.

22. VSCode-Icons  —  добавление наглядных иконок к дереву файлов для более удобного поиска и лучшего визуального восприятия.

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

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

*Деятельность Meta Platforms Inc. и принадлежащих ей социальных сетей Facebook и Instagram запрещена на территории РФ.