VSC Extension Dev Notes - auto-mate/CheatSheetWiki GitHub Wiki

Javascript Extension

File extension.js

See especialy parts underlined with #####....

  // The module 'vscode' contains the VS Code extensibility API
  // Import the module and reference it with the alias vscode in your code below
  const vscode = require('vscode');

  // this method is called when your extension is activated
  // your extension is activated the very first time the command is executed

  /**
   * @param {vscode.ExtensionContext} context
   */
  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 "AH01" 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
    let disposable = vscode.commands.registerCommand('extension.ah01', function () {
      // The code you place here will be executed every time your command is executed
      //##############################################################################
      
      'Display a message box to the user'
      '#################################'
      vscode.window.showInformationMessage('Hello AH!');
      
      'Send DIR command to integrated terminal if term available'
      '##########################################################'
      actTerm = vscode.window.activeTerminal;
      if (actTerm != undefined) {
        vscode.window.activeTerminal.sendText("dir");
      }
      
      'Set Message Bar'
      '###############'
      w = vscode.window;
      w.setStatusBarMessage("ok");

      'Swap Selection For "Swaped Data" if active text editor'
      '######################################################'
      actEd = w.activeTextEditor;
      if (actEd != undefined) {
          
          actEd.edit(editBuilder => {
          // NB Only 1 or 2 works they dont work properly together....?
          
          //1
          editBuilder.replace (actEd.selection, "Swaped Data");
          console.log('Log Info');
          console.log(actEd.document.getText());
          console.log(actEd.selection);
          console.log(actEd.document.lineCount);
          console.log(actEd.document.lineAt(0).text);
          // 1
            
          /* //2 
          posAct = actEd.selection.active;                
          posAct._line = 1;
          posAct._character = 1;
          editBuilder.insert(posAct,"/* "+actEd.document.uri.fsPath+" *\/");
          */ //2
          
          })
        }

        'Display a warning message box to the user'
        '#########################################'
        w.showWarningMessage("OOPS");

        'Get Data From Input Box'
        '#######################'
        w.showInputBox({prompt:"whee",value:"China",password:true}).then(function(value) {console.log(value);MyFunc(value);})

        'Open Save Dialog'
        '################'
        //x = w.showOpenDialog({properties:["openFile"]}).then(function(value){console.log(value);});
        
        'Create Web Tab And Write HTML'
        z=w.createWebviewPanel('ahPage','AH Page',vscode.ViewColumn.One,
        {
          // Enable scripts in the webview
          enableScripts: true
        });      
        z.webview.html = 
        "<html>"+
        "<head>" +       
          "<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>"+
          "<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>" +
          "<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>" +
        "</head>" +
        "<body>" +
          "<div class='container'>"+
            "<h1>hello</h1>" + 
            "<h2 id='h2'>hello</h2>" + 
            "<div class='well'><button class=\"btn btn-success\">ok</button></div>"+
            "<img src=\"https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif\" width=\"300\" />" + 
          "<script>document.getElementsByTagName('body')[0].style.backgroundColor='#010';</script>" + 
          "</div>"+
        "</body>"+
        "</html>";
    
      
        }); // End of User Code

  // AH ADD SECOND COMMAND WITH disposable2 etc and new name
  // AH AND ADD context.subscriptions.push(disposable2); disposable3 or disposable4 or other name
  // AH ALSO add into package.json "activationEvents" and
  // AH "commands"
  let disposable2 = vscode.commands.registerCommand('extension.ah02', function () {
        //Execute a command
        // Find command in Keyboard Shortcuts
        // copy and paste to find command as below
        /*
        {
        "key": "ctrl+shift+f",
        "command": "workbench.action.findInFiles"
        }
        
        */
        vsc=vscode;
        vsc.commands.executeCommand("editor.action.insertLineAfter");
        vsc.commands.executeCommand("editor.action.insertLineAfter");
        vsc.commands.executeCommand("editor.action.insertLineAfter");
        vsc.commands.executeCommand("editor.action.insertLineAfter");

  });

  let disposable3 = vscode.commands.registerCommand('extension.ah03', function () {
    w = vscode.window;
    w.setStatusBarMessage("ah03");
  });

    'ADD Aditional as required NB See Adding More Commands for updates needed in package.json'
    '########################################################################################'
    context.subscriptions.push(disposable);
    context.subscriptions.push(disposable2);
    context.subscriptions.push(disposable3);
  }
  exports.activate = activate;

  'User Added Functions'
  '####################'
  function MyFunc(mytext) { vscode.window.showWarningMessage("From New Function "+ mytext);}
  function openDialog()   { vscode.window.showOpenDialog({properties:["openFile"]}).then(function(value){MyFunc(value);});}
  function test() {	x = vscode.window;}

    // this method is called when your extension is deactivated
  function deactivate() {}

  module.exports = {
    activate,
    deactivate
  }

Adding More Commands

in extention .js

add new

let disposable? = vscode.commands.registerCommand('extension.???', function () {
      ???;
 });

add new

context.subscriptions.push(disposable?);

in package.json

add new onCommand to activationEvents

"activationEvents": [		
    "onCommand:extension.ah01",  
"onCommand:extension.ah02",  
"onCommand:extension.ah03"  

add new command

"contributes": {  
  "commands": [  
     {  
       "command": "extension.ah01",  
       "title": "AH 01"  
     },  
     {  
       "command": "extension.ah02",   
       "title": "AH 02"  
     },  
     {  
       "command": "extension.ah03",  
       "title": "AH 03"  
     }  
]  
⚠️ **GitHub.com Fallback** ⚠️