Инструменты в повседневной работе JavaScript-разработчика

Artiom Matusenco

JS Software Developer / Team Lead

Основные инструменты, без которых сложно представить будни JavaScript-разработчика: от IDE до браузера.

VS Code

VS Code — это универсальная IDE (Integrated Development Environment), которая уже стала стандартом для многих разработчиков. Основной задачей инструмента является предоставление удобной и эффективной среды для работы с программным кодом. VS Code позиционируется как легковесный редактор кода, позволяющий расширить функционал при помощи плагинов, что делает его максимально конфигурируемым под задачи и предпочтения каждого разработчика индивидуально.

Ключевые «фишки» редактора:

1. Возможность расширения и конфигурации редактора при помощи огромного количества плагинов, позволяющих добавить практически любой необходимый для разработки функционал.
2. IntelliSense — умная подсветка и автодополнение кода, основывающиеся на типах переменных, описании функций и методов, импортируемых модулях.
3. Встроенный отладчик, позволяющий анализировать выполнение кода непосредственно в редакторе, не прибегая к выводу состояния переменных и среды исполнения.
4. Удобная интеграция с командами Git и другими системами контроля версий делает рутинную работу легче и эффективнее.

Для разработки на JavaScript в VS Code я использую следующий набор плагинов:

1. One Dark Pro — известная One Dark тема, одна из наиболее популярных среди пользователей VS Code.
2. Prettier — инструмент, позволяющий автоматически форматировать код JavaScript в соответствии с общепринятыми стандартами.
3. ESLint — статический анализатор JavaScript кода, задачей которого является выявление нарушений правил и соглашений по написанию и оформлению кода.
4. JavaScript Snippets — плагин, расширяющий функционал автодополнения, предоставляющий возможность удобно вставлять готовые стандартные JavaScript выражения и конструкции.
5. VSCodeVim — плагин, позволяющий переключиться в режим модального редактора Vim.
6. JestRunner — предоставляет возможность запускать и отлаживать Jest тесты прямо из редактора путем нажатия на всплывающие кнопки.
7. Git File History — визуализация истории изменений файла, основанная на системе управления версиями Git.

Node.js

Node.js или как ее еще называют «нода» — это среда исполнения JavaScript, основанная на движке V8. В отличие от браузера, Node.js предоставляет возможность исполнять код на стороне сервера, позволяя подключаться к базам данных, «слушать» сетевые подключения, используя разного рода протоколы, или работать в режиме командной строки. При построении бэкенд-сервисов Node.js — неотъемлемый инструмент повседневной работы.

npm

Менеджер пакетов Node.js — это инструмент, который предоставляет набор команд для установки, удаления, версионирования, запуска и многих других операций над JavaScript пакетами как для серверных приложений на Node.js, так и для клиентских, предназначенных для браузера.

Пакет — это полноценная программа или набор функций, которые могут быть переиспользованы при разработке другой программы. Ярким примером может быть React или Lodash. Потенциально программа, написанная на JavaScript под Node.js, может не использовать сторонних зависимостей. Но на большинстве проектов для ускорения разработки и переиспользования логики и функционала npm используется как один из основных инструментов.

Набор npm пакетов варьируется от проекта к проекту и разделяется на пакеты, входящие в конечную программу, и на пакеты, необходимые для процесса разработки, сборки, отладки, размещения и других операций над конечной программой.

nvm

Менеджер версий Node.js — используется для быстрого переключения между версиями «ноды» на одной машине. Чаще всего необходим в одновременной работе над разными проектами, когда каждый из них зависит от конкретной версии.

Prettier

Инструмент, позволяющий автоматически форматировать JavaScript код в соответствии с общепринятыми стандартами. Форматирование кода в соответствии с набором правил необходимо для поддержания чистоты и строго детерминированной структуры. Код читается и воспринимается гораздо легче, когда его оформление стандартизировано.

В некоторых языках есть встроенные инструменты для форматирования кода, например, в Go это fmt, без соблюдения правил которого код не скомпилируется. Для JavaScript долгое время не было инструмента, строго описывающего и исполняющего правила форматирования. Prettier занял свою нишу достаточно скоро после выхода и сейчас уже является обязательным npm-пакетом практически на каждом проекте.

ESLint

Статический анализатор JavaScript кода, задачей которого является выявление нарушений правил и соглашений по написанию и оформлению кода. В отличие от правил форматирования, ESLint применяет правила написания выражений, конструкций и операторов. В результате ESLint «следит» за качеством кода, выявляя потенциальные проблемы и ошибки в синтаксисе. Так же, как и Prettier, этот инструмент считается практически обязательным для каждого проекта.

Google Chrome

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

Основные инструменты разработчика в Google Chrome:

1. Elements — просмотр HTML-элементов, их свойств, параметров и CSS-стилей. Кроме этого в Elements можно редактировать HTML и CSS прямо на лету, что дает удобную возможность экспериментировать с версткой прямо в браузере.
2. Network — таблица HTTP-запросов и ответов, предоставляющая о них полную информацию.
3. Console — среда исполнения JavaScript в контексте скрипта страницы. Позволяет не только выполнять код построчно, но и выводит логи JavaScript-приложения.
4. Sources — открывает исходный код JavaScript-приложения, является полноценным отладчиком кода, где можно установить точки останова и просмотреть состояние приложения и среды исполнения в необходимый момент.
5. Performance — анализ производительности приложения, включающий не только данные об исполнении JavaScript-кода, но и ресурсы, затраченные на отрисовку HTML, анимацию CSS и другие составляющие в разрезе промежутка времени, записанного во время анализа.
6. Application — доступ к разным типам хранилища браузера, а также к сервисам, исполняемым в фоновом режиме.
7. Sensors — инструмент, позволяющий подменить данные сенсоров, такие как геолокация, положение в пространстве и другие.

Естественно, это лишь основные или базовые инструменты, без которых сложно представить будни JavaScript-разработчика. Существует масса других, не менее важных и популярных инструментов и приложений, которыми в принципе пользуется каждый разработчик программного обеспечения вне зависимости от языка программирования или стека.

А какой ваш набор любимых инструментов для работы с JavaScript?