Localpen v0.3 🚀.

Это часть серии: localpen – кодовые ручки, которые работают локально!

Localpen Это мощная командная площадка для кодирования Frontend, которая полностью работает на клиенте и может быть размещена на любом статическом файловом сервере. Попробуйте сейчас на localpen.io

Я рад объявить о выпуске V0.3 LocalPen, с участием:

• Панель инструментов
• JS/TS Console (используя красивый Luna Console )
• Compabled Code Viewer
• Просмотр результата Страница ширина и высота на изменение изменений
• Различные исправления ошибок и улучшения UI

Панель инструментов

Панель для резкируемых инструментов обеспечивает область для разработчиков. В настоящее время в это включает в себя консоль JS/TS и Compileted Creecer Creecer. Кроме того, он показывает загрузку спиннера при загрузке страницы результата. Панель может быть изменен, перетаскивая бар. Нажатие кнопки инструмента переключает открытие/закрытие панели. Дважды щелкните перезарядки, максимизировать/закрыть.

Он может быть настроен, чтобы иметь любое из следующих состояний:

• Закрыто (дефолт)
• открыть
• полный
• никто

например https://localpen.io/?js&console=open (устанавливает JavaScript в качестве активного редактора и открывает консоль)

Js/ts консоль

Сообщения консоли отображаются в прилагаемой консоли (в панели «Инструменты» ниже страницы результата), не открывая консоль браузера. Сообщение можно отправить на консоль, используя стандарт Консоль Методы в редакторе кода (например, console.log , Console.warn , Console.Error. , Console.table , …и т.д). Консоль также можно использовать как reft (Cread-Eval-Print Print) с помощью включенного ввода консоли.

Код оценивается в контексте страницы результата (I.E. Переменные, определенные в редакторе сценариев, доступны для оценки в введении консоли). Также завершение кода работает на входе консоли (ввод консоли – это полноценный редактор Monaco!). Ввод консоли принимает код JavaScript и Tearmcript для оценки.

например https://localpen.io/?ts&console=full (устанавливает Teamprctry в качестве активного редактора и показывает консоль, максимизированную)

Просмотр скомпилированного кода

Полученный компилируемый/транспортированный код можно увидеть в Compabled Code Viewer (в панели инструментов) в режиме реального времени, как вы вроде. Это работает для всего скомпилированного кода (например, Markdown, PUG, SCSS, LEST, STYLUS, TEPTSCRITE, COFFELSCRIST, … и т. Д.). Это может быть отличным инструментом для обучения. При записи кода вы видите скомпилированный код и полученную страницу одновременно. Совмещенный просмотр кода показывает код, собранный из текущего активного редактора (Markup/Style/Script). Это включает в себя CSS, произведенные Autoprefixer (если он включен).

например https://localpen.io/?ts&compiled=full (устанавливает Teamprctry в качестве активного редактора и показывает Completed Code Viewer Maximized)

Этот пример Показывает TeamptScript код вместе с скомпилированным кодом JavaScript, похожий на Официальная типографская игровая площадка Отказ

Кроме того, теперь у нас есть анимированный экран загрузки логотипа:)

Это был значительный этап, который добавил важные особенности и исправления. LocalPen все больше подходит к устойчивому выпуску.

Пожалуйста Попробуйте попробовать И дайте мне знать, что вы думаете. Предложения, идеи и взносы приветствуются.

Hatemhosny/localpen

Код ручки, которые работают локально!

Код ручки, которые работают локально!

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

Попробуйте сейчас на localpen.io

TL; DR: Начиная

Основные характеристики:

• Монако редактор (Редактор красивых кодов, которые способны VS код )
• Красивее Форматирование кода
• Поддерживает Многие языки ( HTML, Markdown, PUG, ASCIIDOC, CSS, SCSS, SASS, METEUS, STYLUS, JavaScript, Teamescript, JSX, CoffeeScript и другие, чтобы прийти)
• Эммет Завершение вкладки
• Autoprefixer.
• Вся код компиляции/транспортировки происходит на лету на клиенте Так работает на любом статическом сервере.
• Немедленные результаты с Нет серверных раундов
• Условная загрузка модулей (только используемые функции загружаются)
• Шаблоны : Шаблоны стартера и пользовательские шаблоны
• Позволяет добавлять Внешние таблицы стилей и/или сценариев
• Позволяет импортировать NPM модули Это можно ссылаться напрямую без шага сборки (используя великий Skypack.dev Несомненно
• Позволяет импортировать сильно напечатанный локальный Типоприпечатки модули с полным Завершение кода и Intellisense …

Оригинал: “https://dev.to/hatemhosny/localpen-v0-3-50d1”