Полная среда разработки для ваших нужд веб-разработчиков
Для создания современного проекта 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.