5
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.

VisualStudioCodeのExtensionを作る

Posted at

#はじめに
ふと、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を編集

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は大丈夫そう。

5
5
1

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
5
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?