Configuration - ootomonaiso/docusaurus_edit GitHub Wiki

設定とカスタマイズ

Docusaurus Editorの設定オプションとカスタマイズ方法について説明します。

基本設定

VS Code 設定での設定

設定ファイル（settings.json）または VS Code の設定画面から設定できます。

{
  // TreeView 設定
  "docusaurusEditor.treeView.autoRefresh": true,
  "docusaurusEditor.treeView.showFileSize": true,
  "docusaurusEditor.treeView.showLastModified": true,
  "docusaurusEditor.treeView.sortBy": "position",
  "docusaurusEditor.treeView.groupFolders": true,
  
  // Git 連携設定
  "docusaurusEditor.git.autoCommit": false,
  "docusaurusEditor.git.commitMessageTemplate": "docs: update {filename}",
  "docusaurusEditor.git.pushAfterCommit": false,
  "docusaurusEditor.git.createPullRequest": false,
  
  // ファイル作成設定
  "docusaurusEditor.newFile.defaultTemplate": "basic",
  "docusaurusEditor.newFile.autoPositioning": true,
  "docusaurusEditor.newFile.includeDescription": true,
  
  // プレビュー設定
  "docusaurusEditor.preview.autoOpen": false,
  "docusaurusEditor.preview.syncScroll": true,
  "docusaurusEditor.preview.theme": "light"
}

TreeView 設定

表示オプション

設定項目 デフォルト 説明
autoRefresh true ファイル変更の自動検出
showFileSize true ファイルサイズの表示
showLastModified false 最終更新日時の表示
sortBy "position" ソート方法（position, name, date）
groupFolders true フォルダをファイルより上に表示

ソート設定

{
  "docusaurusEditor.treeView.sortBy": "position",          // sidebar_position順
  "docusaurusEditor.treeView.sortBy": "name",              // ファイル名順
  "docusaurusEditor.treeView.sortBy": "date",              // 更新日時順
  "docusaurusEditor.treeView.sortBy": "size"               // ファイルサイズ順
}

フィルタリング設定

{
  "docusaurusEditor.treeView.excludePatterns": [
    "**/node_modules/**",
    "**/.git/**",
    "**/build/**"
  ],
  "docusaurusEditor.treeView.includePatterns": [
    "**/*.md",
    "**/*.mdx"
  ]
}

Git 連携設定

自動コミット設定

{
  "docusaurusEditor.git.autoCommit": true,
  "docusaurusEditor.git.commitMessageTemplate": "docs({category}): {action} {filename}",
  "docusaurusEditor.git.autoCommitDelay": 5000,           // 5秒後に自動コミット
  "docusaurusEditor.git.autoCommitOnSave": true,
  "docusaurusEditor.git.autoCommitOnDragDrop": true
}

GitHub 連携設定

{
  "docusaurusEditor.git.github.enabled": true,
  "docusaurusEditor.git.github.token": "${env:GITHUB_TOKEN}",
  "docusaurusEditor.git.github.repository": "username/repository",
  "docusaurusEditor.git.github.defaultBranch": "main"
}

プルリクエスト設定

{
  "docusaurusEditor.git.pullRequest.autoCreate": false,
  "docusaurusEditor.git.pullRequest.template": "## Changes\n\n- Updated documentation\n\n## Checklist\n\n- [ ] Links verified\n- [ ] Images optimized",
  "docusaurusEditor.git.pullRequest.assignReviewers": true,
  "docusaurusEditor.git.pullRequest.defaultReviewers": ["reviewer1", "reviewer2"]
}

ファイル作成設定

テンプレート設定

{
  "docusaurusEditor.newFile.defaultTemplate": "basic",
  "docusaurusEditor.newFile.templates": {
    "basic": {
      "frontmatter": {
        "title": "{filename}",
        "sidebar_position": "{auto}",
        "description": ""
      },
      "content": "# {title}\n\n"
    },
    "api": {
      "frontmatter": {
        "title": "{filename} API",
        "sidebar_position": "{auto}",
        "description": "API documentation for {filename}",
        "tags": ["api", "reference"]
      },
      "content": "# {title}\n\n## Overview\n\n## Methods\n\n## Examples\n\n"
    }
  }
}

自動位置設定

{
  "docusaurusEditor.newFile.autoPositioning": true,
  "docusaurusEditor.newFile.positionIncrement": 1,         // 位置の増分
  "docusaurusEditor.newFile.positionGap": 10               // 大きなギャップを開ける
}

カスタムテンプレート

テンプレートファイルの作成

.vscode/templates/ フォルダにテンプレートファイルを配置：

<!-- .vscode/templates/tutorial.md -->
---
title: {title}
sidebar_position: {position}
description: Step-by-step tutorial for {topic}
tags: [tutorial, guide]
---

# {title}

## 前提条件

## 手順

### ステップ 1

### ステップ 2

### ステップ 3

## まとめ

## 次のステップ

テンプレート変数

変数 説明 例
{title} ファイル名から生成されるタイトル "Getting Started"
{filename} ファイル名（拡張子なし） "getting-started"
{position} 自動計算される位置 "1"
{date} 現在の日付 "2024-01-15"
{author} Git設定のユーザー名 "John Doe"
{category} 親フォルダ名 "tutorials"

スタイルとテーマ

カスタムアイコン

{
  "docusaurusEditor.icons.folder": "folder-library",
  "docusaurusEditor.icons.markdown": "markdown",
  "docusaurusEditor.icons.mdx": "react",
  "docusaurusEditor.icons.modified": "git-commit",
  "docusaurusEditor.icons.new": "add"
}

カラーテーマ

{
  "docusaurusEditor.colors.modified": "#FFA500",
  "docusaurusEditor.colors.new": "#00FF00",
  "docusaurusEditor.colors.deleted": "#FF0000",
  "docusaurusEditor.colors.conflict": "#FF00FF"
}

プレビュー設定

Markdownプレビュー

{
  "docusaurusEditor.preview.autoOpen": false,
  "docusaurusEditor.preview.syncScroll": true,
  "docusaurusEditor.preview.theme": "light",
  "docusaurusEditor.preview.css": ".vscode/preview.css"
}

カスタムCSS

/* .vscode/preview.css */
.markdown-body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

.admonition {
  border-left: 4px solid #007acc;
  margin: 1em 0;
  padding: 0.5em 1em;
  background-color: #f8f9fa;
}

.admonition.note {
  border-color: #007acc;
}

.admonition.tip {
  border-color: #00c851;
}

.admonition.warning {
  border-color: #ff8800;
}

.admonition.danger {
  border-color: #ff4444;
}

キーボードショートカット

デフォルトショートカット

{
  "key": "ctrl+shift+d",
  "command": "docusaurusEditor.openTreeView",
  "when": "editorTextFocus"
},
{
  "key": "ctrl+alt+n",
  "command": "docusaurusEditor.newDocument",
  "when": "docusaurusEditor.treeViewFocus"
},
{
  "key": "f2",
  "command": "docusaurusEditor.renameFile",
  "when": "docusaurusEditor.treeViewFocus"
},
{
  "key": "delete",
  "command": "docusaurusEditor.deleteFile",
  "when": "docusaurusEditor.treeViewFocus"
}

カスタムショートカット

{
  "key": "ctrl+shift+p",
  "command": "docusaurusEditor.openPreview",
  "when": "editorLangId == markdown"
},
{
  "key": "ctrl+shift+g",
  "command": "docusaurusEditor.gitCommit",
  "when": "docusaurusEditor.treeViewFocus"
}

高度な設定

ワークスペース固有の設定

.vscode/settings.json でプロジェクト固有の設定：

{
  "docusaurusEditor.projectPath": "./docs",
  "docusaurusEditor.configPath": "./docusaurus.config.js",
  "docusaurusEditor.sidebarPath": "./sidebars.js",
  "docusaurusEditor.enableMultiInstance": true,
  "docusaurusEditor.documentIds": ["default", "api", "tutorial"]
}

マルチインスタンス設定

{
  "docusaurusEditor.instances": {
    "main": {
      "path": "./docs",
      "label": "Main Documentation"
    },
    "api": {
      "path": "./api-docs",
      "label": "API Documentation"
    },
    "blog": {
      "path": "./blog",
      "label": "Blog Posts"
    }
  }
}

パフォーマンス設定

{
  "docusaurusEditor.performance.maxFiles": 1000,
  "docusaurusEditor.performance.cacheSize": "100MB",
  "docusaurusEditor.performance.enableLazyLoading": true,
  "docusaurusEditor.performance.debounceTime": 300
}

設定のエクスポート・インポート

設定のエクスポート

# VS Code設定のバックアップ
code --list-extensions > extensions.txt
cp ~/.vscode/User/settings.json settings.backup.json

設定のインポート

# 拡張機能のインストール
cat extensions.txt | xargs -n 1 code --install-extension

# 設定の復元
cp settings.backup.json ~/.vscode/User/settings.json

チーム共有設定

// .vscode/settings.json (プロジェクト用)
{
  "docusaurusEditor.treeView.autoRefresh": true,
  "docusaurusEditor.newFile.defaultTemplate": "team-standard",
  "docusaurusEditor.git.commitMessageTemplate": "docs: {action} {filename}",
  "editor.rulers": [80, 120],
  "files.trimTrailingWhitespace": true,
  "markdown.preview.breaks": true
}

トラブルシューティング

設定が反映されない

  1. VS Code を再起動
  2. 設定ファイルの JSON 構文を確認
  3. 設定のスコープ（ユーザー/ワークスペース）を確認

パフォーマンスの問題

{
  "docusaurusEditor.performance.enableLazyLoading": true,
  "docusaurusEditor.performance.maxFiles": 500,
  "docusaurusEditor.treeView.autoRefresh": false
}

Git 連携の問題

{
  "docusaurusEditor.git.timeout": 30000,
  "docusaurusEditor.git.retryCount": 3,
  "docusaurusEditor.git.debugMode": true
}