M

MLOG

日本語

カスタム拡張機能を構築してVS Codeのパワーを解き放ちましょう。セットアップから公開までを網羅し、コーディング環境を強化し、あなたの作品を世界と共有できます。

VS Code拡張機能開発のマスター：グローバル開発者向け総合ガイド

Visual Studio Code（VS Code）は、世界中の何百万人もの開発者にとって頼りになるコードエディタになりました。その人気は、軽量な性質、強力な機能、そして最も重要なこととして、拡張性に起因しています。カスタム拡張機能を作成できるため、開発者はエディタを特定のニーズに合わせて調整し、生産性を向上させ、ワークフローを効率化できます。この包括的なガイドでは、初期設定から世界で使用するための作品の公開まで、独自のVS Code拡張機能を作成するプロセスについて説明します。

VS Code拡張機能を開発する理由

VS Code拡張機能を開発すると、個々の開発者と組織の両方に多くのメリットがあります。

前提条件

拡張機能の開発に入る前に、以下がインストールされていることを確認してください。

開発環境のセットアップ

前提条件が整ったので、開発環境をセットアップする準備ができました。

  1. 新しい拡張機能プロジェクトの作成：ターミナルを開き、次のコマンドを実行して拡張機能ジェネレーターを開始します。
    2. yo code
  2. プロンプトに回答する：ジェネレーターは、拡張機能に関する一連の質問をします。一般的なプロンプトと推奨される回答の内訳は次のとおりです。
    • 作成する拡張機能のタイプは何ですか？TypeScriptベースの拡張機能には「新しい拡張機能（TypeScript）」を選択します。これは推奨されるアプローチです。
    • 拡張機能の名前は何ですか？拡張機能の記述的で一意の名前を選択します。例：「Code Spell Checker」、「JavaScript Snippets」、「Python Autocomplete」。
    • 拡張機能の識別子は何ですか？これは拡張機能の一意の識別子であり、通常は`publisher.extension-name`形式です。パブリッシャー名（GitHubのユーザー名または会社名など）を選択します。
    • 拡張機能の説明は何ですか？拡張機能の内容を簡潔で有益な説明を記述します。
    • gitリポジトリを初期化しますか？バージョン管理のためにGitリポジトリを初期化するには、「はい」を選択します。
    • eslintを使用してコードをリントしますか？コードスタイルの整合性を適用するには、「はい」を選択します。
  3. VS Codeでプロジェクトを開く：ジェネレーターが完了したら、新しく作成されたプロジェクトフォルダーをVS Codeで開きます。

プロジェクト構造の理解

拡張機能ジェネレーターは、次の主要ファイルを含む基本的なプロジェクト構造を作成します。

最初の拡張機能の作成

コマンドが実行されたときに「Hello World」メッセージを表示する簡単な拡張機能を作成することから始めましょう。

  1. `src/extension.ts`を開く：このファイルには、拡張機能がアクティブ化されたときに呼び出される`activate`関数が含まれています。
  2. `activate`関数を変更する：既存のコードを以下に置き換えます。
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension \"my-extension\" is now active!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from My Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. 説明：
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`：ID `my-extension.helloWorld`でコマンドを登録します。このコマンドは、VS Codeコマンドパレットで使用できます。
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`：VS Codeウィンドウに情報メッセージを表示します。
    • `context.subscriptions.push(disposable)`：コマンドを拡張機能のサブスクリプションに追加し、拡張機能が非アクティブ化されたときに適切に破棄されるようにします。
  4. `package.json`を変更する：`contributes`セクションに以下を追加して、コマンドを定義します。
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. 説明：
    • `"commands"`：拡張機能が提供するコマンドを定義します。
    • `"command": "my-extension.helloWorld"`：`extension.ts`で使用されているIDと一致するコマンドIDを指定します。
    • `"title": "Hello World"`：コマンドパレットのコマンドの表示名を設定します。

拡張機能のテスト

拡張機能をテストする時が来ました。

  1. F5キーを押す：これにより、拡張機能がインストールされた新しいVS Codeウィンドウが起動します。これは「拡張機能開発ホスト」です。
  2. コマンドパレットを開く：`Ctrl+Shift+P`（またはmacOSの場合は`Cmd+Shift+P`）を押して、コマンドパレットを開きます。
  3. 「Hello World」と入力する：コマンドパレットにコマンドが表示されます。
  4. 「Hello World」を選択する：コマンドをクリックすると実行され、VS Codeウィンドウに「Hello World」メッセージが表示されます。

拡張機能のデバッグ

デバッグは、拡張機能の問題を特定して修正するために不可欠です。VS Codeは優れたデバッグサポートを提供します。

  1. ブレークポイントを設定する：エディターのガターで行番号の横をクリックして、コードにブレークポイントを設定します。
  2. F5キーを押す：これにより、デバッグモードで拡張機能開発ホストが起動します。
  3. 拡張機能をトリガーする：デバッグするコードをトリガーするコマンドまたはアクションを実行します。
  4. 変数と呼び出し履歴を検査する：VS Codeデバッガーはブレークポイントで実行を一時停止し、変数の検査、コードのステップ実行、および呼び出し履歴の調査を可能にします。

VS Code APIの操作

VS Code APIは、エディターと対話するための豊富なインターフェイスと関数セットを提供します。APIの主要な領域を次に示します。

例：コードスニペット拡張機能の作成

基本的なReactコンポーネントを作成するためのコードスニペットを追加する拡張機能を作成しましょう。

  1. `snippets`フォルダーを作成する：プロジェクトのルートに`snippets`という名前の新しいフォルダーを作成します。
  2. スニペットファイルを作成する：`snippets`フォルダー内に`react.json`というファイルを作成します。
  3. スニペット定義を追加する：次のJSONを`react.json`に追加します。
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
  4. 説明：
    • `"React Component"`：スニペットの名前。
    • `"prefix": "reactcomp"`：スニペットをトリガーするプレフィックス。`reactcomp`と入力して`Tab`キーを押すと、スニペットが挿入されます。
    • `"body"`：スニペットのコード行を表す文字列の配列。
    • `${1:ComponentName}`：コンポーネント名をすばやく変更できるタブストップ。
    • `"description"`：スニペットの説明。
  5. `package.json`を変更する：`contributes`セクションに以下を追加します。
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. 説明：
    • `"snippets"`：拡張機能が提供するスニペットを定義します。
    • `"language": "javascriptreact"`：スニペットが適用される言語を指定します。
    • `"path": "./snippets/react.json"`：スニペットファイルへのパスを指定します。
  7. スニペットをテストする：`.jsx`または`.tsx`ファイルを開き、`reactcomp`と入力します。`Tab`キーを押してスニペットを挿入します。

高度な拡張機能開発テクニック

基本を習得したら、より高度な拡張機能開発テクニックを検討できます。

国際化とローカリゼーション（i18nおよびL10n）

グローバルな視聴者にリーチするには、拡張機能の国際化とローカリゼーションを検討してください。これには、さまざまな言語と地域をサポートするように拡張機能を調整することが含まれます。

拡張機能の公開

拡張機能の準備ができたら、他のユーザーが使用できるようにVS Code Marketplaceに公開できます。

  1. Azure DevOps組織を作成する：拡張機能を公開するには、Azure DevOps組織が必要です。お持ちでない場合は、Azure DevOps Webサイトで無料アカウントを作成してください。
  2. `vsce`ツールをインストールする：VS Code Extension Manager（`vsce`）は、拡張機能をパッケージ化および公開するためのコマンドラインツールです。npmを使用してグローバルにインストールします。
    3. npm install -g vsce
  3. パブリッシャーを作成する：パブリッシャーは、Marketplaceで拡張機能を所有するIDです。`vsce create-publisher`コマンドを使用してパブリッシャーを作成します。Azure DevOpsからパブリッシャー名と個人アクセス トークン（PAT）を提供する必要があります。
  4. 個人アクセス トークン（PAT）を生成する：Azure DevOpsで、[ユーザー設定]->[個人アクセス トークン]に移動し、[Marketplace（公開）]スコープで新しいPATを作成します。
  5. 拡張機能をパッケージ化する：`vsce package`コマンドを使用して、拡張機能を`.vsix`ファイルにパッケージ化します。
  6. 拡張機能を公開する：`vsce publish`コマンドを使用して、拡張機能をMarketplaceに公開します。パブリッシャー名とPATを提供する必要があります。

拡張機能開発のベストプラクティス

高品質で保守可能なVS Code拡張機能を作成するには、次のベストプラクティスに従ってください。

コミュニティリソース

VS Code拡張機能の開発について詳しく学ぶための貴重なリソースを次に示します。

結論

VS Code拡張機能を開発することは、コーディング環境をカスタマイズし、生産性を向上させ、ソリューションをグローバルな開発者コミュニティと共有するための強力な方法です。この包括的なガイドに従うことで、拡張機能開発の技術を習得し、自分自身や他の人のVS Codeエクスペリエンスを向上させる革新的なツールを作成できます。コミュニティを受け入れ、オープンソースプロジェクトに貢献し、VS Code拡張機能開発の絶え間なく進化する世界を継続的に学習および探索することを忘れないでください。頑張って、ハッピーコーディング！