22 корисних розширення для початківця програміста
Розширення для Chrome і Visual Studio Code, які полегшать багато завдань при написанні коду і заощадять ваш час.
Розширення для Chrome
1. WhatFont — простий спосіб дізнатися, який саме шрифт використовується на тому чи іншому сайті, щоб знайти його і застосовувати у своїх проектах.
2. Pesticide — інструмент для виділення контурів
і модифікацій 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. Pret-рівня? —? розширення для автоматичного форматування коду та приведення його різних ділянок до єдиного вигляду.
22. VSCode-Icons ?—? додавання наочних іконок до дерева файлів для більш зручного пошуку та кращого візуального сприйняття.
Встановлювати все підряд з цього списку, звичайно ж, не варто. Одні з цих розширень можна назвати взаємозамінними, для інших же знадобиться досвід використання більш простих інструментів.
В коментарях розкажіть про розширення, які допомогли на початку навчання і якими ви до цих пір користуєтеся.
Читайте також
Як вивчити програмування з нуля >
Яку мову програмування краще вчити першим і чому >
20 найбільш рекомендованих книг для програмістів російською мовою >