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

• компилятор: программу, которая переводит исходный код, написанный на языке программирования высокого уровня, в машинный код низкого уровня
• интерпретатор: запускает скрипты
• отладчик: позволяет находить проблемные места и ошибки в коде
• инструменты автоматизации: помогают ускорить процесс разработки

Atom
Atom — бесплатный редактор с открытым исходным кодом от GitHub. Он написан с использованием фреймворка Electron, в основе которого в свою очередь находятся Node.js и Chromium. К сожалению, 8 июня 2022 GitHub объявили о закрытии редактора кода Atom. Репозиторий проекта будет заархивирован 15 декабря 2022 года, и содержимое будет доступно только для чтения. Проект закрывается для того, чтобы сосредоточиться на разработке облачного редактора GitHub Codespaces, который представляет собой редактор Visual Studio Code, который можно использовать в браузере.

Sublime Text
Строго говоря, Sublime Text это редактор кода, но он содержит функции, аналогичные полноценным IDE. Создан с использованием как C ++, так и Python, поэтому является универсальным и поддерживает большое количество языков программирования. Стоимость лицензии составляет 99 $ за индивидуальный план на три года, а цена на бизнес-лицензии зависит от числа людей в команде. И хотя Sublime требует плату, его бесплатный пробный период не ограничен по времени, и позволяет продолжать работу над проектом бесконечно долго.

Visual Studio Code
Visual Studio Code — это продвинутый текстовый редактор, от компании Microsoft, созданный с использованием JavaScript. Предлагает не так много возможностей, как Visual Studio IDE, но поддерживает большое количество языков программирования и включает функции отладки.
Основные достоинства:

• совместим с Windows, macOS и Linux
• встроенная интеграция с Git
• умное автодополнение IntelliSense
• огромная библиотека расширений
• доступна облачная среда для совместной разработки Codespaces

WebStorm
WebStorm — это интегрированная среда для разработки на JavaScript и связанных с ним технологиях. Основные достоинства:

• совместим с Windows, macOS и Linux
• быстрый старт, так как все доступно из коробки
• удаленная совместная разработка с помощью сервиса Code With Me;
• умное автодополнение
• анализ качества кода
• инструменты отладки и тестирования
• встроенный терминал и HTTP клиент

WebStorm не имеет бесплатной лицензии, цена для индивидуального использования — 59 $ в год, для компаний — 129 $ в год на пользователя, доступен пробный период в 30 дней.

Менеджер пакетов — инструмент, который следит за тем, какие зависимости установлены в в вашем проекте. Когда мы добавляем зависимость в проект, менеджер пакетов делает под капотом много работы: получает информацию о текущей актуальной версии пакета, о зависимостях конкретно этой версии, зависимостях зависимостей и так далее. В результате строится дерево зависимостей — npm собирает воедино всю собранную информацию о всех необходимых пакетах и их версиях. После этого происходит скачивание пакетов и проверка контрольных сумм. Проверка контрольных сумм нужна для безопасности: это помогает убедиться в том, при скачивании пакета нам его не подменили злоумышленники.

В мире JavaScript есть три популярных менеджера зависимостей — npm, Yarn и pnpm.

npm
На самом деле npm состоит из двух частей:

• репозиторий для публикации проектов Node.js с открытым исходным кодом
• инструмент командной строки для установки и удалении пакетов, управлении версиями и зависимостями, необходимыми для запуска проекта

Однако, в большинстве случаев, когда говорят о npm, обычно имеют в виду последнее — инструмент CLI. Так как он поставляется по умолчанию с каждой новой установкой Node, пользоваться им можно сразу.

Yarn
Менеджер пакетов Yarn — альтернатива npm, разработанная Facebook и Google в 2016 году. Первоначальная цель его создания заключалась в устранении недостатков npm, таких как проблемы с производительностью и безопасностью. Но команда npm быстро усвоила урок и заполнила пробелы, реализовав недостающие функции. В настоящее время оба менеджера пакетов участвуют в гонке управления пакетами, предлагая аналогичные функции. На Yarn стоит обратить внимание, если вам не хватает возможностей npm.

pnpm
При использовании npm или Yarn, если у вас есть 100 проектов использующих одну и ту же зависимость, ваш диск будет иметь 100 сохраненных копий этой зависимости. pnpm же создает на компьютере единый репозиторий npm-пакетов. Когда пакеты устанавливаются, их файлы линкуются из этого единого хранилища и не потребляют дополнительного дискового пространства. Это позволяет делиться зависимостями одной и той же версии между проектами. В результате экономится место на диске пропорционально количеству проектов и зависимостей, что также приводит к более быстрой установке.

bower
Возможно, вы слышали про bower. Этот инструмент устарел, и хотя разработчики ещё занимаются его поддержкой, но его использование не рекомендуются. Он использует собственный формат файла пакета bower.json и загружает зависимости в папку bower_components, а также работает с собственным реестром.

Часто можно сказать, насколько код программы корректен, даже не запуская её. Процесс исследования исходного кода без запуска называют статическим анализом или линтингом, а программу, которая это делает — статическим анализатором или линтером.

Как автоматизировать работу с линтером:

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

Stylelint
Мощный современный линтер, помогающий избежать ошибок и обеспечить соблюдение соглашений в стилях. Поддерживает CSS-подобные синтаксисы, такие как SCSS, Sass, Less и SugarSS, а также встроенные стили в литералы объектов и шаблонов HTML, Markdown и CSS-in-JS.
Альтернативы: CSSLint

ESlint
ESLint — это линтер для JavaScript, написанный на Node.js. Одной из самых популярных настроек для линтера является использование Airbnb JavaScript Style. Альтернативы: JSHint, JSLint

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

В работе можно встретить разные стили от больших компаний типа Google или Airbnb. Вот несколько примеров:
Google JavaScript Style Guide, Airbnb JavaScript Style Guide, Principles of Writing Consistent, Idiomatic JavaScript

На проекте могут быть приняты собственные правила и договоренности.

Правила оформления кода упрощают чтение, но это не поможет, если за выполнением правил надо следить вручную. Чтобы не отвлекаться на проверку стиля кода, сообщество придумало инструменты для автоматизации таких проверок. Одни из них это форматтеры для редакторов кода и IDE. Они указывают на ошибки по мере ввода, некоторые автоматически форматируют код при сохранении изменений в файле.

EditorConfig
EditorConfig — это конфигурационный файл к большому количеству редакторов кода и IDE. Его задача — создать единый формат настроек, и, раз и навсегда, решить вопросы вроде “табы или пробелы” для всех IDE и всех языков программирования. Такой файл может храниться в системе контроля версий проекта, что позволит всем его разработчикам использовать одну и ту же конфигурацию.

StandardJS
JavaScript Standard Style — популярное руководство по стилю написания кода. Кроме этого он может анализировать ваш JavaScript код, поскольку является надстройкой над ESLint и, может использоваться в качестве его плагина. Особенностью StandardJS является отсутствие настроек конфигурации.

Prettier
Prettier — это средство для автоформатирования кода, которое нацелено на использование жестко заданных правил по оформлению программ.

При работе с web-проектом разработчику необходимо выполнять ряд повторяющихся операций:

• преобразовывать синтаксис препроцессоров в «чистый» язык
• проверять код на соответствие требуемым стандартам
• минифицировать большие файлы
• запускать тесты
• формировать итоговую сборку проекта

Выполнение всех этих задач можно автоматизировать с применением task runnerов, таких как Grunt и Gulp.

Grunt
Появился в 2012 году, написан на Node.js. Задачи для Grunt определяются в файле gruntfile.js, по структуре очень напоминающему JSON, что делает его достаточно многословным. Grunt запускает задачи последовательно, чтобы запустилась следующая задача предыдущая должна записать свои результаты во временный файл. Если мы работаем с большим количеством файлов, то Grunt уступает своему конкуренту Gulp в производительности, так как тратит время на запись/чтение файлов между задачами сборки.

Gulp
Появился в 2013 году, также написан на Node.js. Задачи определяются в файле gulpfile.js, используется синтаксис в стиле функций JavaScript. В Gulp используется концепция потоков: файлы как будто проходят сквозь «трубу» (pipe) и в разных ее точках с ними выполняются те или иные действия. Также в Gulp можно выполнять синхронно сразу несколько задач, тем не менее, с этим нужно быть осторожным, чтобы не нарушить цепочки зависимостей. В результате Gulp обычно намного быстрее, чем Grunt, хотя у него может быть немного более крутая кривая обучения из-за использования потоков и промисов.

Современные проекты могут быть огромными (100 тысяч строк или даже больше), писать такие объёмы кода в одном файле совершенно невозможно. К тому же, часто нужно использовать готовые библиотеки. При этом браузеры не очень хорошо поддерживают проекты из многих файлов. Из-за этого были придуманы системы сборки (также их называют бандлерами или сборщиками).
Самый популярный бандлер — Webpack, он используется в сложных проектах с высокими требованиями к конфигурируемости. Самый простой в использовании — Parcel, он хорошо подходит для небольших проектов без особенных требований.

• Webpack
• Rollup
• Parsel
• Browserify

Для того, чтобы определить, какой инструмент лучше всего подходит для вашего веб-проекта, можно воспользоваться сервисом Tooling.Report, который содержит сводные результаты тестов каждого из вышеперечисленных сборщиков.

Обратная совместимость («Backward Compatibility») — свойство программного обеспечения позволяющее старым возможностям работать на новых версиях. Ради полноценной поддержки старого формата иногда приходится жертвовать скоростью работы или надежностью, но есть инструменты берущие эту задачу на себя.

Babel
Babel — это транспайлер (особового вида компилятор), который преобразует ваш современный JavaScript для запуска в старых браузерах. Ассоциация ECMA International, выпускает обновления языка Javascript каждый год. В связи с этим, у разработчиков появляются новые возможности: более короткий синтаксис, стрелочные функции, промисы и.т.д. Не все современные браузеры успевают идти в ногу с этими изменениями. Вот здесь и нужен Babel. Он помогает не ждать обновлений браузеров, а сразу использовать всю мощь современных стандартов Javascript.

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

PostCSS Preset Env
PostCSS Preset Env позволяет конвертировать современный CSS в то, что большинство браузеров может понять, определяя нужные полифилы на основе целевых браузеров или сред выполнения. Самостоятельно добавляет префиксы с помощью Autoprefixer (поэтому, если вы используете это, нет необходимости использовать Autoprefixer напрямую)

BrowserList
Browserslist — это инструмент, с помощью которого можно описать целевые браузеры веб-приложения. Упомянутые выше инструменты под капотом используют Browserslist, и если в вашем проекте есть его конфиг, то код проекта будет собран под эти браузеры.

Тест — это код, который проверяет предположения о работе другого кода. Они делают код более прочным и живучим, одновременно с этим — это отличная документация. Правда для тестов нужно закладывать больше времени на разработку, но время, потраченное в начале работы над проектом, окупится в дальнейшем.

На сегодняшний день доступна целая масса фреймворков для тестирования JavaScript-кода. Учитывая подобное разнообразие, выбор того или иного фреймворка, как правило, напрямую зависит от непосредственной задачи, которую мы ставим перед собой в процессе написания тестов. Идеально, когда функционал фреймворка покрывает несколько или все поставленные задачи (единая среда).

Дальше представлены топ 5 инструментов для тестирования, согласно отчету StateOfJS2021.

Jasmine
Jasmine — это многофункциональная среда тестирования JavaScript, широко используемая разработчиками, особенно когда необходимо тестировать приложения Angular.

Jest
Jest - это библиотека для тестирования JavaScript кода. Изначально Jest был основан на другом фреймворке – Jasmine, но со временем большая часть функциональности была переписана и появилось много новый фич. Это проект с открытым исходным кодом, разработанный Facebook, и он хорошо подходит для тестирования кода React, хотя и не ограничивается этим. Jest быстрый и простой в использовании.

Mocha
Mocha — еще одна популярная среда тестирования JavaScript, предназначенная для тестирования приложений, работающих в Node.js. Эта библиотека применяет сторонние инструменты для построения утверждений и внешние средства для создания имитаций и функций-шпионов (обычно Enzyme и Chai). Это означает, что Mocha немного сложнее настроить, но она более гибкая и открыта для расширений.

Cypress
Cypress - это open-source фреймворк, используемый для автоматизации интеграционного и сквозного (End to End) тестирования пользовательского интерфейса. Поскольку в основе cypress лежит Node.js, для написания тестов используется JavaScript, тесты выполняются непосредственно в браузере. Фреймворк автоматически ждет завершения команд и запросов, прежде чем продолжить выполнение, поэтому нет необходимости использовать async/await.

Storybook
Это инструмент для разработки пользовательских интерфейсов позволяет реализовывать отдельные части интерфейса изолированно от основного приложения, что упрощает тестирование и позволяет отладить компонент с различными данными. Для интерактивного взаимодействия с визуальными компонентами Storybook предоставляет специальный веб-интерфейс.

Спецификация — это главный источник знаний: как для браузеров, так и для разработчиков. Разработкой спецификации по HTML занимаются две организации W3C и WHATWG.

W3C
W3C — это консорциум всемирной сети, некоммерческая организация, в рамках которой разрабатывают технологии, на которых работает веб (например, стандарт CSS).

WHATWG
WHATWG — это независимая рабочая группа по технологиям гипертекстовых веб-приложений, которую собрали в рамках W3C в середине 2000-х.

Немного истории. Когда-то в W3C решили отказаться от спецификации HTML 4 и начать разрабатывать XHTML, более строгую и очень формальную версию HTML. В ответ на это собралась рабочая группа WHATWG, в которую вошли представители браузеров. В результате их работы появилась спецификация HTML 5. По ходу дела между WHATWG и W3C возникли разногласия, из-за чего начали появляться различия между версиями.
Продолжалось это довольно таки долго, но в середине 2019 года организации W3C и WHATWG подписали соглашение о дальнейшем совместном развитии спецификаций HTML и DOM. Для организации совместной работы над спецификациями в W3C была создана новая рабочая группа HTML Working Group, которая отвечает за перевод развиваемых в WHATWG черновых спецификаций HTML и DOM в форму рекомендаций (стандартов) W3C, учитывая пожелания сообщества, включающего пользователей, производителей браузеров и web-разработчиков. Все изменения и новые возможности, связанные со спецификациями HTML и DOM, рекомендовано передавать напрямую в репозитории WHATWG. Также дополнительным соглашением от 2021 года на разработку в WHATWG были переданы следующие спецификации: Web IDL, HTML Media Capture, Worklets, Resource Hints, Preload, Media Playback Quality

Ecma International
JavaScript является реализацией стандарта ECMAScript, над которым работает ассоциация Ecma International, основанная в 1961 году. Ассоциация разрабатывает стандарты в области информационных и коммуникационных технологий и бытовой электроники в сотрудничестве с национальными, европейскими и международными организациями. Готовые стандарты публикуются в электронном виде и доступны на их сайте.