В чем программировать на javascript

JavaScript code online: редакторы для JS

Выбор редактора кода — важный шаг подготовки к программированию. В статье представлено несколько популярных редакторов, упрощающих разработку на JavaScript (JS). Так как информация представлена кратко, чтение не займет много времени, зато позволит лучше ориентироваться в приложениях, позволяющих редактировать HTML и JavaScript онлайн.

Кто-то скажет, что написать code можно и в обычном «Блокноте». Так-то оно так, но ведь возможности такого «редактора» весьма скромны, что чревато замедлением разработки. Да и есть ли в этом необходимость, когда существуют специализированные инструменты – среды разработки, десктопные и онлайн-комплияторы? А вот они уже обладают множеством функциональных преимуществ. К примеру, многие редакторы «умеют» в режиме онлайн:

— подсвечивать синтаксис. Названия, операторы, спецсимволы и прочие элементы будут отображаться в среде разработки по-разному, что существенно упростит читаемость кода, написанного на JavaScript и HTML;

— выполнять автозаполнение. Когда разработчик вводит какой-нибудь JavaScript code, editor предлагает релевантную подсказку по общеприменимым компонентам (типам, функциям, аргументам и т. д.). Это очень удобно и позволяет сэкономить время;

— подсвечивать ошибки. Потенциальные ошибки/опечатки будут подсвечены в режиме онлайн, поэтому code можно обоснованно корректировать еще до компиляции;

— скрывать блоки. Эта функция избавляет от необходимости скролить полностью весь code, т. к. он будет поблочно скрыт средой разработки/редактором. Актуально для больших JS-проектов.

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

WebStorm о JetBrains

В качестве IDE поддерживает работу с Version Control Systems и предоставляет возможность разворачивать JavaScript code удаленно. В качестве редактора предоставляет стандартные удобства, перечисленные выше: автодополнение, подсветку синтаксиса и пр.

Из плюсов следует выделить:

— возможность Live-редактирования с просмотром внесенных изменений без сохранения;

— поддержку популярных фреймворков, к примеру, React или Angular;

— десятки встроенных тестов, позволяющих отыскивать ошибки;

— возможность интеграции с Mocha/Protractor/Jest/Karma для unit-тестов;

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

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

Однако есть и минусы:

1. Продукт платный.
2. Его функционал явно избыточен для тех, кто только начал свой путь на стезе программирования на JavaScript.

Sublime Text

Этот кроссплатформенный редактор отличается большим количеством плюсов:

• yдобный и проверенный временем настраиваемый интерфейс;
• наличие горячих клавиш;
• функция навигации по JS-коду;
• автодополнение и подсветка синтаксиса;
• поддержка различных сниппетов и плагинов;
• разработчик может поменять визуальную тему;
• проверка синтаксиса осуществляется непосредственно в процессе ввода;
• поддерживается множественная правка посредством указателей;
• есть функция автосохранения;
• поддерживаются системы сборки.

Однако как и в предыдущем случае полная версия является платной. Также можно добавить, что отсутствует анализатор кода, необходимый для расстановки ссылок.

Atom Editor

Atom — продукт Git, который обернут в Chromium и, по сути, копирует дизайн Sublime Text. Довольно популярен за счет следующих плюсов:

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

Но есть и минусы. Отмечают недостаточную производительность и относительно пустую комплектацию, что называется, «из коробки».

Также вам могут быть полезны следующие ссылки на тему редактирования JavaScript и HTML code онлайн:

10 редакторов для работы с JavaScript

JavaScript — это язык программирования, широко используемый в web-разработке. Взаимодействовать с ним в разы удобнее в одном из редакторов с подсветкой синтаксиса, выделением ошибок и другими полезными для разработчика функциями. Рассмотрим ТОП-10 редакторов для работы с JavaScript.

Notepad++

Популярный блокнот с установленным плагином Emmet превращается в удобную среду разработки практически на любом языке программирования, в том числе и на JS. Плагин для блокнота не только подсвечивает синтаксис и указывает на допущенные пользователем ошибки, но и нумерует атрибуты, помогает проводить не очень сложные и ресурсоемкие математические вычисления, а также позволяет настроить горячие клавиши и другие моменты. Примечательно, что Emmet можно установить не только в Notepad++, но и в остальные редакторы, тем самым значительно расширив их функционал.

Aptana Studio

Этот editor поддерживает большое количество библиотек JS, укомплектован отладчиком и терминалом. Реализована возможность совместной разработки с командой, что важно при работе с крупными проектами, состоящими из множества частей.

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

Visual Studio

Универсальный редактор кода, в том числе поддерживающий и разработку скриптов. Версия от 2012 года обзавелась полностью переработанным модулем, отвечающим за JS. Сейчас такой софт используется разработчиками, которые вынуждены трудиться над большими проектами.

WebStorm

Из примечательных опций у этого инструмента есть три технологии проверки валидности кода — это JSLint, JSHint и встроенный инспектор. Разработчики позаботились об удобстве пользователей, поэтому есть функция интеллектуального автодополнения кода и разнообразие горячих клавиш.

Sublime Text

Текстовый редактор кода с разнообразием плагинов и удобной навигацией по проекту. Продукт бесплатный, но иногда появляется уведомление с предложением купить расширенную лицензию. Еще один плюс: Sublime Text устанавливается на операционных системах Windows, Linus и OS X всех версий.

Spket IDE

Простой внешне, но достаточно функциональный инструмент на базе Eclipse имеет интегрированный отладчик для IE, вставку inline-комментариев и широкие возможности форматирования кода. Также есть отдельный редактор файлов с расширением JSON.

Zend Studio

В последнем обновлении разработчики провели большую работу, благодаря чему пользователи могут настроить визуальную среду программирования под свои потребности. Из опций здесь есть отладка в PHP версии 5.1, интегрированное окно IE, автозавершение блоков phpDoc.

Geany

Большой плюс софта в том, что он совместим с большим количеством расширений файлов, используемых в процессе web-разработки. Приложение дружелюбно к начинающим, так как имеет простой интерфейс с минимумом кнопок и других интерактивных элементов. Работает как под Windows, так и на Linux. Единственный минус, который может доставить некоторые неудобства веб-разработчику — нет встроенных шаблонов, которые упрощают и ускоряют старт нового проекта.

PHPEd

Несмотря на название, продукт используется для написания кода не только на языке PHP. Она также подходит для HTML, CSS, JS, то есть со всеми основными инструментами web-разработчика. Реализована удобная панель инструментов, есть собственный веб-сервер и отладчик. Благодаря мастеру параметров можно в пару кликов настроить поначалу сложный интерфейс под себя. Единственный серьезный минус — нет автозавершения кода при работе с JS.

TinyMCE

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

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

Как настроить VS Code для разработки на PHP и JavaScript

Visual Studio Code — популярный редактор кода. Важно отметить, что Visual Studio Code никак не связан с Visual Studio. Разработчики любят VS Code за то, что он предоставляет много полезных функций бесплатно. Это, например:

• Отладчик кода
• Встроенный терминал
• Удобные инструменты для работы с Git
• Подсветка синтаксиса для множества популярных языков и файловых форматов
• Удобная навигация
• Встроенный предпросмотр Markdown
• Умное автодополнение
• Встроенный пакетный менеджер с большим набором расширений.

Также у VS Code есть большой набор расширений. Они упрощают разработку за счет новых или улучшенных функций программы. Так может выглядеть интерфейс редактора после установки расширений:

Разберемся, как устанавливать расширения и какие из них пригодятся в разработке на PHP и JavaScript.

VS Code для разработки на PHP

Как устанавливать расширения

Чтобы установить расширение, зайдите во вкладку «Extensions», введите название нужного пакета в строке поиска, а затем нажмите кнопку «Install».

Получится примерно так:

Какие расширения выбрать для разработки на PHP

EditorConfig for VS Code

EditorConfig — это конфигурационный файл и набор расширений ко многим редакторам кода. Он подхватывает настройки из файла .editorconfig , который, как правило, размещается в корне проекта.

Расширение автоматически настраивает отступы и перевод строк единообразно для всех разработчиков, которые его используют. Чаще всего PHP-код выполняется на *nix системах, поэтому необходимо использовать стандарт PSR.

Ниже приведем пример файла .editorconfig , который используется в Laravel:

Читайте также: Почему PHP идеально подходит для веб-разработки: преимущество языка и запуск первого сайта

PHP Intelephense

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

Расширение PHP Intelephense поддерживает автодополнение и анализирует код. Также оно позволяет переходить к месту, где создана функция, класс или переменная с помощью шортката Alt+Click .

Чтобы подсказки не дублировались, необходимо отключить встроенную в редактор поддержку кода для PHP:

Extensions → Search @builtin php → PHP Language Features → Disable

PHP Debug

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

Для PHP есть расширение Xdebug, которое позволяет расставить точки останова и посмотреть окружение в предполагаемом месте ошибки, выполняя код поэтапно либо до следующей точки.

Чтобы воспользоваться PHP Debug, необходимо:

1. Установить сам Xdebug. Без него расширение работать не будет.
2. Добавить конфигурацию для PHP в разделе Debug . После этого в корне проекта создастся файл .vscode/launch.json с задачами для дебаггера. Файл будет со стандартными параметрами.
3. Добавить настройки в файл конфигурации php — так XDebug будет общаться с нашим дебаггером. Чтобы найти этот файл, в терминале нужно выполнить команду php —ini или запустить веб-сервер с кодом phpinfo() .
4. В Linux PHP подгружает не только основной файл, но и файл из этой директории. Например, на Ubuntu путь к директории конфигурационных файлов для PHP может быть таким: /etc/php/7.3/cli/conf.d/ . В ней нужно создать файл с необходимыми правами (требуются root права):

Это настройки для локальной разработки, когда проект создается и запускается на одном компьютере.

PHP CodeSniffer

В языках программирования есть понятие — стиль кодирования. Это набор правил написания кода. Сейчас нас интересуют стандарты PSR-1 и PSR-12: они касаются кодирования и правил оформления.

Программа, которая отвечает за проверку на соответствие стандартам — это линтер. В PHP в качестве линтера используется PHP_CodeSniffer. Для его работы необходимо установить сам линтер composer global require "squizlabs/php_codesniffer=*" и расширение PHP Sniffer.

Проверьте, что линтер установился:

Выполнить проверку кода в терминале можно с помощью команды phpcs , указав стандарт, который мы хотим использовать, и путь для проверки:

Semicolon Insertion Shortcut

PHP требует разделять инструкции с помощью точки с запятой. Расширение Semicolon Insertion Shortcut добавляет необходимый символ в конец строки с помощью шортката. Если при нажатии [Ctrl] + ; символ не вставляется, то необходимо проверить список горячих клавиш и при необходимости назначить комбинацию вручную:

File → Preferences → Keyboard Shortcuts

Введите в строку поиска insert semicolon, чтобы быстро найти нужную комбинацию.

Читайте также: Как включить строгую типизацию в PHP и для чего ее использовать

VS Code для разработки на JavaScript

Как устанавливать расширения

Как мы уже сказали ранее, в VS Code есть встроенный пакетный менеджер. Он нужен для установки и удаления пакетов расширений — плагинов. Для удобной бэкенд- и фронтенд-разработки на JavaScript нужно установить несколько пакетов.

Для установки нового пакета зайдите во вкладку «Extensions», которая находится в выпадающем меню «View». Потом введите название пакета в строке поиска и нажмите кнопку «Install».

Какие плагины установить для разработки на JavaScript

Babel

В VS Code есть понятие сборки проекта. Редактор можно настроить так, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode . Она находится в корне вашего проекта:

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B (macOS) запустит сборку.

Подробнее о tasks можно узнать на сайте VS Code.

Стандарты кодирования

ESlint — это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

Сначала нужно установить ESlint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер.

Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

1. Установите Node.js, используя пакетный менеджер вашей операционной системы.
2. Установите ESlint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .
3. Установите плагины, которые конфигурируют eslint . Без них по умолчанию eslint ничего не проверяет.

npm install -g eslint-config-airbnb-base eslint-plugin-import

1. ESlint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:

1. Установите расширение «linter-eslint» в VS Code.

Читайте также: Как учитель на экзамене: зачем разработчику линтер и как он помогает сделать код понятнее

Автоматическое дополнение

VS Code содержит мощную систему анализа кода для автодополнений и подсказок — IntelliSense.

IntelliSense работает сразу после скачивания, но для настройки деталей нужно создать конфигурационный файл jsconfig.json .

Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json , то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:

Здесь можно настроить, например, то, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

Отладка

У VS Code есть встроенный отладчик кода. Вы можете, например, отметить брейкпоинты — точки останова — и следить за состоянием приложения в реальном времени.

Подробнее об отладке можно узнать на сайте VS Code.

Читайте также: Как использовать точки останова в своем коде на JavaScript

Расширения, которые помогут эффективнее работать с Git и читать код

— в VS Code уже встроена поддержка Git. Но когда базовых возможностей становится недостаточно, на помощь приходит GitLens. Например, одна из его полезных фич — git blame на текущей строке.

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

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

Мы привели самые популярные и необходимые расширения в Visual Studio Code, которые упростят разработку на PHP JavaScript. Все они — бесплатные и кроссплатформенные.

Если вы захотите ознакомиться с другими расширениями этого редактора, переходите на официальный портал Visual Studio Marketplace. Там есть плагины не только для PHP- и JavaScript-разработки, но и для программирования на Python, C++, C# и на других языках.

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

ТОП-7 онлайн-компиляторов для JavaScript: что это, зачем нужно, обзор лучших

Онлайн-компиляторы — это инструменты для компилирования исходного кода и выполнения его прямо в браузере. Компилятор JavaScript — это веб-приложение, которое конвертирует программу на JavaScript в JS-файл. Такой файл может исполняться на любой платформе (если она поддерживает JavaScript). Онлайн компилятор JavaScript ускоряет работу программиста, разработчика, веб-дизайнера. Другими словами — любого специалиста, кто работает с кодом JS.

Хотя технически запустить или протестировать JS-код можно и без компилятора, но без него выполнить эти задачи будет довольно сложно и главное — это займет много времени (ведь файлы JS придется переформатировать вручную, а это может вызывать дополнительные ошибки).

Простыми словами, онлайн компилятор JavaScript — это веб-приложение, которое поможет выполнить или протестировать любой JS-код прямо в браузере

CodeX — онлайн компилятор для всех популярных языков (включая JavaScript, Java, C++, Python и других)

Зачем использовать компилятор

Открывать редактор кода, загружать файл с пустым JS и пустым CSS-файлом, разными версиями библиотек — неудобно (особенно, если вам нужно просто выполнить или протестировать маленький кусочек кода).

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

Основная роль компилятора заключается в переводе языков высокого уровня в языки низкого уровня, понятные компьютеру. Например:

• В языке C или C++ компилятор напрямую преобразует исходный код в код машинного языка, который зависит от платформы (операционной системы).
• В Java все иначе: этот язык может использовать собственный компилятор Javac (для перевода исходного кода в байт-код).
• Наконец, в языке JavaScript — вы можете выбрать абсолютно любой компилятор, если у вас нет специфических требований к нему.

Что должно быть в компиляторе JavaScript

Обратите внимание на наличие следующих возможности и технологий (при условии, что они вам нужны):

• Поддержка работы в командном режиме.
• Поддержка определённых фреймворков (либо библиотек). Например, библиотеки jQuery, фреймворка Angular или JavaScript-библиотеки React.
• Поддержка нужных вам пре- или пост-процессоров.
• Поддержка разных видов «стилей» (normalized, SCSS, PostCSS).

ТОП-7 лучших онлайн компиляторов, редакторов кода и IDE

Приступаем к обзору лучших инструментов. Здесь вы найдете не только отдельные компиляторы, но и полноценные среды разработки (IDE).

Существуют онлайн компиляторы для конкретных языков, например, для работы с языком C

Начнем с наиболее удачного онлайн-компилятора, который можно рекомендовать каждому, кто работает с JS — JSFiddle.

JSFiddle

Один из самых популярных компиляторов для JS. Если вы регулярно тестируете небольшие фрагменты кода и хотите делать это прямо в браузере, JSFiddle — ваш выбор. Этот компилятор настолько удобен, что просто нечего добавить. Компилятор постоянно обновляется. Например, недавно внедрили подсказки CSS и быстрый экспорт в GitHub.

Изменяем код JS прямо в браузере

JSFiddle также позволяет работать с другими пользователями в командном режиме, сохранять ранее созданные фрагменты и делиться ими (для особо сложных случаях или если у вас просто не получается победить особо хитрый JavaScript).

StackBlitz

Полноценный интегрированная среда разработки (IDE) с поддержкой JavaScript. StackBlitz разработан на базе WebContainers, что позволяет загружает среду Node.js за считанные секунды. И вся эта красота работает в любом браузере, прямо во вкладке.

Интерфейс StackBlitz. Работа с кодом

Вот еще несколько особенностей StackBlitz:

• Безопасно. Вся работа с кодом происходит в браузере (включая инициализацию Node.js и Git).
• Бесшовно. Доступна отладка с помощью Chrome DevTools — для бэк- и фронтенд приложений.
• Быстро. Среда запускается за миллисекунды — даже переустановка node_modules выполняется так же просто, как обновление страницы.
• Можно работать офлайн, если соединение недоступно в настоящий момент. Все сохраняется автоматически.
• Приложения всегда онлайн: ваши приложения никогда не уходят в сон, нет лимитов по пропускной способности.
• Можно быстро расшарить ссылку.

CodePen

Удобный онлайн-компилятор для JS и редактор кода в одном флаконе. Он универсален, быстр, функционален. Позволяет полноценно работать и в бэкенде, и во фронтэнде.

Работа с кодом в CodePen особенно порадует фронтенд-программиста

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

• Позволяет расширить платформу, включив в нее дополнительные возможности и функциональность.
• Поддержка drag-and-drop. Можно перетаскивать изображения, CSS, JSON-файлы, SVGS, медиафайлы и так далее.
• Скрытие. Можно скрывать выбранные строки или целые разделы, все это без какого-либо ущерба для предыдущей работы.
• Подсказки. Хорошее выделение синтаксиса JS — цвета, фоны и шрифты привлекают внимание к определенным текстовым элементам или группам таких элементов.

Cloud9 IDE

Крутой компилятор JS со всем необходимым для полноценной разработки веб-приложений. Работает в облаке.

Так выглядит интерфейс десктоп-версии Cloud9 IDE

Cloud9 IDE предоставляет не только сам компилятор, но и целый набор инструментов, включая IDE с интегрированным отладчиком и функциями завершения кода. Здесь также есть продуманные инструменты для совместной работы, встроенный терминал Ubuntu и предварительный realtime-просмотр.

CodeSandbox

Приятный онлайн-редактор кода JavaScript с компилятором. Присутствует поддержка всех технологий для быстрого создания прототипов.

Работа с кодом в CodeSandbox

CodeSandbox поддерживает все основные языки и фреймворки для фронтэнд-специалиста

• Требует минимальной настройки.
• Быстрый процесс компиляции с подсказками.
• Продуманный и функциональный редактор кода JavaScript, который поддерживает быстрое прототипирование.
• Песочницу можно загружать и делиться ею с другими участниками проекта.
• Есть поддержка всех современных JavaScript-фреймворков (включая React, Angular, Node и других).

Бонус — когда компилятора не хватает: +2 инструмента

Если функций онлайн-компилятора для работы недостаточно, обратите внимание на IDE. В них есть всё, что может понадобиться профессиональному разработчику JS.

Visual Studio Code

И завершает наш обзор, пожалуй, самая популярная IDE в мире — Visual Studio Code. Это многоплатформенный редактор кода от Microsoft. Уже несколько лет подряд, согласно данным Stack Overflow, эта IDE признается самым популярным продуктом в своем классе (например, в 2021 году 70% от 82 тысяч опрошенных сообщили, что из IDE используют ТОЛЬКО Visual Studio Code).

Программирование на JS в Visual Studio Code

Visual Studio Code похож на редактор GitHub Atom и даже использует некоторые из тех же компонентов, но при этом он не является его форком. VSC — основная IDE для приложений .NET Core, которые работают в средах, отличных от Windows.

Visual Studio Code подходит для самых разных языков:

• Java.
• C#.
• JavaScript.
• C++.
• Python.
• И других.

Кроме хорошего отладчика для JavaScript и кода на других языках, в VSC есть:

• Поддержка контроля версий исходного кода (Git).
• Выполнение кода.
• Отладка программ.
• Очень большая библиотека сторонних и оригинальных расширений.
• Уже из коробки он легко интегрируется с Git.

Большая часть этой популярности, несомненно, объясняется ценовой моделью VSC: это полностью бесплатный продукт. А opensource привлекает и начинающих, и профессиональных разработчиков.

WebStorm

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

WebStorm — умная среда разработки JavaScript от JetBrains

Не нужно использовать сторонний клиент или эмулятор терминала. Есть неплохой отладчик внутри IDE (для подключения к отладчику Google Chrome или Mozilla Firefox).

Но и эти функции далеко не всё, что умеет IDE. Вот, что можно выделить дополнительно и что понравилось нам:

• Умное автодополнение (исходя их контекста).
• Навигатор БД.
• Поддержка большинства фреймворков (от React и Angular до Node и устаревшей RequireJS, а также многих других).
• Легкое добавление чужих фреймворков и неподдерживаемых API.
• Все настраивается с помощью интерфейса. Например, нет необходимости изучать и поддерживать файл конфигурации, WebStorm сделает всё за вас).
• Продуманный поиск (в файлах, в функциях, в переменных, в меню, в настройках и даже в действиях).
• Вы можете добавить пользовательское меню — в соответствии с вашими потребностями.
• Вы можете привязать команды и программы. Затем — назначить ярлыки и меню этим командам (очень полезно для grunt / gulp).

Порадовал также полностью настраиваемый пользовательский интерфейс и несколько отличных тем, доступных по умолчанию.

Компилятор платный: придется приобрести тариф, чтобы пользоваться IDE без ограничений. Но есть бесплатная 30-дневная версия, поэтому вы можете попробовать его и сразу определить все плюсы и минусы.

На этом мы завершаем наш список семи лучших онлайн-компиляторов. Да, существуют и множество других вариантов, но эти семь — самые продуманные и функциональные. Все разобранные нами компиляторы просты в использовании (за редким исключением), обладают интуитивным интерфейсом и прекрасно выполняют свою основную задачу. При этом — не нужно тратить время на какую-то специфическую или сложную настройку IDE.

Почему у JavaScript никогда не было компилятора «из коробки»?

JS — это интерпретируемый язык, поэтому по умолчанию он не имеет компилятора. JS интерпретируется браузерами, которые имеют свои собственные «движки» JavaScript.

Несколько лет назад началась тенденция превращения браузерных JS-движков в полноценные компиляторы. Например: