エディタに記載された文字を取得できない

Question

typescriptでテキストに出力された文字を取得するプログラムを書いているのですが、
実行できずに困っています。参考にしたのがjavascriptのプログラムなので、
どこか間違っている可能性があるのですが、教えて頂ければ幸いです。
宜しくお願い致します。

<参考にしたサイト>
・テキストが選択・ドラッグされたときに、選択された文章を取得する方法https://qiita.com/uuuno/items/5a215d9bfeabec8adbc3

・Visual Studio Codeの拡張機能をTypeScriptで作る方法
https://clickan.click/vsc-ext/

import * as $ from "jquery";
$('body').on('mouseup', function(e){  //mouseupでイベント発火
    var selectedStr;
    if(window.getSelection){  //selectionオブジェクト取得
      selectedStr = window.getSelection().toString();  //文章取得
      if(selectedStr !== '' && selectedStr !== '\n'){  //文章チェック
        console.log(selectedStr);
      }
    }
  });

実行結果

原因としては、package.jsonでpublisherの名前がないからかなと思っているので、
一応、package.jsonのコードを載せておきます。

{
    "name": "highlight",
    "displayName": "highlight",
    "description": "",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.34.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "*"
    ],
    "main": "./out/sample",
    "contributes": {
		"commands": [
			{
				"command": "extension.helloWorld",
				"title": "Hello World"
			}
		]
    },
    "scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -watch -p ./",
        "postinstall": "node ./node_modules/vscode/bin/install",
        "test": "npm run compile && node ./node_modules/vscode/bin/test",
        "tsc": "tsc"
    },
    "devDependencies": {
        "@types/mocha": "^2.2.42",
        "@types/node": "^8.10.48",
        "jquery": "^3.4.1",
        "js-yaml": "^3.13.1",
        "tar": "^4.4.8",
        "tslint": "^5.8.0",
        "typescript": "^2.9.2",
        "vscode": "^1.1.34"
    },
    "dependencies": {
        "@types/jquery": "^3.3.29",
        "missing": "0.0.1",
        "module.js": "^2.2.4",
        "requirejs": "^2.3.6",
        "tsd": "^0.7.3",
        "yarn": "^1.16.0"
    }
}

Answer 1

jQuery が window.document にアクセスできないためにエラーが出ています。今回はそこで実行が止まっていますが、先に進んだとしても window.getSelection() がエラーを出すはずです。

VS Code の extension は DOM へのアクセスが許可されていないため、これらを使うことができません。 HTML ドキュメントの操作を解説したサイトはほぼ参考にならないと考えていいでしょう。 VS Code のエディタを操作するには専用の API を使います： VS Code API

選択範囲が変化したイベントに反応して選択文字列を取得するにはこう書けばいいと思います：

const disposable = vscode.window.onDidChangeTextEditorSelection(event => {
  if (event.textEditor.selection.isEmpty) {
    // カーソルを移動するとカーソルの位置で空の選択範囲が変化したイベントが発生する。空なら無視する。
    return
  }
  const str = event.textEditor.document.getText(event.textEditor.selection)
})
context.subscriptions.push(disposable)

Comments

[syen2501]

返信が遅くなり申し訳ありません。教えていただきありがとうございます。
typescriptで上記のコードを実行しようとすると、
Property 'subscriptions' does not exist on type 'IContextDefinition'. というエラーが起こるのですが、
これはtypescriptでも動作出来るのでしょうか？
初心者なので教えて頂ければ幸いです。よろしくお願い致します。

[syen2501]

javascriptでこのプログラムを動かそうとすると「context is not defined.」と言われてしまいます。
contextは何か予め宣言か何かしなければいけませんか？
何度も申し訳ありませんが宜しくお願い致します。

[uasi]

参考になさったページの手順に従って拡張機能を作ると、 src/extension.ts の中にあらかじめコードが書かれていて、そこに `export function activate(context: vscode.ExtensionContext) { ... }` があると思います。この関数は VS Code が拡張機能を読み込んだときに呼び出されるもので、引数で `context` が渡されます。回答のコードは activate 関数の中に書いてください。

[syen2501]

返信ありがとうございます。
もう一つだけお聞きしたいことがあるのですが、ドラッグした文章は
コード内の「str」に格納され、それをconsole.logでコンソール上に表示できるようになると考えているのですが、表示されません。
かなり初歩的なことを聞くのですが、どのようにしたらドラッグした文章を取得できますでしょうか？

[uasi]

拡張の中で `console.log` を呼んだ場合、その拡張をデバッグ実行中であれば、出力はデバッガ側の VS Code の Debug Console に表示されます。

単に選択した文字列を見てみたいのなら `vscode.window.showInformationMessage(str);` とすれば VS Code の右下にポップアップ表示されます。

[syen2501]

返信ありがとうございます。
また分からないことがあれば、お聞きしたいと思います。

[uasi]

追加で質問される場合は VS Code の拡張に関する質問だと明確に書いたほうが答えを得やすいと思いますよ。ひとくちに TypeScript といっても一般的な web アプリケーションと VS Code 拡張とでは事情がまるで違います。