Installation Guide - ootomonaiso/docusaurus_edit GitHub Wiki

インストールガイド

Docusaurus Editor拡張機能のインストールと初期設定について説明します。

📦 インストール方法

方法1: VS Code マーケットプレースから（推奨）

  1. VS Codeを開く
  2. 拡張機能ビューを開く（Ctrl+Shift+X / Cmd+Shift+X）
  3. **「Docusaurus Editor」**を検索
  4. **「インストール」**ボタンをクリック

方法2: VSIXファイルから

  1. GitHubリリースページから最新の.vsixファイルをダウンロード
  2. VS Codeで Ctrl+Shift+P / Cmd+Shift+P を押す
  3. **「Extensions: Install from VSIX...」**を選択
  4. ダウンロードした.vsixファイルを選択

⚙️ 初期設定

1. Docusaurusプロジェクトを開く

# 既存のDocusaurusプロジェクトを開く
code my-docusaurus-project

# または新しいプロジェクトを作成
npx create-docusaurus@latest my-website classic
cd my-website
code .

2. 拡張機能の有効化

拡張機能は以下の条件で自動的に有効化されます：

  • docusaurus.config.js または docusaurus.config.ts ファイルが存在する
  • ワークスペースフォルダ内にDocusaurusプロジェクト構造が検出される

手動で有効化する場合：

  1. コマンドパレットを開く（Ctrl+Shift+P / Cmd+Shift+P）
  2. **「Docusaurus Editor: このフォルダーで有効化」**を実行

3. Docusaurusルートの設定

複数のDocusaurusプロジェクトがある場合や、プロジェクトがサブフォルダにある場合：

  1. アクティビティバーのDocusaurusアイコンをクリック
  2. **「Docusaurus ルートを設定」**ボタンをクリック
  3. 適切なフォルダを選択

🎯 動作確認

正常にインストールされた場合、以下が表示されます：

サイドバーパネル

  • アクティビティバーにDocusaurusアイコン（📖）が表示
  • Docusaurusエクスプローラーパネルが利用可能
  • ファイル統計パネルが利用可能

エディター機能

  • .mdや.mdxファイルでMarkdown編集機能が有効
  • 右クリックメニューに**「Markdown記法挿入」**が追加
  • エディタータイトルにプレビューボタンが表示

TreeView表示

📁 docs/
├── 📄 intro.md
├── 📁 tutorial-basics/
│   ├── 🏷️ _category_.json
│   ├── 📄 create-a-document.md
│   └── 📄 create-a-page.md
└── 📁 tutorial-extras/
    ├── 🏷️ _category_.json
    └── 📄 manage-docs-versions.md

🔧 設定オプション

VS Codeの設定で以下のオプションが設定可能です：

{
  // Docusaurus Editor設定（今後のバージョンで追加予定）
  "docusaurusEditor.autoDetectProjects": true,
  "docusaurusEditor.showFileStats": true,
  "docusaurusEditor.enableGitIntegration": true
}

🚨 トラブルシューティング

拡張機能が有効化されない

原因: Docusaurusプロジェクトが検出されていない

解決方法:

  1. docusaurus.config.jsファイルが存在することを確認
  2. 手動で有効化：コマンドパレット → 「Docusaurus Editor: このフォルダーで有効化」

TreeViewに何も表示されない

原因: docs/フォルダが存在しないか、権限がない

解決方法:

  1. プロジェクトルートにdocs/フォルダがあることを確認
  2. フォルダの読み取り権限を確認
  3. リフレッシュボタン（🔄）をクリック

Git機能が動作しない

原因: Gitが初期化されていないか、認証情報が設定されていない

解決方法:

  1. git initでリポジトリを初期化
  2. リモートリポジトリの設定：git remote add origin <URL>
  3. Git認証情報の設定

📋 必要な依存関係

基本機能

  • VS Code: ^1.101.0
  • Node.js: 16.0.0以上（Docusaurusプロジェクト用）

Git機能

  • Git: 2.0.0以上
  • GitHub CLI（オプション）: プルリクエスト作成機能用

Docusaurusプロジェクト

{
  "@docusaurus/core": "^3.0.0",
  "@docusaurus/preset-classic": "^3.0.0"
}

🎉 インストール完了

インストールが完了したら、基本的な使い方を参照して、実際に拡張機能を使い始めましょう！

次のステップ: 基本的な使い方 | TreeView機能

⚠️ **GitHub.com Fallback** ⚠️