Environment Setup

Nothing to say here, check Official Guide

Example 1

Here we will talk about:

  1. activate , deactivate event and the lifecycle of a extension

  2. use registerCommand to regist a normal event

  3. provideDocumentFormattingEdits regist a format event and design formatter the details

extension.js

const vscode = require('vscode');

/**
 * @param {vscode.ExtensionContext} context
 */
const activate = (context) => {

  // 
  console.log('Congratulations, your extension "nurse-lisa" is now active!');

  // The key part is the ommand identifier, which will defined in package.json

  // Here we will do:
  // 1. Regist an event which will triggered via [ctrl + alt + P]
  // 2. Push the event into the event subscription queue 

  let disposable = vscode.commands.registerCommand('extension.nurselisa.format', function() {
    // The code you place here will executed every time your command executed
    // Display a message box to the user
    vscode.window.showInformationMessage(dj('nurse-lisa test abc !!!……', {
      successiveExclamationMarks: false,
      replaceWithCornerQuotes: 'double',
      halfwidthParenthesisAroundNumbers: true
    }));
  });
  context.subscriptions.push(disposable);

  // 3. Regist an event, which will invoked when triggered with 'format' action, if we have many formatter then we need to set the exact command identifier  
  // 4. Push the event into the event subscription queue 

  /*
    registerDocumentFormattingEditProvider(formatSelector, provideDocumentFormattingEdits)
    [formatSelector]: limit the [scheme] and [language]

    here we declared the [scheme], the optional values are: 
      [file] represents the saved files, 
      [untitled] represents unsaved files
  */
  const documentFilters = [{
    scheme: 'file'
  }, {
    scheme: 'untitled'
  }]
  let disposable2 = vscode.languages.registerDocumentFormattingEditProvider(documentFilters, {
    provideDocumentFormattingEdits: (document) => {
      const firstLine = document.lineAt(0);
      console.log(firstLine)
      return [vscode.TextEdit.insert(firstLine.range.start, '123456\n')];
    }
  });

  context.subscriptions.push(disposable2)

}
exports.activate = activate;

// this method called when your extension deactivated
const deactivate = () => {}

module.exports = {
  activate,
  deactivate
}

package.json

{
  "name": "nurse-lisa",
  "displayName": "Nurse-lisa",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.39.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:extension.nurselisa.format" 
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "extension.nurselisa.format", // here is the command identifier 
        "title": "Nurse Lisa - Format Markdown" // this is the title of your registered command
      }
    ]
  },
  "scripts": {
    "test": "node ./test/runTest.js"
  },
  "devDependencies": {
    "@types/glob": "^7.1.1",
    "@types/mocha": "^5.2.6",
    "@types/node": "^10.12.21",
    "@types/vscode": "^1.39.0",
    "eslint": "^5.13.0",
    "glob": "^7.1.4",
    "mocha": "^6.1.4",
    "typescript": "^3.3.1",
    "vscode-test": "^1.2.0"
  },
  "dependencies": {
    "doctor-jones": "^1.0.2"
  }
}

Example 2

Here we will use registerDocumentFormattingEditProvider regist a text editor format event。

	let disposable = vscode.commands.registerTextEditorCommand('extension.nurselisa.format', (editor, edit) => {
	  vscode.window.showInformationMessage('Nurse Lisa: Markdown Formatted');

	  let textToFormat = editor.document.getText();
	  let fullRange = new vscode.Range(0, 0, editor.document.lineCount, 0);

	  let formatted = format(textToFormat);

	  edit.replace(fullRange, formatted);

	});
	context.subscriptions.push(disposable);

Troubleshooting

Command not found in VSCode extension

command 'extension.useMyExtension.commandA' not found

Check if ALL your events are registered here:

{
    ……
    "activationEvents": [
      /* DO NOT forget to add prefix 'onCommand:' */
        "onCommand:extension.useMyExtension.commandA",
        "onCommand:extension.useMyExtension.commandB"
    ]
    ……
}