#はじめに
ふと、VisualStudioCodeを使ってみたものの、普段使用しているテキストエディタで使用している
機能が欲しくて、拡張をしてみようと思いたったので、その備忘録を記載しています。
#なにつくるの?
- コマンドを実行してgrepした結果を出力ウィンドウに表示
- 選択している文字列を検索対象にする
- 選択してなかったらInputBoxを表示し、検索対象文字列を入力できるようにする
#下調べ
まずはHellowWorldから
https://code.visualstudio.com/docs/extensions/example-hello-world
英語苦手なので、詳細は下記の方の記事を参考にしました。
http://qiita.com/YuichiNukiyama/items/3b928a67248fe5c9a5ba
#テンプレートの作成
yo code
? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? quick-filter //適当
? What's the identifier of your extension? quick-filter //適当
? What's the description of your extension? howto //なくてもよい?
? What's your publisher name? hoge //重要
? Initialize a git repository? (Y/n) Y
##つまづいたところ
sudoを忘れる。
→うっかりさん
Initialize a git repositoryでnを選ぶとnode_modulesが作成されなくて詰む
→なんでや、今日日履歴管理されないソースコードは許されへんのか。(妥当か)
TypeScriptがわからない
→勉強不足。とりまJavascriptでプロジェクト作り直し。
#コーディング
extension.jsを編集
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
var vscode = require('vscode');
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
function activate(context) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log('Congratulations, your extension "quick-filter" is now active!');
// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
var disposable = vscode.commands.registerCommand('extension.quick-filter', function () {
// The code you place here will be executed every time your command is executed
//ドキュメントを取得
var editor = vscode.window.activeTextEditor;
//フィルタして出力
var quickFilter = new function()
{
var _editor_obj=editor;
var _MAX_STRING_COUNT=268435440;
return function(search_str)
{
//空文字はスキップ
if(!search_str)
return;
//出力ウィンドウの生成
var overview=vscode.window.createOutputChannel("quick-filter");
//出力ウィンドウをクリア
overview.clear();
var result="";
for (var i =0;i<_editor_obj.document.lineCount;++i)
{
if(~editor.document.lineAt(i).text.indexOf(search_str))
{
var oneline=editor.document.lineAt(i).text+"\n";
if (result.length + oneline.length < _MAX_STRING_COUNT)
result+=oneline;
else
{
//最大文字数を超えたら一旦初期化
overview.append(result);
result=oneline;
}
}
}
//見つからなかったらメッセージ表示
if(!result)
{
vscode.window.showInformationMessage("not found "+search_str);
}
//出力
overview.append(result);
//出力ウィンドウの表示
overview.show(true);
}
}
//選択している文字列を取得
var selectRenge= new vscode.Range(editor.selection.start,editor.selection.end);
var search=editor.document.getText(selectRenge);
console.log(search);
if(!search)
{
//空文字ならInputBoxを表示
var ioption = {
password:false,
value:""
};
vscode.window.showInputBox(ioption).then(quickFilter);
}
else
{
//選択中の文字列でフィルタ
quickFilter(search);
}
});
context.subscriptions.push(disposable);
}
exports.activate = activate;
// this method is called when your extension is deactivated
function deactivate() {
}
exports.deactivate = deactivate;
#公開
パッケージ作成
https://code.visualstudio.com/docs/tools/vscecli
日本語の解説
http://qiita.com/YuichiNukiyama/items/ffcb32188f473b92133d
##つまづいたところ
公開しないならPersonal Access Tokenはいらなんじゃねーの?
→アクセストークンなしで何度やってもトークン入れろと言われる。
→これは「publisherの設定」をやっていなかったからと思われる。
→というわけでパッケージ作成するにはアクセストークンは必要。
間違ってpublish
→意図せず公開しちゃった。
package.jsonに日本語
→ダメみたい。README.mdは大丈夫そう。