拡張機能の管理

TRAEは、開発体験を向上させるための豊富な拡張機能エコシステムを提供します。このガイドでは、拡張機能のインストール、管理、設定、開発について説明します。

概要

TRAEの拡張機能システムは以下を提供します：

• 豊富な拡張機能マーケットプレイス
• 簡単なインストールと管理
• カスタム拡張機能の開発
• 拡張機能の設定とカスタマイズ
• 自動更新とバージョン管理

拡張機能マーケットプレイス

拡張機能の検索

1. 拡張機能パネルを開く

   • サイドバーの拡張機能アイコンをクリック
   • または Ctrl+Shift+X (Windows/Linux) / Cmd+Shift+X (Mac)

2. 拡張機能を検索

   • 検索バーにキーワードを入力
   • カテゴリでフィルタリング
   • 人気度や評価で並び替え

3. 拡張機能の詳細を確認

   • 説明と機能を読む
   • レビューと評価を確認
   • インストール数を確認

人気の拡張機能カテゴリ

言語サポート

• Python: Python開発のための包括的なサポート
• JavaScript/TypeScript: 高度なJS/TS開発機能
• Go: Go言語開発ツール
• Rust: Rust開発環境
• Java: Java開発サポート

開発ツール

• Git: バージョン管理の強化
• Docker: コンテナ開発サポート
• REST Client: API開発とテスト
• Database: データベース管理ツール
• Terminal: ターミナル機能の拡張

テーマとUI

• Dark Themes: ダークテーマコレクション
• Light Themes: ライトテーマオプション
• Icon Themes: ファイルアイコンテーマ
• Color Themes: カスタムカラースキーム

拡張機能のインストール

マーケットプレイスからのインストール

1. 拡張機能を選択

   • 目的の拡張機能をクリック
   • 詳細ページを確認

2. インストール

   • 「インストール」ボタンをクリック
   • インストールの進行状況を確認
   • 必要に応じてTRAEを再起動

3. 有効化

   • 拡張機能が自動的に有効化
   • 設定が必要な場合は設定画面を開く

VSIXファイルからのインストール

# コマンドパレットから
Ctrl+Shift+P → "Extensions: Install from VSIX"

# または拡張機能パネルから
... メニュー → "Install from VSIX..."

コマンドラインからのインストール

# 拡張機能をインストール
trae --install-extension publisher.extension-name

# 複数の拡張機能をインストール
trae --install-extension ms-python.python --install-extension ms-vscode.vscode-typescript-next

拡張機能の管理

インストール済み拡張機能の表示

1. 拡張機能パネルを開く
2. 「インストール済み」セクションを確認
   • 有効な拡張機能
   • 無効な拡張機能
   • 更新が利用可能な拡張機能

拡張機能の有効化/無効化

// 拡張機能を無効化
// 拡張機能パネル → 歯車アイコン → "無効化"

// ワークスペースでのみ無効化
// 拡張機能パネル → 歯車アイコン → "ワークスペースで無効化"

// 拡張機能を有効化
// 拡張機能パネル → "有効化"ボタン

拡張機能のアンインストール

1. 拡張機能パネルを開く
2. アンインストールしたい拡張機能を選択
3. 歯車アイコン → "アンインストール"
4. 確認ダイアログで「はい」をクリック

拡張機能の更新

自動更新

{
  "extensions.autoUpdate": true,
  "extensions.autoCheckUpdates": true
}

手動更新

1. 拡張機能パネルを開く
2. 更新アイコンが表示された拡張機能を確認
3. 「更新」ボタンをクリック

拡張機能の設定

グローバル設定

{
  "extensions.ignoreRecommendations": false,
  "extensions.showRecommendationsOnlyOnDemand": false,
  "extensions.closeExtensionDetailsOnViewChange": false,
  "extensions.confirmedUriHandlerExtensionIds": [],
  "extensions.supportVirtualWorkspaces": {}
}

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

{
  "extensions.recommendations": [
    "ms-python.python",
    "ms-vscode.vscode-typescript-next",
    "esbenp.prettier-vscode"
  ],
  "extensions.unwantedRecommendations": [
    "ms-vscode.vscode-json"
  ]
}

拡張機能固有の設定

{
  // Python拡張機能の設定
  "python.defaultInterpreterPath": "/usr/bin/python3",
  "python.linting.enabled": true,
  "python.linting.pylintEnabled": true,
  
  // Prettier拡張機能の設定
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  
  // GitLens拡張機能の設定
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false
  }
}

拡張機能の推奨

ワークスペース推奨

{
  "extensions": {
    "recommendations": [
      "ms-python.python",
      "ms-python.vscode-pylance",
      "ms-python.flake8",
      "ms-toolsai.jupyter"
    ]
  }
}

推奨の表示

1. コマンドパレットを開く (Ctrl+Shift+P)
2. "Extensions: Show Recommended Extensions" を実行
3. 推奨拡張機能のリストを確認
4. 必要な拡張機能をインストール

カスタム拡張機能の開発

開発環境のセットアップ

# Yeomanとジェネレーターをインストール
npm install -g yo generator-code

# 新しい拡張機能プロジェクトを作成
yo code

# 選択肢:
# ? What type of extension do you want to create?
# > New Extension (TypeScript)
#   New Extension (JavaScript)
#   New Color Theme
#   New Language Support
#   New Code Snippets
#   New Keymap
#   New Extension Pack

基本的な拡張機能の構造

// src/extension.ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    console.log('拡張機能が有効化されました');

    // コマンドを登録
    let disposable = vscode.commands.registerCommand('myextension.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from My Extension!');
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {
    console.log('拡張機能が無効化されました');
}

package.json設定

{
  "name": "my-extension",
  "displayName": "My Extension",
  "description": "私のカスタム拡張機能",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.74.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:myextension.helloWorld"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "myextension.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./"
  },
  "devDependencies": {
    "@types/vscode": "^1.74.0",
    "@types/node": "16.x",
    "typescript": "^4.9.4"
  }
}

拡張機能のテスト

// src/test/suite/extension.test.ts
import * as assert from 'assert';
import * as vscode from 'vscode';

suite('Extension Test Suite', () => {
    vscode.window.showInformationMessage('Start all tests.');

    test('Sample test', () => {
        assert.strictEqual(-1, [1, 2, 3].indexOf(5));
        assert.strictEqual(-1, [1, 2, 3].indexOf(0));
    });
});

拡張機能のパッケージ化

# vsce（Visual Studio Code Extension）をインストール
npm install -g vsce

# 拡張機能をパッケージ化
vsce package

# .vsixファイルが生成される
# my-extension-0.0.1.vsix

拡張機能の公開

# マーケットプレイスに公開
vsce publish

# バージョンを指定して公開
vsce publish 1.0.0

# パッチバージョンを自動増加
vsce publish patch

拡張機能のデバッグ

デバッグ設定

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Extension",
      "type": "extensionHost",
      "request": "launch",
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}"
      ]
    },
    {
      "name": "Extension Tests",
      "type": "extensionHost",
      "request": "launch",
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}",
        "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
      ]
    }
  ]
}

ログとデバッグ

// ログ出力
console.log('デバッグメッセージ');
console.error('エラーメッセージ');

// 開発者ツールでログを確認
// Help → Toggle Developer Tools

拡張機能のパフォーマンス

パフォーマンス監視

# 拡張機能のパフォーマンスを確認
# コマンドパレット → "Developer: Show Running Extensions"

最適化のベストプラクティス

1. 遅延読み込み: 必要な時にのみ機能を読み込む
2. 効率的なアクティベーション: 適切なアクティベーションイベントを使用
3. メモリ管理: 不要なリソースを適切に解放
4. 非同期処理: UIをブロックしない非同期操作

// 遅延読み込みの例
export async function activate(context: vscode.ExtensionContext) {
    // 重い処理は必要な時まで遅延
    const heavyFeature = await import('./heavyFeature');
    
    // 非同期でリソースを初期化
    const resource = await initializeResource();
    
    context.subscriptions.push(
        vscode.commands.registerCommand('extension.command', async () => {
            await heavyFeature.execute();
        })
    );
}

トラブルシューティング

一般的な問題

1. 拡張機能が動作しない

   • 拡張機能が有効化されているか確認
   • 必要な依存関係がインストールされているか確認
   • TRAEを再起動

2. パフォーマンスの問題

   • 不要な拡張機能を無効化
   • 拡張機能のパフォーマンスを監視
   • 設定を最適化

3. 競合する拡張機能

   • 類似機能の拡張機能を確認
   • 一つずつ無効化してテスト
   • 設定の競合を解決

ログの確認

# 拡張機能のログを確認
# View → Output → 拡張機能名を選択

# 開発者ツールでコンソールログを確認
# Help → Toggle Developer Tools → Console

ベストプラクティス

拡張機能の選択

1. 必要性を評価: 本当に必要な拡張機能のみインストール
2. 評価とレビューを確認: 高評価で活発にメンテナンスされている拡張機能を選択
3. パフォーマンスを考慮: 軽量で効率的な拡張機能を優先
4. セキュリティを確認: 信頼できる開発者の拡張機能を選択

拡張機能の管理

1. 定期的な見直し: 使用していない拡張機能を定期的に確認
2. 更新の管理: 重要な拡張機能は手動更新を検討
3. バックアップ: 拡張機能リストをバックアップ
4. ワークスペース固有: プロジェクトに応じて拡張機能を管理

開発のベストプラクティス

1. 明確な目的: 拡張機能の目的と機能を明確に定義
2. ユーザビリティ: 直感的で使いやすいインターフェースを設計
3. パフォーマンス: 効率的で軽量な実装を心がける
4. ドキュメント: 包括的なドキュメントとサンプルを提供
5. テスト: 徹底的なテストを実施
6. メンテナンス: 定期的な更新とバグ修正

関連記事

• 一般設定