Если вы начинающий JS-разработчик, вам лучше иметь под рукой краткий список самых необходимых и полезных в работе инструментов. В этой статье собран такой список в виде краткой шпаргалки, которая поможет вам не потеряться на начальном этапе карьеры.
Меня зовут Александр Дудукало, я курирую направление «Веб-разработка» в Skillbox. Мои выпускники, посвятившие себя фронтенд-разработке, часто рассказывают о том, что им бывает очень непросто сориентироваться в обилии существующих технологий, особенно поначалу. Человек приходит в новую компанию, ему дают какой-то проект, включают в рабочую группу в корпоративном чате, и он остается один на один с поставленной тим-лидом задачей. Обычно в подобной ситуации джун испытывает растерянность, поскольку не знает, за что хвататься в первую очередь, какой софт ему нужен для работы, где черпать полезную информацию. Эта статья — своего рода шпаргалка по экосистеме фронтенд-разработчика на JS, которая поможет начинающему программисту почувствовать себя более комфортно в процессе погружения в свой первый самостоятельный проект.
Урок JavaScript №2 — Куда писать код | Курс FrontEnd 2021
Сообщества, полезные любым IT-специалистам
Что ни говори, а человек — существо коллективное, поэтому без поддержки и помощи себе подобных ему никак не обойтись. JS-разработчик тоже человек, и ему очень пригодятся знания, которыми готовы делиться с коллегами окружающие. К счастью, у нас под рукой есть интернет, хранящий терабайты ценной информации, важно лишь выбрать в нем наиболее адекватные и актуальные ресурсы.
Пожалуй, основным источником информации для любого программиста является GitHub — крупнейший веб-сервис для хостинга IT-проектов и их совместной разработки. На гитхабе можно отыскать не только исходники различных проектов, но также всевозможную техническую документацию, которая поможет вам в реализации сложных задач и подскажет ответы на самые насущные вопросы. И, конечно, каждый уважающий себя разработчик должен завести собственную страничку на GitHub. Это может быть публичная страница, которая позволит продемонстрировать собственный код потенциальному работодателю и вести совместные проекты с другими разработчиками, или закрытая страница, предназначенная только для личного использования.
GitHub — отличная альтернатива коммерческому хостингу: портал позволяет не просто создать собственный репозиторий кода, но также писать документацию с вики- markdown- или html-разметкой, осуществлять контроль версий, собрать собственную команду или вступить в уже существующую, задавать вопросы и оставлять комментарии. Иными словами, это целая социальная сеть с уклоном в программирование.
Кроме GitHub, следует отметить портал Stack Overflow. Это, пожалуй, самый большой форум в интернете, содержащий информацию и обсуждения по всем языкам программирования, не только по JavaScript. Если у вас возникло какое-либо затруднение или появился кажущийся нерешаемым вопрос, будьте уверены, что ответ вы найдете на Stack Overflow.
Игра на JavaScript с нуля для начинающих. ОЧЕНЬ ПРОСТО!
Ссылки именно на этот портал обычно появляются в выдаче первыми, когда мы ищем информацию по программированию в Google. Пользователи этого ресурса общаются на английском языке, но в разделе форумов есть ветки на русском. Кроме того, при необходимости всегда можно воспользоваться онлайн-переводчиком.
Из русскоязычных источников информации следует, безусловно, упомянуть сайт Tproger, на котором собрано очень много полезной информации по JavaScript, и полезный учебник https://learn.javascript.ru, в котором собраны уроки по JavaScript/DOM начиная с самых основ. Имеет смысл взять на вооружение тематические каналы в Тelegram: список самых полезных из них был не так давно опубликован на портале Tproger, еще один перечень можно найти на сайте Techrocks. И конечно же, «Хабр» — здесь можно почерпнуть полезные лайфхаки, научиться новым приемам программирования и почитать лонгриды о полезном инструментарии.
Кроме того, разработчик, тем более начинающий, не должен пропускать отраслевые мероприятия и связанные с его профессией ивенты. На тех же порталах, которые я упоминал выше, регулярно публикуются анонсы предстоящих конференций, митапов и вебинаров, выходящих подкастов. Часть мероприятий проводится в очном формате, часть — в режиме онлайн. Рост экспертности и опыта невозможен без общения с коллегами, поэтому крайне важно находиться в этой среде, обсуждать проблемы, задавать вопросы, принимать участие в дискуссиях. Не пренебрегайте этой возможностью.
Платформа Node.js
Очевидно, что самый простой способ запустить программу на JavaScript — использовать браузер. Обычно он и применяется в процессе разработки фронтенда. Но часто возникает необходимость запускать JS-приложения вне браузера, например при написании и тестировании каких-либо серверных приложений, для которых не требуются браузерные функции и компоненты. Благодаря появлению программной платформы Node.js JavaScript-код можно запускать на устройствах с операционными системами Windows, Linux и macOS без использования браузера.
Node.js пользовалась популярностью прежде всего потому, что она позволяла добиться одинакового отображения сайтов и веб-приложений в разных браузерах. До определенного момента внешний вид элементов, созданных с использованием JavaScript, различался в разных браузерах.
Происходило это потому, что между их производителями отсутствовала договоренность по синтаксису языка и визуальному представлению. С помощью Node.js эта проблема успешно решалась. Кроме того, библиотека имела дополнительный функционал, который помогал работать с запросами на сервер, создавать анимацию, использовать элементы навигации.
Иными словами, это был очень полезный подключаемый инструмент, который заметно облегчал жизнь разработчика. Но JavaScript активно развивается, и теперь интерпретатор этого языка во всех браузерах практически одинаков, поэтому от использования Node.js сегодня понемногу отказываются. Зачем нагружать код дополнительным подключаемым файлом, если без этого можно обойтись?
Инструменты разработки
Для написания кода нужен простой, удобный и по возможности бесплатный редактор. Одним из самых популярных является Visual Studio Code (VS Code), разработанный корпорацией Microsoft, — он поддерживает синтаксис многих языков программирования, в том числе JavaScript. В нем уже «из коробки» имеется множество полезных функций — встроенный отладчик и средства для рефакторинга, а недостающие возможности без труда добавляются в редактор установкой плагинов. При этом дополнений для VS Code существует множество — их можно добавлять как с помощью встроенного инструментария самого редактора, так и с сайта Microsoft, где над их разработкой и поддержкой трудится целое сообщество программистов. В других редакторах расширения подключаются из командной строки, что не слишком удобно.
Еще один текстовый редактор, специально созданный для разработки кода, носит наименование Sublime Text. Он поддерживает подсветку синтаксиса многих языков, включая JavaScript, и позволяет подключать плагины. Так же, как и WebStorm, он платный.
К инструментам разработки можно отнести и полезные плагины — о некоторых мы уже подробно рассказывали в предыдущей статье. Помимо них, следует упомянуть набор плагинов Emmet — они значительно облегчают и упрощают написание кода не только на JavaScript, но также на HTML, XML, XSL и других языках. Плагины Emmet сами написаны на JavaScript, они уже встроены в VS Code, а к другим редакторам подключаются в виде надстроек и распространяются бесплатно на основе открытой лицензии. Этот минимально необходимый инструментарий, который следует освоить любому разработчику.
Инструменты для автоматизированного и юнит-тестирования
Прежде чем мы перейдем к перечислению этого инструментария, необходимо отметить, что само по себе тестирование бывает разным: тестирование кода или тестирование приложения, когда специалист эмулирует действия пользователя с целью вызвать сбой или ошибку программы. Для этого применяются различные средства автоматизации, которые позволяют в сжатые сроки проверить работу приложения и при необходимости внести в код необходимые коррективы.
Наиболее популярной системой тестирования в стеке фронтенд-разработки на JavaScript является Jest. Это среда тестирования JavaScript, созданная на основе среды тестирования JavaScript с открытым исходным кодом Jasmine. Она позволяет тестировать программы, написанные с использованием Babel, TypeScript, Node, React, Angular, Vue и других фреймворков. Пожалуй, самое большое достоинство Jest состоит в том, что для большинства проектов на JavaScript этот инструмент может работать без дополнительных настроек. Для Jest имеется развернутая документация на русском языке, и кроме того, есть обширное русскоязычное сообщество.
Языки, компилируемые в JavaScript
Языки, компилируемые в JavaScript — это тоже часть экосистемы разработчика. Основным среди них является TypeScript, созданный корпорацией Microsoft. TypeScript расширяет возможности JS в вопросах типизации: в этом языке переменная может менять свой тип в зависимости от ситуации. Однако эта медаль, как водится, имеет две стороны: хотя удобство разработки и повышается, но возможность явного статического назначения типов переменных и использование полноценных классов создают предпосылки для ошибок в коде.
Код на TypeScript компилируется в JavaScript. Для решения простых задач TypeScript не нужен, но тем не менее сегодня этот язык стал стандартом де-факто и занимает значительную часть рынка. Он поддерживается многими фреймворками, например, Angular — созданной Google открытой платформы для разработки веб-приложений. Сама эта платформа написана на TypeScript. Поэтому, если вы планируете использовать Angular, вам придется освоить этот язык.
Компонентные фреймворки
Фреймворки включают набор функций, элементов, модулей, которые позволяют нам быстро создавать компоненты для приложений и соединять их вместе. Обычно фреймворки обладают возможностью работать с сервером, то есть они решают ту часть задач, которая обычно выпадает на долю разработчика. Фактически они позволяют не изобретать собственный велосипед всякий раз, когда вам нужно куда-то доехать. Самые известные из JS-фреймворков — это React, Vue.js и Angular.
React — пожалуй, самый популярный и универсальный JS-фреймворк. Изначально он был создан Джорданом Валке, разработчиком программного обеспечения из Facebook, в виде JavaScript-библиотеки с открытым исходным кодом для сборки пользовательских интерфейсов.
Чаще всего React применяют для создания простых одностраничных приложений, но фактически с его помощью можно реализовать проекты любой сложности. Пожалуй, главное его достоинство — большое сообщество, а это означает возможность получить ответы практически на любые ваши вопросы. Этой технологии посвящено множество форумов, где можно отыскать ценную информацию. На основе React создано много дополнительных библиотек, упрощающих разработку приложений на JavaScript.
Платформу Angular я уже кратко упоминал выше — это популярный фреймворк для создания веб-приложений, разрабатываемый совместно командой из компании Google и независимым сообществом программистов. С помощью Angular можно строить довольно сложные веб-приложения, и лучше всего этот фреймворк подходит для разработки больших проектов с жесткой структурой.
У Angular имеется уникальная возможность обеспечивать обратную взаимосвязь данных. То есть можно изменить данные на стороне фронтенда, а на сервере соответствующие изменения произойдут автоматически. Этот же принцип работает и в обратном направлении: такую синхронизацию обеспечивает Angular. Но этот фреймворк сложнее в изучении и использовании, поскольку требует обязательного знания TypeScript.
Vue.js — JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов. Недавно состоялся релиз третьей версии этого фреймворка, значительно расширивший его возможности, и сейчас Vue.js активно развивается. Лично мне он нравится тем, что у Vue.js имеется очень хорошая документация на русском языке, содержащая множество наглядных примеров. Иными словами, если вы не поленитесь прочитать документацию, у вас не останется шанса не понять Vue.
Этот фреймворк очень прост, но при этом Vue — мощный инструмент, который позволяет создавать полноценные приложения. У него также есть дополнительные подключаемые модули, библиотеки, которые дают возможность создавать полноценные мобильные приложения.
Чаще всего Vue используется, когда имеется большой проект, построенный без применения каких-либо дополнительных инструментов, и необходимо перейти к использованию фреймворка. Он дает такую возможность. Вы можете постепенно выделять или создавать отдельные компоненты и шаг за шагом переводить сайт или веб-приложение на Vue.js.
У Vue есть отличная система анимации, с помощью которой можно анимировать все что угодно, используя транзишены — эффекты плавного анимированного перехода от одного состояния к другому. Они создают ощущение отзывчивости интерфейса, пример такой анимации — сдвигающееся меню, переворачивающиеся страницы на сайте. Для начинающих разработчиков, на мой взгляд, это идеальный фреймворк.
Инструменты автоматизации сборки
Если JavaScript используется исключительно для верстки веб-страниц, то для автоматизации сборки обычно применяется Gulp. Если речь идет о разработке фронтенда приложения, лучше всего подойдет Parcel — это один из самых простых сборщиков. А для более серьезных и масштабных проектов лучше выбрать Webpack — он предоставляет удобный способ сконфигурировать настройки нашего сборщика. Для расширения возможностей этого инструмента можно подключить к нему дополнительные библиотеки, модули, инструменты и плагины.
Многие фреймворки работают с собственными сборщиками — например, Webpack используется в Vue.js. Лично я для сложных задач выбираю именно его, а для простых сайтов, лендингов или одностраничных веб-приложений применяю Parcel.
Безусловно, в этой статье я перечислил далеко не все существующие сегодня инструменты, входящие в экосистему JS-разработчика. Например, вопрос оптимизации JS-приложений стоит очень остро: в частности, для оценки производительности веб-приложений используется инструментарий Chrome Dev Tools. Если у вас есть любимые библиотеки или полезные приложения, о которых я не упомянул, обязательно поделитесь ими в комментариях.
Источник: habr.com
Разработка кода JavaScript и TypeScript в Visual Studio без решений или проектов
Область применения:Visual Studio
Visual Studio для Mac
Visual Studio Code
Начиная с Visual Studio 2017 вы можете разрабатывать код без проектов и решений. Вы можете открыть папку кода и сразу же приступить к работе в полнофункциональном редакторе, используя IntelliSense, поиск, рефакторинг, отладку и многое другое. Помимо этих функций, в инструменты Node.js для Visual Studio добавлена поддержка сборки файлов TypeScript, управления пакетами npm и выполнения сценариев npm.
Чтобы приступить к работе, выберите Файл>Открыть>Папку на панели инструментов. Обозреватель решений отображает все файлы в папке, и можно открыть любой из файлов, чтобы начать редактирование. В фоновом режиме Visual Studio индексирует файлы, предоставляя функции npm, сборки и отладки.
Перед использованием проекта Open Folder попробуйте создать решение на основе существующего кода Node.js. В некоторых сценариях этот метод обеспечивает лучшую поддержку функций в Visual Studio. Чтобы создать проект, выберите Файл > Новый проект > JavaScript > из существующего кода Node.js, а затем выберите папку проекта в качестве источника.
Предварительные требования
- Visual Studio 2017 версии 15.8 или более поздней версии
- Необходимо установить рабочую нагрузку разработкиNode.js Visual Studio
Интеграция npm
Если открытая папка содержит файл package.json, щелкните правой кнопкой мыши package.json, чтобы открыть контекстное меню для npm.
В контекстном меню вы можете управлять пакетами, установленными npm, так же, как вы управляете пакетами npm при использовании файла проекта.
Кроме того, в меню можно выполнять сценарии, определенные в элементе scripts в package.json. Эти скрипты будут использовать версию Node.js, доступную в переменной среды PATH . Скрипты выполняются в новом окне. Это отличный способ сборки и выполнения скриптов.
Сборка и отладка
package.json
Если package.json в папке указывает элемент main , команда отладки будет доступна в контекстном меню для package.json. При нажатии этой кнопки запускается node.exe с указанным скриптом в качестве аргумента.
Файлы JavaScript
Вы можете отлаживать файлы JavaScript, щелкнув файл правой кнопкой мыши и выбрав Отладка в контекстном меню. Запустится node.exe с этим файлом JavaScript в качестве аргумента.
Если вы не видите пункт меню Отладка , может потребоваться создать проект из существующего Node.js кода, как описано выше.
Файлы TypeScript и tsconfig.json
Если в папке нет файла tsconfig.json, щелкните правой кнопкой мыши файл TypeScript, чтобы открыть команды контекстного меню и скомпилировать и отладить этот файл. При использовании этих команд сборка и отладка выполняются с помощью tsc.exe с параметрами по умолчанию. (Вам нужно создать файл до отладки.)
При создании кода TypeScript мы используем последнюю версию, установленную в C:Program Files (x86)Microsoft SDKsTypeScript .
Если в папке есть файл tsconfig.json, щелкните правой кнопкой мыши файл TypeScript, чтобы открыть команду меню для отладки этого файла TypeScript. Этот параметр отображается только в том случае, если в tsconfig.json не указан outFile . Если outFile указан, для отладки этого файла щелкните правой кнопкой мыши tsconfig.json и выберите нужный параметр. Файл tsconfig.json также предоставляет параметр сборки для указания параметров компилятора.
Модульные тесты
Вы можете включить интеграцию модульных тестов в Visual Studio, указав тестовый корень в файле package.json:
Средство запуска тестов перечисляет локально установленные пакеты, чтобы определить, какие платформы тестирования использовать. Если ни одна из поддерживаемых платформ не распознается, выбирается средство выполнения тестов по умолчанию ExportRunner. Другие поддерживаемые платформы:
- Mocha (mochajs.org)
- Jasmine (Jasmine.github.io)
- Tape (github.com/substack/tape)
- Jest (jestjs.io)
После открытия обозревателя тестов (выберите Тест>Windows>Обозреватель тестов) Visual Studio обнаруживает и отображает тесты.
Средство выполнения тестов перечисляет только файлы JavaScript в тестовом корне. Если ваше приложение написано в TypeScript, вам нужно сначала создать их.
Источник: learn.microsoft.com
ТОП-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.
Среда VSC построена из opensource-компонентов и частично с использованием проприетарных компонентов Microsoft.
Visual Studio Code подходит для самых разных языков:
Кроме хорошего отладчика для 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-движков в полноценные компиляторы. Например:
- Движок Google V8 (движок JS, на котором основан серверный JavaScript — NODE.js) вместо традиционной интерпретации преобразует код JavaScript в машинные инструкции.
- Движок Mozilla JaegerMonkey также действует как компилятор работающий по концепции ТВС (точно-в-срок).
Источник: loftschool.com