Обновление, 10.9.2018: Эта статья перенесена в недавно рекомендованный плагин VSCode Джаредом Форсайтом.

Версия моего набора инструментов на этот день:

  • Причина 3.3.3 @ e10fa53
  • BuckleScript 4.0.5

Примечание. Эта статья предназначена для новичков, не знакомых с Reason.

В апреле 2018 года мы с Ником Графом проводили семинары в React-Finland и получили действительно хорошие впечатления о том, как новички впервые учатся программировать на Reason.

Инструменты экосистемы Reason весьма полезны для изучения самого языка, поэтому я пытаюсь показать вам, как я работаю над кодом Reason внутри VSCode и терминала, чтобы вам было легче начать работу.

К счастью, с августа 2018 года шаги по установке стали намного проще с новым плагином VSCode, созданным Джаредом Форсайтом.

В чем основное отличие от существующего плагина ocaml / reason? О мотивации можно прочитать здесь.

Это также единственный плагин, который работает в Windows без каких-либо взломов, поэтому делает его официальным рекомендуемым способом разработки Reason.

Шаг 1. Установка подключаемого модуля VSCode Reason

Перейдите на вкладку расширения и найдите на торговой площадке плагин под названием reason-vscode от Джареда Форсайта, нажмите кнопку установки и перезагрузите свой экземпляр VSCode.

Теперь ваш редактор должен иметь возможность взаимодействовать с кодом Reason. После первоначальной сборки с помощью BuckleScript вы должны увидеть информацию о типе при наведении курсора, предполагаемых типах, а также об ошибках основных типов. Также вы заметите, что *.re будет иметь правильную подсветку синтаксиса.

Шаг 2. Давайте опробуем настройку

Что касается следующих шагов, давайте рассмотрим проект на основе Reason / BuckleScript. Для удобства мы будем использовать тот же репозиторий, который я использую для своих семинаров:



ryyppy / разум-мастерская
причина-мастер-класс - Материалы и упражнения для мастер-класса github.com



Клонируйте репозиторий и запустите npm install, чтобы установить все необходимые зависимости. Поскольку bs-platform определяется как devDependency, все инструменты, необходимые для компиляции Reason в JavaScript, также будут установлены в вашем каталоге node_modules.

Мы уже определили некоторые вспомогательные скрипты внутри package.json, чтобы легко взаимодействовать с компилятором BuckleScript:

"scripts": {
  "bs:clean": "bsb -clean-world",
  "bs:build": "bsb -make-world",
  "bs:watch": "bsb -make-world -w"
}

Таким образом, запустив npm run bs:watch, вы запустите компилятор BuckleScript в режиме наблюдения, активно перекомпилируя файлы Reason (*.re) при каждом изменении. Поскольку BuckleScript также предлагает более качественные сообщения об ошибках, чем Merlin, давайте воспользуемся командой watch внутри самого терминала VSCode:

На скриншоте выше вы увидите, что BuckleScript запущен на нижней панели терминала. Всякий раз, когда в нашем коде возникает ошибка типа (после сохранения файла), компилятор будет показывать приятные сообщения об ошибках для устранения неполадок:

Для меня гораздо проще запустить BuckleScript внутри моего VSCode, поскольку мне никогда не придется переключаться с моей IDE на мой терминал. Как только я адаптировал этот рабочий процесс, я понял, что цикл обратной связи стал намного быстрее, и я получил гораздо более захватывающий опыт программирования.

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

Последний совет: переформатирование

Каждый раз, когда вы редактируете *.re файл, вы можете запустить Shift-Option-F, чтобы переформатировать буфер редактора.

Чтобы попробовать это, скопируйте этот фрагмент кода в один из файлов причин в каталогеsrc и нажмите горячую клавишу Shift-Option-F:

let addAndStringify = (
  a,
  b) => {
let c = a + b;
string_of_int(c);
};

Теперь код должен быть отформатирован правильно.

Вот и все! После выполнения этих двух шагов вы теперь можете работать с кодом Reason в VSCode.

Если у вас возникли проблемы с настройкой, не забудьте задать вопросы на нашем канале Reason Discord #editorsupport.

Для получения дополнительных статей в блогах и новостей о Reason и других языках программирования, связанных с Интернетом, подписывайтесь на меня в Twitter.