拡張機能を開発する方法 [VSCode]

導入

npm コマンドで、Yeoman と拡張機能の雛型ジェネレータをインストールする。

>npm install -g yo generator-code

yo コマンドで雛型を生成する。

>yo code

作成した雛型プロジェクトに移動する。

>cd my_project

操作

F5：拡張機能開発ホストを起動する

ドキュメント：

Your First Extension | Visual Studio Code Extension API [Official]

参考：

はじめての拡張機能開発 – Qiita

Extension を作る – Qiita

拡張機能を作ってみた | Tomiaki Matsumura

かんたん！ VSCode 拡張機能開発 | DevelopersIO

VSCode 拡張に入門してみる | inomoto

業務で役に立つ VSCode 機能拡張を作ってみた話 | LINE Engineering Blog

拡張開発に入門してみました | GMO アドパートナーズグループ TECH BLOG

英語翻訳拡張機能を自作する | The only neEt thing to do.

マクロを実現する方法 拡張作成編 | エクシードシステム

Visual Studio Code の拡張機能を作成する | ＠IT

概要

ドキュメント：

Extension Guides | Visual Studio Code Extension API [Official]

参考：

Visual Studio Code 拡張機能開発から公開まで – Qiita

仕組み／構造／ファイル構成

ドキュメント：

Extension Anatomy | Visual Studio Code Extension API [Official]

言語拡張

• シンタックスハイライト
• スニペット
• 文法規則

ドキュメント：

Language Extensions Overview | Visual Studio Code Extension API [Official]

Syntax Highlight Guide | Visual Studio Code Extension API [Official]

Snippet Guide | Visual Studio Code Extension API [Official]

Language Configuration Guide | Visual Studio Code Extension API [Official]

参考：

俺々言語モードを作る – Qiita

自作のシンタックスハイライト／スニペット拡張機能を作る – Qiita

Grimoire.js Language Extension を作ったよ – Qiita

シンタックスハイライトの作り方 | KAYAC engineers’ blog

プレインテキストで自分独自記法のハイライト表示 | 今日も元気に IT 屋さん

Python Language Extension – Stack Overflow

翻訳／ローカライズ

サンプル

• l10n-sample

リポジトリ：

microsoft/vscode-l10n – GitHub

l10n-sample – microsoft/vscode-extension-samples – GitHub

入手：

@vscode/l10n – npm

参考：

拡張機能のメッセージを言語設定に合わせてローカライズしてみる – Qiita

拡張のローカライズ対応方法 – Qiita

拡張機能のコマンドタイトル名をローカライズしてみる – Qiita

How to localise VSCode extension – Stack Overflow

Automatically create i18n directory for VSCode extension – Stack Overflow

マニフェスト (Manifest)

ドキュメント：

Extension Manifest | Visual Studio Code Extension API [Official]

再読み込み (Reload)

参考：

How to restart VSCode after editing extension’s config? – Stack Overflow

Change VSCode debugging action (restart button) – Stack Overflow

WebView

参考：

How to import npm packages in VSCode WebView extension development? – Stack Overflow

テスト

ドキュメント：

Testing Extensions | Visual Studio Code Extension API [Official]

公開

ドキュメント：

Publishing Extensions | Visual Studio Code Extension API [Official]

バンドル

ドキュメント：

Bundling Extensions | Visual Studio Code Extension API [Official]

Lint

ドキュメント：

Migrate from TSLint to ESLint | Visual Studio Code Extension API [Official]

ガイドライン

ドキュメント：

Extension Guidelines | Visual Studio Code Extension API [Official]

サンプル

リポジトリ：

microsoft/vscode-extension-samples: Sample Code Illustrating the VSCode Extension API – GitHub

マクロ

• macros (ctf0)
• VSCode Macros (EXCEEDSYSTEM)

参考：

スクリプトマクロ – Qiita

まとめ

Wrapping Up | Visual Studio Code Extension API [Official]

Extension Generator

リポジトリ：

microsoft/vscode-generator-code: Visual Studio Code Extension Generator – GitHub

入手：

generator-code – npm

ドキュメント：

Docs | Extension Generator

nls

リポジトリ：

microsoft/vscode-nls: npm Module to Support Externalization and Localization of VSCode Extensions – GitHub

microsoft/vscode-nls-dev: The Tools Automates the Extraction of Strings to be Externalized from TS and JS Code – GitHub

入手：

vscode-nls – npm

vscode-nls-dev – npm

参考：

How to create the i18n folder structure automatically using vscode-nls-dev · Issue #74 · microsoft/vscode-extension-samples – GitHub

Extension Localisation

リポジトリ：

sketchbuch/vscode-ext-localisation: Localisation for VSCode Extensions using package.nls.json Files – GitHub

入手：

vscode-ext-localisation – npm

VSCode Macros (EXCEEDSYSTEM)

入手：

VSCode Macros | Visual Studio Marketplace

リポジトリ：

exceedsystem/vscode-macros: This extension gives the macro features to your VSCode – GitHub

参考：

VSCode でマクロを実現する方法 拡張利用編 | EXCEEDSYSTEM

リンク：

Macros | EXCEEDSYSTEM