环境搭建

环境搭建部分不想说了,直接参考官方文档就是了。

Example 1

这里使用到的内容有:

  1. activate , deactivate 方法以及插件的生命周期
  2. registerCommand 注册一个普通事件
  3. provideDocumentFormattingEdits 注册一个格式化事件并设定格式化细节

extension.js

const vscode = require('vscode');

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

  // 这个方法会在从 ctrl + alt + P 点击的时候激活
  console.log('Congratulations, your extension "nurse-lisa" is now active!');

  // 对应的命令是在 package.json 里面定义的
  // 下方所做的操作: 

  // 1. 注册一个事件, 这个事件在 ctrl + alt + P 选中出发的时候激活
  // 2. 将事件推到订阅队列

  let disposable = vscode.commands.registerCommand('extension.nurselisa.format', 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(dj('nurse-lisa 测试一下 abc 哈哈!!!……', {
      successiveExclamationMarks: false,
      replaceWithCornerQuotes: 'double',
      halfwidthParenthesisAroundNumbers: true
    }));
  });
  context.subscriptions.push(disposable);

  // 3. 注册一个事件, 这个事件在触发 format 操作的时候会激活, 如果有多个 format 那么可能需要选择对应的 command
  // 4. 将事件推到订阅队列

  /*
      registerDocumentFormattingEditProvider(formatSelector, provideDocumentFormattingEdits)
      formatSelector 可以限定 scheme 以及 language
  */

  // 这里设置了对应的 scheme, file 代表保存了的文件, untitled 代表未保存的新文件
  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 is called when your extension is 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", // 在这里定义 command, 这个是命令的标识符。
        "title": "Nurse Lisa - Format Markdown" // 这个是命令的标题诶
      }
    ]
  },
  "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

这里所用到的内容有:

  1. registerDocumentFormattingEditProvider 注册一个文档修改事件。
	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);
  • 文章标题: 《VSC 插件开发-简单例子-代码格式化》
  • 发布日期: 2019-10-27
  • 文章分类: Tech
  • 相关标签: VSC Extension