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

導入

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

>npm install -g yo generator-code

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

>yo code

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

>cd my_project

操作

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

参考：

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

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

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

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

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

概要

参考：

Extension Guides | Visual Studio Code Extension API [Official]

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

参考：

Extension Anatomy | Visual Studio Code Extension API [Official]

言語拡張

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

参考：

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

VSCode 用の Grimoire.js language extension を作ったよ – Qiita

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

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]

VSCode Python Language Extension – Stack Overflow

翻訳／ローカライズ

サンプル

• i18n-sample

リポジトリ：

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

参考：

拡張機能のメッセージを言語設定に合わせてローカライズしてみる – 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

テスト

参考：

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

まとめ

参考：

Wrapping Up | Visual Studio Code Extension API [Official]

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