How to write a vscode plug-in by yourself to realize plug-in freedom!

One 、 Environment building

1、 install Visual Studio Code
2、 install Node.js
3、 install Git
4、 Install tools for producing plug-in code ：Yeoman and VSCode Extension generator

• open cmd Command line tools , Perform the following installation Yeoman and VSCode Extension generator

npm install -g yo generator-code

Two 、 Create a project

1、 stay cmd Execute the following command from the command line , Automatically generate the basic code of a project

yo code

2、 Option explanation ：

• Choose the language for writing extensions , I chose JavaScript
• Enter the extension name
• Enter a flag （ I choose the default directly ）
• Enter a description of the extension
• stay jsconfig.json Whether to enable javascript Type checking
• Bind or not git Warehouse
• Which package manager to use （ I choose the npm）

3、 Directory description

4、 Result display

• The project is based on F5 perhaps vscode menu bar ：“ function – Start debugging ”, Then a new workspace window will open
• Shortcut key Ctrl+shift+p, Input hello word, The corresponding content will pop up
  

3、 ... and 、 Modify the code , Make a statistic of the number of characters in the selection code

1、 stay package.json Add the relevant code in

2、 stay extension.js Add relevant codes to the file

3、 External file wordCounter.js file

class WordCounter {
    
    constructor(_vscode) {
     
    	// Constructors , Pass in vscode object 
        this.vscode = _vscode;
        this.init();
    }

    init() {
     // initialization 
        var vscode = this.vscode;
        var StatusBarAlignment = vscode.StatusBarAlignment;
        var window = this.vscode.window;

        //statusBar, It needs to be released manually 
        this.statusBar = window.createStatusBarItem(StatusBarAlignment.Left);

        // An array that matches the registration event , Registration of events , It also needs to be released 
        var disposable = [];
        // The event is registered , Will automatically fill in a callback dispose To array 
        window.onDidChangeTextEditorSelection(this.updateText, this, disposable);

        // Save the resources to be released 
        this.disposable = vscode.Disposable.from(disposable);

        this.updateText();
        this.statusBar.show();
    }

    updateText() {
     
        var window = this.vscode.window;
        this.editor = window.activeTextEditor;
        var content = this.editor.document.getText();
        var len = content.replace(/[\r\n\s]+/g, '').length;
        this.statusBar.text = ` Already knocked ${
      len} A character. `;
    }

    dispose() {
     // Realization dispose Method 
        this.disposable.dispose();
        this.statusBar.dispose();
    }
}

module.exports = WordCounter;