バウンサーをすこれ

バウンサーは強職

【備忘録】VSCodeの拡張機能作成【VSCode】

VSCodeの拡張機能を作成してみる

唐突だがVSCodeの拡張機能を作成していきたいと思う。

作成しようと思った動機は、Atomではuraway氏が作成したはてなブログに投稿する拡張機能「hatena-blog-and-fotolife」がある。

しかし、筆者が愛用するVSCodeには存在していないため[ctrl+a]で選択し、はてなブログのエディタに貼り付けて投稿している。

なんともアナログだ・・・。

とはいえVSCodeでの拡張機能作成はこれが初めてであるため、試行錯誤しつつこのブログでメモを残しながら作成していきたい。

開発環境

  • Windows10 Pro Creators Update 64bit
  • Node.js 8.11.3
  • VSCode 1.24.1

VSCodeのダウンロード

まず肝心なのはVSCodeのダウンロードである。

理由は当たり前のことだが、デバッグが容易に行えるからである。

ダウンロードはこちらから

Node.jsのダウンロード

拡張機能を開発するのに必要なひな形をインストールするためにNode.jsを入れておく。

ダウンロードはこちらから

Node.jsにはLST版とCurrent版の2つがあるが、ここではLST版をダウンロードする。

簡単に上記の2つの違いについて説明すると、LST版は安定性が保証されたバージョンであり、Current版は頻繁にアップデートがあり最新のNode.jsが使用できる。

インストールが終わるとターミナルを立ち上げバージョンの確認をしておこう。

ひな形の作成

拡張機能を作成するためにひな形を作成する。

ターミナルで次のコマンドを実行する。

> yo code

? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes

Y/nと聞かれるのでYesを入力する。

    _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y ` 
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? 
? What's the identifier of your extension? 
? What's the description of your extension?
? What's your publisher name (more info: https://code.visualstudio.com/docs/tools/vscecli#_publishing-extensions)? 
? Enable stricter TypeScript checking in 'tsconfig.json'? 
? Setup linting using 'tslint'? 
? Initialize a git repository?

可愛らしいAAと共にいくつかの質問が出力されるので答えていく。

あとは自動的にひな形がカレントディレクトリに作成される。

今日のところはここまで。