Полная среда разработки для ваших нужд веб-разработчиков

Для создания современного проекта JavaScript с помощью интерфейсных библиотек, таких как React, Vue или Angular, вы должны настроить множество инструментов разработки, чтобы они могли обрабатывать ваш код JavaScript.

Как вы, возможно, уже знаете, в экосистеме JavaScript доступно огромное количество отдельных инструментов разработки для различных целей:

  • Webpack для объединения вашего кода
  • Babel для компиляции вашего кода в формат, читаемый браузером.
  • Jest для тестирования вашего кода
  • NPM или Yarn для установки зависимостей и управления ими.
  • Prettier для форматирования кода
  • ESLint для применения стандартных правил и проверки ошибок.

И есть еще больше инструментов, таких как PostCSS для обработки CSS и TypeScript для принудительной проверки типов.

Список инструментов, которые вы можете добавить в один проект JavaScript, просто утомляет, и именно поэтому Рим был создан в первую очередь.

Rome - это набор инструментов JavaScript, цель которого - предоставить единый унифицированный инструмент для всего, что связано с разработкой проекта JavaScript. Он был создан Себастьяном Маккензи, тем же создателем популярных инструментов разработки, как Babel и Yarn.

Инструмент все еще находится в стадии бета-тестирования, и в настоящее время работает только функция линтинга. Но инструмент находится в активной разработке с планами поддержки объединения, компиляции, тестирования, проверки типов и многого другого.

Что интересно, Рим в значительной степени был написан с нуля без каких-либо зависимостей. В то время как другие инструменты, такие как Create React App, устанавливают и настраивают Webpack (и другие) для вашего проекта, Rome на самом деле их не использует. Хорошо это или плохо - судить вам.

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

В последней версии Bit потребность в наборе инструментов, упрощающем и стандартизирующем веб-разработку, уже удовлетворена новой функцией Envs.



Env - это законченные среды разработки, оснащенные компилятором, тестером, линтером, форматером, инструментами для документирования и собственным рабочим процессом сборки.

Поскольку Bit - это все о компонентах и разработке, управляемой компонентами, Env сами по себе являются компонентами, и они настроены для поддержки независимой разработки компонентов, а не только полных приложений. Каждый env

- Есть ли еще потребность в Риме - вопрос открытый.

Начало работы с Римом

Чтобы начать использовать Rome, вам необходимо инициализировать новую конфигурацию Rome в вашем проекте. Вы можете сделать это, установив Rome глобально или используя NPX, как показано ниже:

npm install -g rome
rome init
#or
npx rome init

Команда init будет делать две вещи:

  • Создайте файл .config/rome.rjson для конфигурации Рима
  • Создайте файл .editorconfig, который устанавливает правила отступа для редакторов, поддерживающих EditorConfig.

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

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

Изучение особенностей линтинга в Риме

Функция линтинга Rome выделяется среди других инструментов своей обширной диагностической функцией. Диагностика предоставит вам информацию об ошибке в многофункциональном интерфейсе с предложениями доступных исправлений.

Чтобы протестировать функцию линтинга, давайте создадим index.js файл со следующим содержанием:

let a, b = "Hello";
if(a == b) console.log("Hello World");

Теперь, когда у вас есть файл JavaScript, готовый для проверки, запустите команду rome check, чтобы Рим обнаружил проблемы в вашем коде:

npx rome check

Обратите внимание, что вы также можете ограничить количество файлов или каталогов, которые Rome будет сканировать на предмет проблем.

Следующая команда заставит Rome проверять файл index.js и папку source/ исключительно:

npx rome check index.js source/

Вот пример вывода команды rome check в моем Терминале:

Как вы можете видеть на скриншоте выше, Rome создает отчет о проверке в расширенном формате, который показывает вам файл, номер строки и правило, которое нарушается вашим кодом. Ярлык FIXABLE означает, что Рим может предложить решение.

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

Чтобы автоматически применить исправления, вы можете добавить к команде флаг --apply. Это похоже на флаг --fix ESLint:

npx rome check index.js --apply

После того, как вы примените исправления, Rome покажет, что с файлом index.js осталась одна проблема:

Приведенные выше выходные данные показывают, что, хотя Рим знает, что вам следует использовать строгое сравнение на равенство (===), он также признает, что вы можете полагаться на приведение типов для запуска вашего кода.

Вот почему он считает исправление небезопасным и не применяет исправление без вашего участия.

У Rome есть --review флаг, который позволяет вам просматривать и решать, что делать с каждой проблемой, которую Rome обнаруживает в вашем коде.

Давайте посмотрим, как работает обзор Рима для index.js файла:

npx rome check index.js --review

Теперь Rome будет запрашивать ваше мнение по каждой обнаруженной проблеме:

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

Когда вы объединяете функции применения и проверки Rome, вы можете сразу применить очевидные исправления к своему коду и просматривать только те, которые требуют надзора.

Восстановить файлы, измененные Римом

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

Команда rome recover позволяет вам взаимодействовать с сохраненной копией ваших файлов.

Используйте команду rome recover list, чтобы показать сохраненные изменения:

Rome хранит только пять последних команд, которые изменяют файлы для минимального использования памяти.

Чтобы восстановить самый последний журнал восстановления, вы можете запустить команду rome recover pop.

Чтобы восстановить определенный журнал, вы можете использовать команду rome recover apply <id>. <id> - это первая строка, которую вы видите, за которой следует длинная горизонтальная линия (на скриншоте выше это 1632551973576-check-0).

Наконец, Rome также может показать вам примененные изменения, выполнив команду rome recover diff:

Большинство правил линтера Rome созданы для работы с JavaScript, TypeScript и React. Вы можете увидеть полный список Правил римского линта здесь.

Заключение

Rome - это новый инструмент разработки JavaScript с амбициозной целью стать единственным инструментом, который вам нужен для всех задач, связанных с обработкой кода JavaScript.

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

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

Независимо от того, добьется ли Rome успеха или потерпит неудачу, он определенно покажет нам, какие улучшения еще возможны в области инструментов разработки JavaScript.

Для получения дополнительной информации посетите страницу Рима на GitHub.

Учить больше