Может быть, вы уже видели презентацию Bret Victor Изобретая на принципе или редактор световых таблиц В действии видео или Путешествие во времени В приложениях Redux Redux с помощью Redux devtools Отказ О всех этих ресурсах, которых я чувствую, что мы находимся на правильном пути, которое в конечном итоге проведет нас для интеграции всех этих инструментов внутри наших редакторов и одним щелчком мыши все визуальные или выполняемую информацию о том, что нам нужно во время процесса разработки, помимо нашего код.
То же чувство у меня было, когда я увидел Плагин Кука В действии внутри редактора VSCode мне понравилось. Единственное, что мне не понравилось, было информационным окном о Pro Version для поддержки импорта, когда я пытался распечатать значения импортированного файла JavaScript в реактивный проект. Итак, в этот момент я думаю, что новое путешествие уже началось в моей голове. Я хотел создать что -то подобное, но в основном я знаю, что хочу узнать все эти вещи, которые мне нужно было знать, чтобы сделать это.
Некоторая информация
Вернувшись в 2013 году, редактор моего выбора был возвышенным текстом, поэтому в пользовательской спа-каркасе компании мы спасаем некоторые HTML-данные в файле JavaScript, который работал как Шаблонные литералы . Был выбор, чтобы иметь этот HTML данные как единую строку, но было не так удобно делать редактирование или просматривать изменения в Git, поэтому мы сохранили эти части данных в виде многослойных строк.
По этой причине я создал Sublime Plugin Это делало процесс копирования HTML-данных внутри файла JavaScript и форматирует его, как JavaScript MultiLine String, проще. После этого я построил то же самое плагин Для редактора кронштейнов.
Кроме того, в некоторых проектах нам нужно было отладить код JavaScript в SPA, который работал в качестве приложений iPad через Adobe Flex. Процесс отладки был сложен, поэтому я создал пользовательский консольный регистратор, который может быть активирован во время процесса разработки, и поддерживал сенсорные события, предыдущие команды истории и автозаполнения для интерфейса окон и селекторов DOM. Предварительный просмотр этого можно показать на Youtube
То, что я пытаюсь сказать со всеми этим, это то, что мне действительно нравится создавать инструменты разработчика и особенно все, что связано с ведением журнала или отладки.
Процесс изучения
Это было не так просто, как я думал в начале, сделать что-то подобное. Может быть, на некоторых шагах я потратил больше времени, чем мне нужно, потому что я тип разработки, который чувствует себя лучше, когда они знают, как это работает базовый код библиотеки, может быть, в некоторые раз я переполнил, чтобы чувствовать себя безопаснее, что Позже я могу легко добавить новую функцию Но я уверен, что не буду избегать времени на некоторые ключевые шаги во время разработки.
Первая остановка, поиск Github для чего-то, что выглядит так, как и открыто. Единственный проект, который я нашел, был следующим Расширение Это было сосредоточено только на Node.js и не поддерживало импортированные или необходимые файлы. Я начал играть с этим, прочитал VS код API И иметь лучшее понимание того, как создается расширение VSCode.
Пакет
Вторая остановка, объединение. Я использовал Браузероиз и RULLUP В прошлом, но на данный момент я использовал WebPack , Но я никогда не проверял внутренний код Bundler, поэтому я начал изучать исходный код Webpack и разработку плагинов с ним. В какой-то момент я понял, что с WebPack мне было бы сложнее работать Поэтому я проверил исходный код Посылка Bundler. Мне понравился стиль кода, кэширование уже сгенерированных файлов и функция поддержки нулевой конфигурации, которую предоставляет посылка. Итак, я изучал, изучал и изучал исходный код посылки:) Я написал мини-БУНДЛЕР, основанный на этом, чтобы лучше понять функциональность, чтобы мне не было понятно, как это работает, и я решил использовать модифицированная версия посылки как слой, который будет обрабатывать пакет.
Node.js API
Следующая остановка, Node.js API. В эти годы я был в основном сосредоточен на интерфейсных технологиях. Однако у меня была возможность создать некоторые услуги в Node.js и использовать Express.js, koa.js или некоторые другие библиотеки Node.js, но у меня не было возможности изучить API Node.js в деталях. Во время этого расширения у меня была возможность погрузиться глубже в API и узнать больше о таких вещах, как Связь Между родительским и ребенком процесс нового Async Hooks API И то не так новое Рабочие потоки API , Инспектор API Утилиты API Node.js, как запустить код в пределах V8 Virtual Machine Contexts с VM модуль И еще немного. Наконец, я хотел бы поделиться библиотекой, которую я обнаружил во время этого шага, и я люблю, но, наконец, я не использовал в рамках расширения VM2 Это песочница, которая может запустить код, который вы не доверяете, надежно.
Варить
Следующая остановка, Вавилон и разработка плагина Вавилона. Чтобы обеспечить регистрацию, я был уверен, что мне нужно переписать код, который типы пользователей, особенно оператор Console.log (). Проблема заключалась в том, что я никогда не создавал вабеля-плугина, поэтому я начал читать об этом. Три замечательных ресурса, которые помогли мне, – это Вавилочный плагин Справочник Джейми Кайл, @Babel/Types Документация и AST Explorer Веб -инструмент от Felix Kling. Итак, теперь расширение JavaScript-refl использует Плагин преобразования-консоли Чтобы переписать часть кода, который необходим, когда пользователи набирают в редакторе VSCode.
Поддержка охвата
Следующая остановка, поддержка покрытия кода. Я читал статью в прошлом, как это И я использовал Istanbuljs Для покрытия кода. Но как это работает? В нескольких словах Стамбул читает AST для каждого файла, сохраняет объект с каждым выражением и оператором со своей информацией (строка, столбца) внутри вашего кода и добавляет пользовательский код, помимо всех этих выражений. Этот пользовательский код – некоторые счетчики, которые увеличиваются во время выполнения, поэтому в отчете Istanbul знает, например, сколько раз функция была вызвана на основе этих счетчиков. Если вы хотите прочитать больше об этом, проверьте это Статья Анкет Правда в том, что если бы я не читал об абстрактных синтаксических деревах или если я не видел во время отладки посетителя Бабела, чтобы посетить путь и изменить свойства узла во время создания Babel-Plugin, я бы больше беспокоился об этом шаге. Я знал, что в основном нужен коллекция информации о времени временной среды, поэтому после экспериментов я использовал модифицированная версия Стамбула для охвата кода. Один другой ресурс, который я нашел очень интересно, это модуль C8 что использует Узел встроен в Функция, основанная на поддержке двигателя V8 для покрытие кода
Тестирование
Первоначально для тестирования я использовал стандартную среду, которая официально Yeoman Generator произведен и описан в Эта статья Отказ Стандартная среда по умолчанию использует тестовую структуру MOCHA, но я привык был шутить в проектах React, поэтому я искал, как я мог. Ресурсы, которые помогли мне с этим Эта статья и репозиторий vscode-app-debug расширение. В результате, чтобы иметь тестирование E2E с помощью шума, мне нужно было программно запустить шутки и создать это Тестовая среда для шутки.
Строить
Для того, чтобы построить и свернуть расширение, моя первая мысль – это сделать это с посылки Bundler, но из-за отсутствия функции, которую я хотел игнорировать определенные Node_Modules или файлы из пакета, я попробовал свой второй вариант, который описан в следуя Руководство От VSCode Documentation, который использует WebPack в качестве модуля Bundler. Наконец я использовал NCC Tool От Zeit, что под капотом работает с WebPack, но поддерживает из коробки динамики, требует, чтобы я использовал в моем исходном коде.
Предварительный просмотр Reply JavaScript
JavaScript Repl – это игровая площадка JavaScript для Visual Studio Code с прямой обратной связью (журналы или ошибки) при вводе, помимо вашего кода, в исследователе журнала или в выходном канале. Он поддерживает JavaScript, TypeScript, CoffeeScript и его можно использовать для разработки в проектах node.js или с фронтальными рамками, такими как React, Vue, Angular, Svelte. На Страницы Wiki Пользователи могут найти доступную документацию.
- Журналы с помощью комментариев или с помощью Console.log
- Показать или скопировать значение выражения, без добавления комментариев или консоли.logs
- Logs Explorer слева
- Выходное окно со всеми журналами
- Охват живого кода
- Покрытие количества раз
- Импортированная поддержка файлов
- Простая установка для отсутствующих модулей
- Много файлов Loggings или ошибки на проект
- рендеринг результатов async.
- JavaScript, Tymdercript и CoffeeScript поддержка
Вы можете найти расширение на рынке на следующем URL:
🎉 https://marketplace.visualstudio.com/items?itemName=achil.vscode-javascript-repl
Итак, если вы используете VSCode и хотите попробовать, любые отзывы ценятся ♡
Оригинал: “https://dev.to/axilleasiv/i-built-a-vscode-javascript-repl-why-how-and-what-i-learned-2ipb”