Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@intertext543210(has)

Visual Studio Code での Extension開発01 (わたくしの最初の拡張)

Last updated at Posted at 2019-05-04

Visual Studio Code での Extension開発01
(わたくしの最初の拡張)

概要

「わたくしの最初の拡張」を目的とします
※これは公式ドキュメントのタイトル「あなたの最初の拡張」であることに因みます

公式ドキュメントと前回分は以下の通りです

前回は開発環境の構築までをおこないました
今回も公式ドキュメントを参照しながら進めていきます
では、はじめます

以下、引用は断りがない限り、公式ドキュメントからの引用とします

わたくしの最初の拡張

ジェネレータの実行

The generator scaffolds a project ready for development.
Run the generator and fill out a few fields:
日本語google翻訳
ジェネレータは開発の準備ができているプロジェクトを足場にします
ジェネレータを実行して、いくつかのフィールドに記入してください

まずはじめに、コマンドラインで以下を実行します

yo code

⬇

PS C:\Users\************> yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)

いろいろと聞かれます
次のように入力します
⬇

? What type of extension do you want to create? New Extension (TypeScript)

? What's the name of your extension? HelloWorld

? What's the identifier of your extension? helloworld

? What's the description of your extension? LEAVE BLANK　
※これはもしかすると何も入力しなくてよいのかもしれません

? Initialize a git repository? Yes

? Which package manager to use? npm

入力を完了するとファイル群がインストールされます

コードの実行

コマンドラインで以下を実行します

code ./helloworld

すると、新しいウィンドウが起動します

Then, inside the editor, press F5.
This will compile and run the extension in a new Extension Development Host window.
日本語google翻訳
次に、エディタ内で F5 を押します
これにより、新しい拡張機能開発ホストウィンドウで拡張機能がコンパイルおよび実行されます

F5 を押下します(ビルドに少し時間がかかります)

新しい拡張機能開発ホストウィンドウが開きます
コマンドパレット(Ctrl+Shift+P)を表示し Hello World と入力します

実行結果

無事、通知がポップアップされました

メッセージの変更

Let's make a change to the message

チュートリアルに従ってメッセージを変更します

以下の手順が紹介されています（番号はこちらで付記しました）

1. Change the message from Hello World to Hello VS Code in extension.ts
2. Run Reload Window in the new window
3. Run the command Hello World again.You should see the updated message showing up.

実施していきます
⬇
extension.ts のメッセージを変更すればいいので extension.ts を探します
パス：helloworld\src\ extension.ts

extension.ts

import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "helloworld" is now active!');
  let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
    vscode.window.showInformationMessage('Hello VS Code!');
    //「Hello World!」から「Hello VS Code!」に変更
  });
  context.subscriptions.push(disposable);
}
export function deactivate() {}

memo:メッセージの出力
vscode.window.showInformationMessage('Message');

実行結果

無事、通知がポップアップされました

さらに、いくつかの試すべきアイディア

以下を試してみます（番号はこちらで付記しました）

Here are some ideas for you to try:
1. Give the Hello World command a new name in the Command Palette.
2. Contribute another command that displays current time in an information message.
3. Replace the vscode.window.
  showInformationMessage with another VS Code API call to show a warning message.

結構厳しい感じです
ひとつずつ片づけます

1.コマンドパレット上のコマンド名の変更

結論から言えば、package.json を編集することで解決できました
※package.jsonはyo codeコマンドで作成したフォルダ直下にあります

package.json は様々な、定義ファイルのようです

Each VS Code extension must have a package.json as its Extension Manifest.
日本語google翻訳
各VS Code拡張機能は、その拡張機能マニフェストとして package.json を持つ必要があります

package.json の "title" 欄を「myApp」に変更しました
以下、部分の抜粋です

 "contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "myApp"
      }
    ]
  }

⬇
結果
コマンドパレット上のコマンド名を変更できました

2.現在時刻を表示するコマンドの作成

対象は, extension.ts　のメッセージ部分です
showInformationMessageの引数にDate()を指定

vscode.window.showInformationMessage(Date());

⬇
実行結果
日付が表示できました

3.警告メッセージの表示

vscode.window.showInformationMessage with another VS Code API call to show a warning message.
日本語googel翻訳
警告メッセージを表示するには、vscode.window.showInformationMessageを
別のVS Code API呼び出しに置き換えます

memo:警告の出力
showWarningMessage(message: string, ...items: string[]): Thenable<string | undefined>

以下、修正します

extension.ts

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "helloworld" is now active!');
  let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
    vscode.window.showWarningMessage("WarningMessag");
    //vscode.window.showInformationMessage('Hello VS Code!');から変更
  });
  context.subscriptions.push(disposable);
}

export function deactivate() {}

⬇
実行結果
警告が表示できました

以上で、公式ドキュメントあなたの最初の拡張(Your First Extension)が完了しました

In the next topic, Extension Anatomy,
we'll take a closer look at the source code of the Hello World sample and explain key concepts.

この先では、ソースコードを詳しく見ていくようです

参考

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?