導入

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

翻訳/ローカライズ

参考:

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

Manifest

参考:

Extension Manifest | Visual Studio Code Extension API [Official]

テスト

参考:

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]

まとめ

参考:

Wrapping Up | Visual Studio Code Extension API [Official]

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA