ブラウザベースのコードワークスペース

ブラウザでプロジェクトを直接コーディング、プレビュー、テスト

プロジェクト タブとライブ プレビューを備えた Monaco 搭載のエディターで作業します。 すぐに開始し、ビルドしながら変更を検査し、準備ができたらプロジェクトをエクスポートします。

コードエディタを開く開発者ツールを探索する
モナコ編集者ライブプレビューブラウザベースセットアップがありません
KreoCode ワークスペース
src/App.tsx
TypeScript + 反応する

const workflow = {

preview: true,

setup: 'none'

};

// プロジェクトの変更に応じて更新をプレビューする

$ npm run preview
プレビューが正常にコンパイルされました
ライブプレビュー
プレビューの準備ができました

集中的なブラウザ開発ワークスペース

コード編集、プレビュー、および開発者ユーティリティは、今完了する必要がある作業を中心に構成されています。

モナコを活用した編集

構造化ファイル、タブ、使い慣れたコーディング ワークフロー用に構築されたエディターでコードを作成します。

ライブビジュアルプレビュー

HTML、CSS、JavaScript を繰り返しながら、ファイルと一緒にブラウザーの出力を確認します。

セットアップなしで開始

最初にローカル開発環境を設定せずに、ブラウザでプロジェクトを開きます。

ブラウザのワークフロー

ドラフトをアクティブなワークスペースに保存し、プロジェクト ファイルをいつエクスポートするかを決定します。

実用的なプロジェクトのためのコードファーストのワークフロー

ソース コード、レンダリングされた出力、および集中的な開発者ユーティリティを近くに配置する必要がある場合は、エディターを使用します。

フロントエンドのプロトタイプ

1 つのワークスペースでソースとブラウザーのプレビューを使用して、小さなインターフェイスのアイデアを構築および検査します。

再利用可能なスニペット

文書化、教育、実装作業のためにコード例を草案、改良、エクスポートします。

API とデータ実験

ペイロードの動作をテストする際に、JavaScript ロジックを JSON フォーマットおよび検証ユーティリティと組み合わせます。

アイデアからプレビューまでの 3 つのステップ

プロトタイプ、スニペット、ブラウザー対応のプロジェクト作業のための短いワークフロー。

01

コーディングを開始する

エディターを開き、整理されたソース ファイルを使用してプロジェクトをビルドします。

02

すぐにプレビュー

レンダリングされた結果を検査しながら、レイアウトと動作を調整します。

03

作品をエクスポートする

ブラウザのワークフローが完了したら、プロジェクト ファイルをダウンロードします。

ワークフローに接続された開発者ツール

共通の開発値のフォーマット、テスト、生成には、焦点を絞った Kreotar ユーティリティを使用します。

JSON 形式JSON データをフォーマットして検査します。正規表現テスターサンプル テキストに対して式をテストします。JWT デコーダトークンのペイロードを迅速に検査します。ハッシュジェネレータ文字列のハッシュを生成します。UUID ジェネレータープロジェクトの識別子を作成します。タイムスタンプコンバータ共通の時間値を変換します。コードフォーマッタ貼り付けたコードをレビューしやすくします。コードミニファイアーコンパクトなコード出力を準備します。JSON スキーマ検証ツール構造化された入力データを確認します。
Kreotar 開発者ワークスペース

ブラウザーの高速作業のために設計されたコードエディター

Kreotar コード エディターは、開発者や学生に、ローカル インストールを開始することなく、ブラウザー プロジェクト コードを作成し、出力を表示し、ファイルを準備するための直接の場所を提供します。 これは、プロトタイプ、デモンストレーション、小規模なインターフェイスの実験、および簡単な修正に役立ちます。

サポート ユーティリティが必要な場合、開発者ツールは 1 つのリンクから離れたところにあります。ペイロードのフォーマット、正規表現のテスト、または識別子の作成を行ってから、エディタで続行します。 ワークフローは引き続き軽量で、より広範な Kreotar エコシステムに接続されています。

プロジェクトのセットアップを必要としないオンラインコード編集

オンライン エディタは、ローカル ツールチェーンを構成せずにブラウザ コードを作成、検査、プレビューすることが緊急に必要な場合に役立ちます。 これにより、例、短い実験、レビュー可能なプロトタイプに適しています。

HTML、CSS、JavaScript のライブ プレビューが機能する

視覚的な出力により、ソースの変更内容にコンテキストが与えられます。 ブラウザ向けのコードを中心に構築されたワークフローで、プロジェクトを編集し、レンダリングされた結果を検査し、動作を調整します。

接続されたエントリ ポイントとしての開発者ユーティリティ

コード作業には、JSON の検証、正規表現のテスト、トークンのデコード、または ID の生成が含まれることがよくあります。 これらのツールへのクロール可能なリンクにより、開発者のワークフローが見つけやすくなり、継続が容易になります。

コードエディターに関する質問

ブラウザーのワークスペースの使用に関する実践的な詳細。

ソフトウェアをインストールせずにコード エディターを開くことはできますか?

はい。 ワークスペースがブラウザで開くため、ローカル設定を行わずにプロジェクトの編集とプレビューを開始できます。

エディターにはライブ プレビューが含まれていますか?

はい。 ワークスペースには、作業中にブラウザに表示されるプロジェクト出力のライブ プレビューが含まれています。

ファイルを続行するにはどうすればよいですか?

ブラウザーのワークスペースで作業し、プロジェクト ファイルをダウンロードする準備ができたら、そのエクスポート コントロールを使用します。