Редакторы кода для программирования на JavaScript
Рассказываем, что редакторы кода и какие лучше использовать для JavaScript.
Павел Шаранда
Автор статьи
11 ноября 2022 в 13:01
Есть много редакторов кода для JavaScript: платные и бесплатные, созданные энтузиастами и корпорациями, новые игроки и проверенные временем приложения.
В этой статье рассмотрим редакторы, которые актуальны в конце 2022 года и лучше всего подходят для тех, кто решил начать программировать на JavaScript.
Что такое редакторы кода и IDE
Программный код хранится в обычном текстовом файле, с которым можно работать в любом текстовом редакторе. Чтобы увеличить продуктивность, лучше использовать специализированные редакторы кода. В них есть функции, которые облегчают программирование: подсветка синтаксиса, автодополнение, быстрая навигация по коду.
Еще есть целые программные комплексы, которые включают в себя не только редактор кода, но и компилятор, отладчик, менеджер проектов, контроль версий и многое другое. Такие приложения называют IDE — Integrated Development Environment.
Некоторые разработчики предпочитают IDE как централизованное решение «всё-в-одном». Другие же пользуются легковесными редакторами кода, а всю остальную функциональность получают с помощью плагинов и консольных утилит.
На что обратить внимание при выборе редактора для JS
Работа с кодом
Редактор для написания кода должен обязательно уметь подсвечивать синтаксис, проверять ошибки, автоматически дополнять код, иметь поддержку инструментов рефакторинга.
Основам этой работы учат на курсе Skypro «Веб-разработчик». Учеба длится всего 12 месяцев. Навыки закрепите на реальных задачах: подключите JavaScript к проекту и сделаете стильный лендинг с играми. На всём пути обучения помогают опытные преподаватели и наставники.
Расширяемость
У разработчиков редакторов физически нет ресурсов, чтобы удовлетворить все узкоспециализированные запросы пользователей. Поэтому в хорошем редакторе кода есть система плагинов, с помощью которых сторонние разработчики могут расширять его функциональность.
Актуальность и популярность
Мир JavaScript-разработки развивается, поэтому есть смысл выбирать только из самых популярных и активно поддерживаемых проектов, иначе есть риск столкнуться с ошибками несовместимости устаревших редакторов и новых версий языка или инструментария. Atom и Brackets — яркие примеры того, как популярные редакторы были закрыты компаниями, которые их создали.
Скорость работы
Это важный пункт, если ваш компьютер не самого последнего поколения. Далеко не все редакторы хорошо оптимизированы, поэтому обращайте внимание на совместимость редактора и вашего ПК.
Интуитивность интерфейса
Разработчик проводит в редакторе кода большую часть времени. Неудобным инструментом неудобно пользоваться, поэтому редактор должен быть разработан так, чтобы пользоваться им можно было на интуитивном уровне.
Внешний вид
Дизайн редактора должен быть комфортным для глаз. Обращайте внимание на то, есть ли в редакторе темная тема.
Цена
Если продукт бесплатный, то, скорее всего, это не значит, что страдает качество. Бесплатные продукты обычно полагаются на поддержку сообщества и открытый код. А вот платные продукты предлагают персональную поддержку, где вам помогут решить именно вашу проблему. А также узкоспециализированные функции, такие как командная работа или интеграции с cloud-сервисами.
Станьте Java-разработчиком в два раза быстрее
Ускоренный курс для тех, кто хочет быстрее перейти на удаленку
Visual Studio Code
Платформы: Windows, Linux, macOS
Цена: бесплатно
Преимущества:
- открытый бесплатный редактор кода от Microsoft;
- поддержка JavaScript, TypeScript, PHP, Python, C++ и многих других языков программирования;
- подсветка синтаксиса, автодополнение кода, мощные инструменты рефакторинга;
сборка и отладка JavaScript-приложений; - широкие возможности настройки пользовательского интерфейса и поддержка тем;
- огромное количество расширений на все случаи жизни, удобный интерфейс для их поиска и
- установки, напоминающий App Store;
- интегрированный клиент Git;
- встроенный терминал для удобной работы с консольными приложениями;
- поддержка от Microsoft, качественная документация и видео для начинающих;
- проект активно развивается, постоянные обновления и выстроенный процесс обратной связи с пользователями;
- хорошая скорость работы;
- легковесный.
Минусы:
- понадобится некоторое время на освоение, так как в редакторе довольно много разных
- меню и настроек;
- не все расширения от сторонних разработчиков стабильно работают.
Visual Studio
Платформы: Windows, macOS
Цена: $45/месяц
Преимущества:
- комплексная IDE от Microsoft;
- поддержка JavaScript, TypeScript, C#, F#, C++, Python;
- применяется для разработки и отладки всех типов приложений: настольных, веб-, игровых серверных и мобильных;
- есть бесплатная версия для некоммерческого использования;
- система плагинов для расширения функциональности;
- инструменты для работы с облачными решениями от Microsoft;
- документация.
Минусы:
- сложно освоить;
- ресурсоемкий;
- дорогой, только по подписке.
WebStorm
Платформы: Windows, Linux, macOS
Цена: $129/год
Преимущества:
- IDE от JetBrains, ориентированное на веб-разработку;
- не требует начальной настройки;
- интеллектуальное автодополнение, проверка ошибок на лету, советы по улучшению кода;
- быстрая навигация по коду и доступ к документации;
- мощные инструменты рефакторинга;
- встроенная интеграция с системами контроля версий;
- IDE отслеживает все изменения, внесенные в файлы проекта, и позволяет откатить их, даже если еще не используется контроль версий;
- инструменты для удаленной командной работы, возможность парного программирования прямо внутри IDE;
- поддержка расширений;
- гибкая настройка пользовательского интерфейса.
Минусы:
- из-за обширной функциональности WebStorm тяжелый и ресурсоемкий;
- достаточно сложные настройки;
- длительная начальная загрузка;
- подписочная модель распространения.
JavaScript как язык разработки поддерживают другие IDE от JetBrains. Обратите на них внимание, если хотите работать, например, с PHP (PHPStorm), Java/Kotlin (IntelliJ Idea) или Ruby (RubyMine).
Если хотите работать с JavaScript, приходите на курс Skypro «Веб-разработчик». Не только научитесь работать с редакторами кода, но и разберетесь в переменных, функциях, объектах и массивах. Сможете самостоятельно и в командах решать задачи на языке JavaScript.
Notepad++
Платформы: Windows
Цена: бесплатно
Преимущества:
- легковесный редактор кода;
- высокая производительность;
- подсветка синтаксиса;
- поддержка расширений.
Минусы:
- устаревший внешний вид;
- доступен только для Windows.
Можно попробовать SciTE, который основан на том же текстовом движке и у которого много плагинов.
Sublime Text
Платформы: Windows, Linux, macOS
Цена: 99$
Преимущества:
- легковесный редактор кода;
- моментальный старт;
- очень высокая производительность при работе с текстом, не тормозит при работе с большими файлами;
- подсветка синтаксиса, автодополнение;
- современный и приятный внешний вид;
- поддержка расширений;
- гибкая настройка пользовательского интерфейса.
Минусы:
- необходима длительная настройка и установка различных расширений для превращения
- редактора в полноценное IDE;
- отсутствует встроенный терминал.
Редакторы не в списке
Vim и Emacs
Это классические бесплатные приложения с открытым кодом, которые доступны на всех платформах. Они регулярно обновляются, у них есть своя устойчивая база пользователей, но всё же рекомендовать их в 2022 году не стоит. У Vim и Emacs специфический и устаревший интерфейс, их тяжело освоить и настроить.
Про Vim часто шутят, что из него невозможно выйти. Намекают на то, что закрыть приложение можно только выполнив нетривиальный набор действий.
Brackets
В 2021 году Adobe прекратила разработку довольно известного редактора Brackets. Основная причина — возросшая популярность Visual Studio Code.
Оба редактора основаны на схожей архитектуре и подходах — использование web-технологий HTML, JavaScript, CSS для написания кода самого редактора. Скорее всего это и повлияло на решение Adobe объединить усилия вместо того, чтобы тратить ресурсы на борьбу с конкурентом.
При этом Brackets имеют открытый код и фанаты не теряют надежды на возрождение проекта.
Atom
По похожему сценарию развиваются события вокруг другого, прежде очень популярного, редактора Atom. Создатель приложения, компания GitHub, планирует закрыть проект уже в конце 2022 года и хочет сфокусироваться на идентичном продукте от своей материнской компании Microsoft — Visual Studio Code.
Функциональное Программирование в JavaScript
Существует много статей, видео и постов о функциональном программировании используя различные языки программирования и, в частности, о функциональном программировании в JavaScript (так же известном как ECMAScript). В основном, обсуждается как использовать различные парадигмы из чистых функциональных языков. Например, функция как объект первого класса, неизменяемые объекты, каррирование и т.д. Но, по-моему, главная ценность чистых функциональных языков — это отсутствие побочных эффектов. Частичное применение таких парадигм может уменьшить вероятность побочных эффектов, но не гарантирует их полное отсутствие. Почему важно отсутствие побочных эффектов в современном программном обеспечении? Побочные эффекты уменьшают кроссплатформенность и масштабируемость.
В мире уже существует большое количество чистых функциональных языков, и некоторые из них вполне успешно используются в индустрии. Например, Haskell, ELM, PureScript. Тем не менее, самый популярный и самый кроссплатформенный язык в индустрии это JavaScript, который не является чистым функциональным языком.
Почему функциональное программирование в JavaScript? Одна из причин, о которой уже было сказано, — это кроссплатформенность. JavaScript — это единственный язык программирования, который понимает практически любой браузер. Кроме того, один из самых популярных форматов данных JSON является подмножеством JavaScript. Несовместимость представления формата данных и типов в языке программирования иногда являются серьёзной проблемой. Например, сериализация ОО классов в такие форматы как JSON, зачастую, требует нетривиальных алгоритмов. Тогда как, для сериализации обычного JavaScript объекта нужно всего лишь вызвать одну функцию JSON.stringify .
Любая работающая программа уже имеет побочные эффекты. Например, ввод с клавиатуры и вывод на экран — это побочные эффекты. Тем не менее, основная часть программы, может обходиться без побочных эффектов используя различные методы и абстракции. Например, функцию с побочным эффектом (вывод на экран)
можно заменить на функцию без явных побочных эффектов
Такую чистую функцию можно использовать как с console.log так и с любой другой log функцией определённой пользователем. Например, можно сделать log функцию, которая выводит информацию в браузере на front-end или на back-end. Или передать mock-функцию, которая будет ожидать определённого поведения при тестировании функции pureAddAndPrint .
Обратите внимание, что определения функций используют каррирование, так как во многих функциональных языках, функции принимают только один аргумент. Альтернатива каррированию — использование кортежей в качестве аргумента.
Но, кортежи усложняют частичное применение функций. Например:
Ещё одна особенность чистых функциональных языков связана с безопасностью. Дело в том, что чистые функции не могут ничего сделать вне тех данных, которые им передали. Если же использовать функции с побочными эффектами, то растёт вероятность появления различных уязвимостей. Как пример, Log4Shell уязвимость. Если бы Log4J запрашивал все необходимые системы ввода-вывода как параметры инициализации (то есть, являлся бы чистой функцией), то, многие пользователи вряд ли бы инициализировали Log4J используя полный HTTPS протокол. В большинстве случаев, использовалась бы заглушка или урезанная версия HTTPS протокола, которая работает только на известных сайтах. В худшем случае, пользователь, возможно, задумался зачем нужен полный доступ к HTTPS в библиотеке журналирования. Устранить подобную уязвимость тоже было бы проще.
Можно писать программы, в которых большая часть логики написана без побочных эффектов. FunctionalScript является попыткой создания такого подмножеством языка JavaScript в котором нет побочных эффектов. При этом, нет надобности в компиляторах, в дополнительных шагах построения программы, в изобретении нового языка, в понимании как этот язык взаимодействует с JavaScript, и в привязке к поставщику инструментов. FunctionalScript — это открытая спецификация и любой модуль на FunctionalScript это уже готовый к использованию JavaScript модуль.
Проблема Рекурсии
Во многих чистых функциональных языках отсутствуют циклы, так как изменения данных зачастую приводит к побочным эффектам и недетерминированности. Если есть необходимость применить какую то операцию много раз, то это делают при помощи рекурсии.
Одна из проблем рекурсии в том, что она использует стек для хранения локальных данных и адреса возврата. Что очень быстро может приводить к переполнению стека и к остановке программы соответственно. В чистых функциональных языках эту проблему решают при помощи оптимизации хвостовой рекурсии. Что бы применялась хвостовая рекурсия, необходимо сделать так, что бы рекурсивный вызов последней операций. Например, приведенный выше пример факториала не будет оптимизирован, так как последняя операция — это не вызов factorial , а умножение. Что бы применялась хвостовая рекурсия, можно переписать factorial функцию:
В стандарте JavaScript (ECMAScript 6) ввели такую оптимизацию, но, к сожалению, Chrome и Firefox отказались поддерживать. То есть, на данный момент, можно сказать что в JavaScript нет оптимизации хвостовой рекурсии. Возникает проблема — если все объекты не изменяемы, то для циклов нужна оптимизация хвостовой рекурсии, которой нет в JavaScript.
Решение Проблемы Рекурсии в FunctionalScript
В FunctionalScript все данные неизменяемые, но есть исключение. Можно использовать let как переименование объекта. В этом случае, объект объявленный при помощи let не может быть использован во вложенных функциях и замыканиях, но, можно использовать внутри функции в которой этот объект объявлен.
Другой подход — использовать концепцию владение и перемещения изменяемых объектов, как это сделано в языке программирования Rust. Возможно, что в будущем, FunctionalScript будет использовать эту концепцию.
WebAssembly
С появлением WebAssembly появилась возможность делать Web приложения практически на любом языке. WebAssembly сам зародился из asm.js который, как и FunctionalScript, являлся подмножеством JavaScript.
- дополнительные шаги построения программы, компиляция;
- дополнительные шаги для взаимосвязи с объектной моделью JavaScript. Необходимость трансляции объектов во время исполнения программы учитывая JavaScript сборщик мусора, JSON объекты, асинхронные объекты и взаимодействие с периферией: DOM, IO.
- скорость исполнения,
- использования практически любого языка программирования.
Как и asm.js, FunctionalScript является подмножеством JavaScript и может выполняться в любом браузере без дополнительной трансляции. В отличии от asm.js, FunctionalScript является высокоуровневым языком. Как и для asm.js, для FunctionalScript можно построить отдельные оптимизированные VM, JIT и AOT компиляторы. Например, FunctionalScript не требует классического сборщика мусора и может прекрасно обходиться счетчиком ссылок. Все объекты в FunctionalScript неизменяемые, поэтому, можно оптимизировать их представление в памяти. Так как FunctionalScript является чистым функциональным языком, результат инициализации модуля всегда строго детерминирован и может быть кэширован, в том числе и глобально. Отдельные модули или их части могут быть транслированы в WebAssembly. Можно использовать другие языки, например ELM или подмножество TypeScript, транслировать их в FunctionalScript и публиковать как обычные JavaScript пакеты (например npm пакеты).
Ограничение JavaScript API
Такие функции как текущее время, сгенерировать случайное число, функции ввода-вывода, функции изменяющие состояние объектов — не могут быть доступны напрямую в FunctionalScript. Но, пользователь может использовать FunctionalScript модули для построения полноценной программы на JavaScript.
Типизация
FunctionalScript является динамически типизированным языком, но, можно использовать статическую типизацию используя JSDoc аннотации и TypeScript как валидатор. Например:
TypeScript использует структурную типизацию вместо номинальной. Мой личный опыт говорит о том, что языки с номинальной системой типов создают много проблем в проектах, в которых используется большое количество третье-сторонних модулей. Так как я большой сторонник модуляризации, мне больше симпатична структурная типизация.
Модули
На данном этапе, FunctionalScript использует Node.js (NPM) как менеджер пакетов и Common.js спецификацию определения модулей. Common.js легко реализовать даже не имея парсера FunctionalScript. Правильнее сказать, что FunctionalScript использует подмножество NPM и Common.js спецификаций. Не все NPM пакеты и не все JavaScript модули могут быть использованы в FunctionalScript. Но все FunctionalScript пакеты могут быть использованы в Node.js программах.
В дальнейшем, при развитии парсера, планируется добавить ECMAScript Modules.
В FunctionalScript системе модулей делается упор на детерминированность и версионность модулей. То есть, все внешние ссылки на модули/пакеты должны иметь определённую систему управления версиями, например Git.
На данном этапе, FunctionalScript не поддерживает динамическую и асинхронную загрузку модулей. Системы базирующиеся на FunctionalScript сами могут решить как и в каком порядке загружать модули.
JSON Модули
Common.js уже поддерживает загрузку JSON модулей. Самое интересное, что если JSON и является подмножеством JavaScript, то загружается он по-другому. JavaScript Common.js модули определяется в объекте module.exports и сам модуль больше похож на тело функции. В JSON файле, модуль определяется как первое выражение.
Common.js JavaScript модуль:
Можно было бы построить JavaScript систему модулей по принципу JSON модулей. На мой взгляд, такая система модулей была бы логическим продолжением JSON модулей, но, к сожалению, я не нашел ни одной такой JavaScript системы модулей.
Приложения
FunctionalScript код можно использовать в любых JavaScript/TypeScript приложениях. Так как в FunctionalScript нет доступа к IO функциям, то любой FunctionalScript код может быть использован как на backend (например Node.js), так и на Frontend (например, в веб-браузере). Так как FunctionalScript строго-детерминирован, то он хорошо масштабируется. Возможно создание инструментов, которые сами будут решать где и какой код запускать. Например, часть программы может быть запущена на сервере, а часть в браузере.
FunctionalScript можно также рассматривать как расширение JSON, в котором кроме данных можно использовать чистые выражения и функции. Например, для описания конфигурационных файлов.
Ещё одно возможное приложение — язык запросов. Как JavaScript альтернатива SQL или LINQ, включая LINQ expressions. Думаю, что для манипулирования данных в JSON формате, JavaScript или его подмножество является одним из лучших выборов, так как JSON сам является подмножеством JavaScript.
Свойства языка позволяют также использовать его в распределённых вычислениях, работающим по таким принципам как MapReduce, а также для децентрализированных приложений. Также, эти свойства позволяют использовать FunctionalScript как основу для No-code/Low-code систем и DSL.