ゼロベース入門vscodeプラグイン開発(console.logプラスプレフィックスを例に)

11875 ワード
前言console.logはwindow上の一般的な方法であり、開発者がデバッグしたり、問題を特定したりするために、さまざまな情報をブラウザコンソールに印刷して出力することができます.
コード量が少ない場合、console.logを複数回使用し、開発者はコンソールで自分の欲しい情報を見つけることができます.eg: 
var student={
  name:"zhangsan",
  age:12
}
console.log(student.name)
var teacher={
  name:"zhangsan",
  age:21
}
console.log(teacher.name)
/**
*     
* zhangsan
* zhangsan
*   ，        ，   ，              ，           ，        。
*/

コード量が多く、チームワークが多いプロジェクトでは、大量のconsol.logが呼び出され、コンソールが惨めで、情報は多いが、自分が出力したものを見つけるのは難しい.この問題を解決するために、多くの開発者が印刷情報の前に接頭辞をつけて区別している.eg: 
//      student teacher  
console.log("student.name=======",student.name)
console.log("teacher.name=======",teacher.name)
...
/**
*     
* student.name======= zhangsan
* teacher.name======= zhangsan
*        ，"  "
*/

爽は爽やかですが、もう一つの問題があります.接頭辞をつけるのは開発者にとって体力的な仕事で、書くのが疲れています.そこで今回のニーズ(このような接頭辞印刷を実現する機能)があり、現在ではほとんどのフロントエンド開発者がvscodeを使用しているため、vscodeエディタに基づいてこのようなプラグインを開発し、痛みを解決し、開発効率を高める小さな目標を実現しています.
準備作業
  • npm install yo generator-code -g
  • yo code
  • プロンプトに従ってコマンドラインインタラクション
    • を完了する.
    OK、vscodeプラグインプロジェクトの足場が生成されました!
    ディレクトリ構造の説明
    ディレクトリ全体の構造は比較的簡単で、package.jsonとextension.jsの2つのファイルに重点を置いています.
    目次
    .
├── CHANGELOG.md 
├── README.md 
├── extension.js //   
├── jsconfig.json 
├── node_modules 
├── package-lock.json
├── package.json //     
├── test
└── vsc-extension-quickstart.md

    package.json 
    {
	... 
	"activationEvents": [ //       
		"onCommand:extension.helloWorld" //   extension.helloWorld               
	],
	"main": "./extension.js",  //     
	"contributes": { //    
		"commands": [{ //     
        "command": "extension.helloWorld", //      ，                 
				 "title": "Hello World"  //              
		}]
	},
	... 
}

    extension.js 
    const vscode = require('vscode');

//         
// context           
function activate(context) {
  //   registerCommand API      
  //   extension.helloWorld   package.json      
  //     disposable  
	let disposable = vscode.commands.registerCommand('extension.helloWorld', function () {
		//   showInformationMessage API       
    vscode.window.showInformationMessage('Hello World!');
	});
  //  disposable             
	context.subscriptions.push(disposable);
}
exports.activate = activate;

//         
function deactivate() {}

//      
module.exports = {
	activate,
	deactivate
}

    ハローワールド走り出す
    生成されたプロジェクトには、開発者の参考になるhello worldプラグインのdemoが付属しています.vscodeでさっき生成した項目を開き、キーボードのF5キーを押してデバッグモードに入ると、プラグインの実行のために新しいウィンドウが開き、新しいウィンドウでcommand+shift+pキーを押してコマンドパネルを開き、package.jsonでコマンドを定義したときのtitleに対応する値を入力すると、エディタの右下にHello World!というメッセージがポップアップします.extension.jsのコードをいくつか修正して、デバッグモードを再起動してみると、相応の変化が見えます.
    ###巨人の肩に立つ
    以上の紹介で、プラグインの開発とデバッグを行い、公式demoで直接拡張と修正を行うことができます.package.jsonとextension.jsの2つのファイルで文章を書き続けます.
    package.jsonでは、名前、バージョン、コマンドなど、主にプロジェクトの基本構成を変更し、コードウェアハウス、コマンドショートカットリスト、パブリッシャなど、追加の構成項目を追加します.以下はpackage.jsonで変更および追加された内容です.
    {
    "name": "vscode-prefix-log", //      
    "displayName": "vscode-prefix-log", //            
    "description": "console with prefix", //       
    "version": "0.0.1", //   
    "repository": { //          repository     ，             
        "type": "git",
        "url": "https://github.com/xxx/vscode-prefix-log"
    },
    "activationEvents": [
        "onCommand:console.with.prefix"
    ],
    "main": "./extension.js",
    "contributes": {
        "commands": [
            {
                "command": "console.with.prefix",
                "title": "prefix.log"
            }
        ],
        "keybindings": [ //                  title，            
            { 
                "command": "console.with.prefix",
                "key": "shift+d", //    
                "when": "editorTextFocus" //                     
            }
        ]
    },
  	"publisher": "xxx" //    
  	... 
}

    extension.jsはコード構造をそのままにし,activateメソッドを書き換える.開発するプラグインはエディタテキストに関連するため,onDidChangeActiveTextEditor,getWordRangeAtPositionなどのvscodeにおけるテキスト編集に関連するAPIが主に用いられる.
    function activate(context) {
    console.log('Congratulations, your extension "vscode-prefix-log" is now active!');
    //          
    let currentEditor = vscode.window.activeTextEditor;
    //          ，       
    vscode.window.onDidChangeActiveTextEditor(editor => (currentEditor = editor));
		//     
    const disposable = vscode.commands.registerTextEditorCommand('console.with.prefix', () => {
        new Promise((resolve, reject) => {
            let sel = currentEditor.selection; //       
            const reg = /[\S]+\.(log)$/; //     log   
            //   getWordRangeAtPosition          
            let ran = currentEditor.document.getWordRangeAtPosition(sel.anchor, reg);
            if (ran == undefined) {
                reject('please use this statements：xxx.log');
            } else {
                let doc = currentEditor.document; //         
                let line = ran.start.line; //     
                let item = doc.getText(ran); //   getText      
                let prefix = item.replace('.log', '');
                //                  
                let idx = doc.lineAt(line).firstNonWhitespaceCharacterIndex; 
                let wrapData = {
                    idx,
                    ran,
                    line,
                    txt: `console.log('${prefix}========',${prefix});`
                };
                resolve(wrapData);
            }
        }).then(wrap => {
                currentEditor
                .edit(e => {
                    //                          
                    e.replace(wrap.ran, wrap.txt);
                }).then(() => {
                    //         
                    currentEditor.selection = new vscode.Selection(
                        new vscode.Position(wrap.line, wrap.txt.length + wrap.idx),
                        new vscode.Position(wrap.line, wrap.txt.length + wrap.idx)
                    );
               });
          }).catch(message => {
          		console.log('REJECTED_PROMISE:' + message);
          });
    });
    context.subscriptions.push(disposable);
}

    次に、コードを保存し、F 5キーを押してデバッグした結果、下図のようになります.
    プラグインの公開と使用
    プラグインが開発されました.皆さんはどうすれば使えますか.簡単な方法は、プロジェクトcopyをvscodeの拡張ディレクトリに直接入れ、vscodeを再起動すれば使えます(小範囲でしか使えません).開発したプラグインをvsceというツールを通じてvscodeのアプリケーション市場に公開することが推奨されています.nodeパッケージをnpmに公開するのと同じように、初めて公開するのは少し煩雑で、具体的な流れはネット上のブログを参考にすることができます.コンソールで次のプロンプトを表示すると、パブリケーションが成功したことを示します.
    DONE  Published xxx.vscode-prefix-log@0.0.7
Your extension will live at https://marketplace.visualstudio.com/items？itemName=zhangleilei.vscode-prefix-log 
(might take a few seconds for it to show up).

    リリースに成功すると、vscodeのアプリケーション市場で名前でプラグインを見つけることができ、vscodeユーザーであれば快適にインストールして使用することができます.
    後語
    興味のある学生は、このプラグインに基づいてさらに拡張することができます.例えば、印刷時にファイル名や行番号などの情報を出力することで、正確な位置を特定することができます.本文はせいぜい1篇の入門科普を計算して、もし事を大きくしたいならば、vscodeのAPIと他の人の家が開発したプラグインコードをもっと見に行きます.
    コードアドレスgithub.com/qinhangong/…
    Linux ImageMagickのインストール
    【良いプログラマー特訓キャンプ】Java異常処理