Возможно, вы уже видели презентацию Брета Виктора Inventing on Principle или редактор Light Table In Action video или путешествие во времени в приложениях Redux Redux с помощью Redux DevTools. Что касается всех этих ресурсов, я чувствую, что мы находимся на правильном пути, который в конечном итоге приведет нас к интеграции всех этих инструментов в наши редакторы, и с помощью одного щелчка мыши вся визуальная информация или информация о времени выполнения, которая нам нужна в процессе разработки, будет доступна помимо нашей код.
То же самое чувство, что я увидел плагин Quokka в действии внутри редактора vscode, мне он понравился. Единственное, что мне не понравилось, - это информационное окно о профессиональной версии для поддержки импорта, когда я пытался распечатать значения импортированного файла JavaScript в проекте React. Так что на данный момент я думаю, что в моей голове уже началось новое путешествие. Я хотел создать что-то подобное, но в основном я знаю, что хотел изучить все эти вещи, которые мне нужно было знать для этого.
Некоторая информация
Еще в 2013 году моим редактором был Sublime text, поэтому в пользовательской структуре SPA компании мы сохраняли некоторые данные Html в файле JavaScript, который работал как литералы шаблона. Был выбран вариант, когда эти данные Html будут отображаться в виде одной строки, но было не так удобно вносить правки или просматривать изменения в git, поэтому мы сохранили эти части данных в виде многострочных строк.
По этой причине я создал возвышенный плагин, который упростил процесс копирования данных Html внутри файла Javascript и их форматирования в виде многострочной строки javascript. После этого я создал такой же плагин для редактора Brackets.
Кроме того, в некоторых проектах нам нужно было отлаживать код Javascript в SPA, который выполнялся как приложения для iPad через Adobe Flex. Процесс отладки был трудным, поэтому я создал настраиваемое средство ведения журнала консоли, которое можно было активировать в процессе разработки, и которое поддерживало события касания, историю предыдущих команд и автозаполнение для интерфейса Window и селекторов Dom. Предварительный просмотр этого можно увидеть на следующем видео.
Что я пытаюсь сказать всем этим, так это то, что мне действительно нравится создавать инструменты разработчика, особенно все, что связано с ведением журнала или отладкой.
Процесс изучения
Сделать что-то подобное оказалось не так просто, как я думал вначале. Может быть, на некоторых этапах я потратил больше времени, чем мне нужно, потому что я из тех разработчиков, которые чувствуют себя лучше, когда они знают, как работает базовый код библиотеки, может быть, в некоторых случаях я переоценивал, чтобы чувствовать себя в большей безопасности. позже я могу легко добавить новую функцию, но я уверен, что не избежал бы потратить время на некоторые ключевые шаги во время разработки.
Сначала остановимся на поиске на GitHub чего-то похожего и имеющего открытый исходный код. Единственный проект, который я нашел, это следующее расширение, ориентированное только на node.js и не поддерживающее импортированные или обязательные файлы. Я начал играть с ним, читать VS Code API и лучше понимать, как создается расширение vscode.
Комплектация
Вторая остановка, комплектация. Раньше я использовал Browserify и rollup, но в этот момент я использовал webpack, но я никогда не проверял внутренний код сборщика, поэтому я начал изучать исходный код разработки веб-пакетов и плагинов с помощью Это. В какой-то момент я понял, что с webpack мне будет труднее работать, поэтому я проверил исходный код бандлера Parcel. Мне понравился стиль кода, кэширование уже сгенерированных файлов и функция поддержки нулевой конфигурации, которую предоставляет Parcel. Итак, я изучал, изучал и изучал исходный код Parcel :) Я написал мини-сборщик на основе этого, чтобы лучше понять функциональность, что мне было непонятно, как это работает, и я решил использовать модифицированную версию Parcel в качестве слоя который будет обрабатывать пакетирование.
Node.js api
Следующая остановка - node.js api. В эти годы я был в основном сосредоточен на интерфейсных технологиях. Однако у меня была возможность создать некоторые службы в node.js и использовать express.js, koa.js или некоторые другие библиотеки node.js, но у меня не было возможности подробно изучить api node.js. Во время разработки этого расширения у меня была возможность глубже погрузиться в api и узнать больше о таких вещах, как связь между родительским и дочерним процессом, новый api Async Hooks и уже не такой новый api Worker Threads, Inspector api утилиты api node.js, как запускать код в контексте виртуальной машины V8 с модулем VM и многое другое. Наконец, я хотел бы поделиться библиотекой, которую я обнаружил на этом этапе, и мне очень нравится, но, наконец, я не использовал в расширении vm2, который представляет собой песочницу, которая может безопасно запускать код, которому вы не доверяете. .
Вавилон
Следующая остановка, разработка Babel и плагина babel. Я был уверен, что для обеспечения ведения журнала мне нужно переписать код, вводимый пользователем, особенно оператор console.log (). Проблема заключалась в том, что я никогда не создавал babel-плагин, поэтому я начал читать об этом. Мне помогли три замечательных ресурса: Руководство по плагинам Babel от Джейми Кайла, документация @ babel / types и веб-инструмент AST explorer от Феликса Клинга. Итак, теперь расширение Javascript-REPL использует transform-console-plugin, чтобы переписать часть кода, который необходим, когда пользователи вводят текст в редакторе vscode.
Поддержка покрытия
Следующая остановка - поддержка покрытия кода. В прошлом я читал статью вроде this и использовал istanbuljs для покрытия кода. Но как это работает? Вкратце, Стамбул читает AST для каждого файла, сохраняет объект с каждым выражением и оператором с их информацией (строка, столбец) внутри вашего кода и добавляет собственный код, помимо всех этих выражений. Этот настраиваемый код представляет собой несколько счетчиков, которые увеличиваются во время выполнения, поэтому в отчете Стамбул, например, знает, сколько раз функция вызывалась на основе этих счетчиков. Если вы хотите узнать об этом подробнее, ознакомьтесь с этой статьей. По правде говоря, если бы я не читал об абстрактных синтаксических деревьях или если бы я не видел во время отладки посетителя babel, который посещает путь и изменяет свойства узла во время создания надстройки babel, я бы гораздо больше беспокоился об этом шаге. Я знал, что мне больше всего нужен сбор информации о времени выполнения, поэтому после экспериментов я использовал модифицированную версию Istanbul для покрытия кода. Еще один ресурс, который мне показался очень интересным, - это модуль c8, который использует встроенную функцию узла, основанную на поддержке движком v8 для покрытия кода.
Тестирование
Изначально для тестирования я использовал стандартную среду, которую выпускал официальный Yeoman Generator и описан в этой статье. Стандартная среда по умолчанию использует тестовый фреймворк Mocha, но раньше у меня были проекты Jest in React, поэтому я искал, как я мог. Ресурсы, которые мне в этом помогли, - эта статья и репозиторий расширения vscode-prompt-debug. В результате, чтобы провести тестирование e2e с помощью Jest, мне нужно было запустить Jest программно и создать эту тестовую среду для Jest.
Строить
Чтобы собрать и связать расширение, моей первой мыслью было сделать это с помощью parcel-bundler, но из-за отсутствия функции, которую я хотел бы игнорировать определенные node_modules или файлы из пакета, я попробовал свой второй вариант, описанный в следующее руководство из документации vscode, которое использует webpack в качестве сборщика модулей. Наконец, я использовал инструмент ncc от Zeit, который под капотом работает с веб-пакетом, но поддерживает динамические настройки из коробки и требует, чтобы я использовал его внутри своего исходного кода.
Предварительный просмотр REPL Javascript
Javascript REPL - это игровая площадка javascript для кода Visual Studio с оперативной обратной связью (журналами или ошибками) при вводе, помимо кода, в проводнике журналов или в канале вывода. Он поддерживает Javascript, TypeScript, CoffeeScript и может использоваться для разработки в проектах Node.js или с интерфейсными фреймворками, такими как React, Vue, Angular, Svelte. На вики-страницах пользователи могут найти доступную документацию.
Функции
- Журналы с помощью комментариев или с помощью console.log
- Показать или скопировать значение выражения без добавления комментариев или console.logs
- Проводник журналов слева
- Окно вывода со всеми журналы
- Покрытие кода в реальном времени
- Покрытие количество раз
- Поддержка импортированных файлов
- Простая установка для отсутствующих модулей
- Поддержка нескольких файлов для журналов или ошибок на проект
- Асинхронный рендеринг результатов (журналы, ошибки)
- Поддержка JavaScript, TypeScript и CoffeeScript
- Поддержка Node.js
Использование в проекте Vue.js
Я использую Vue.js версии 0.10.3. По правде говоря, я хотел, чтобы расширение vscode repl из первого выпуска поддерживало проекты Vue.js и особенно сложную часть, чтобы отображать журналы или ошибки внутри тегов сценария файла .vue. Поэтому я рад, что это происходит в основном из-за пакета Parcel, который поддерживает Vue.js из коробки. На вики-страницах разработчики Vue могут найти доступную документацию, которая может понадобиться. Я знаю, что многие пользователи используют псевдонимы в своих проектах Vue.js. В этом первом выпуске псевдонимы не поддерживаются из коробки, и пользователям необходимо установить их в своем package.json. Удачного кодирования!
Установить
Вы можете найти расширение на торговой площадке по следующему адресу:
🎉 https://marketplace.visualstudio.com/items?itemName=achil.vscode-javascript-repl
Итак, если вы используете vscode и хотите его попробовать, любая обратная связь приветствуется ♡
