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 ?—? добавление наглядных иконок к дереву файлов для более удобного поиска и лучшего визуального восприятия.

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