preface

Our goal is to implement a basic library plug-in with the following features:

  • Syntax check, check API command call correctness, parameter type correctness, parameter number correctness, key parameters and system check validity, etc
  • Syntax automatic completion, assist users to write code
  • Grammar hover prompt, auxiliary explanation of grammar
  • Other features
    • Webview Displays remote information

This is the hover syntax tip & WebView implementation, let’s take a look at the final effect, isn’t it amazing, come and discuss with me exactly how to implement it

Hover hint:

See more information:

The full code is available on my Github.

First, grammar hover prompt

1.1 Syntax description

  • languages
registerHoverProvider(selector: DocumentSelector, provider: HoverProvider): Disposable
Copy the code

1.2 implementation

For example, there is a testA method under tyc_test

// client/src/config/doc.ts const doc = [ { kind: 'Function', body: [ "testA" ], detail: "(method) tyc_test.testA( key: String, value: any)", documentation: 'test testA autocomplete @param key - name of the field to set. @param value - value to set.'}]; import * as vscode from 'vscode'; import { file } from '.. /config'; class HoverProvider { provideHover(document: vscode.TextDocument, position: vscode.Position) { const text = document.getText(new vscode.Range( new vscode.Position(0, 0), position )); const word = document.getText(document.getWordRangeAtPosition(position)); if(/tyc_test\.[A-Za-z]+$/g.test(text)) { for(let i = 0; i < doc.length; i++ ) { const regExp = RegExp(`${doc[i].body[0]}`); // Check if the current syntax is documented, If (regExp. Test (word)){const description = doc[I].documentation. Replace (/\@/g,function(m,n){return '\n${m}'; }); return new vscode.Hover([doc[i].detail,description]); }}}; } } export default function(context: vscode.ExtensionContext) { context.subscriptions.push(vscode.languages.registerHoverProvider(file, new HoverProvider())); };Copy the code

In the plug-in entry file introduce:

// client/src/extension.ts import hoverInfo from './provider/hoverInfo'; Export function activate(context: vscode.extensionContext) {// hoverInfo(context); }Copy the code

1.3 the effect

2. View more information (WebView)

2.1 Syntax Description

  • window
createWebviewPanel(viewType: string, title: string, showOptions: ViewColumn | {preserveFocus: boolean, viewColumn: ViewColumn}, options? : WebviewPanelOptions & WebviewOptions): WebviewPanelCopy the code

2.2 implementation

Our interaction design is to select any content, right click to see the details of the content, we just hint, show you selected content, in fact, you can use your imagination to do more things according to your needs, such as asynchronously access some of the system’s information display

First we need to register a command, here we bind the command to the right menu, and set the shortcut keys

"Contributes ": {"commands": [{"command": "vscode-example-tyc.preview", // contributes a command" title": }], "keybindings": [{"command": "vscode-example-tyc.preview", // add a new shortcut "key": "CTRL + L "," MAC ": "cmd+l", "when": "editorHasSelection" } ], "menus": { "editor/context": [ { "when": "EditorHasSelection ", // declare a menu item "command": "vscode-example-tyc.preview", "group": "navigation"}]}}Copy the code

Create webView body logic

// client/src/provider/createWebview.ts import * as vscode from 'vscode'; import { render } from './render/index'; let panel = null; const preview = vscode.commands.registerCommand('vscode-example-tyc.preview', async function (uri) { let editor = vscode.window.activeTextEditor; if (! The editor) {vscode. Window. ShowWarningMessage (' please open a new file using the '); return; } let selection = editor.selection; const document=editor.document; let text = document.getText(selection); if (! text) { return; }; if (! panel || panel._store._isDisposed) { panel = createWebviewPanel(); } // Set the contents of the document panel.webview.html = render(text); }); Function createWebviewPanel () {let panel = vscode. Window. CreateWebviewPanel (' vscode - example - tyc ', 'for more information, vscode.ViewColumn.Two, { enableScripts: true, retainContextWhenHidden: false, } ); panel.onDidDispose(async (event) => { }); return panel; } export default function(context: vscode.ExtensionContext) { context.subscriptions.push(preview); };Copy the code

In the plug-in entry file import

// client/src/extension.ts import createWebview from './provider/createWebview'; Export function activate(context: vscode.extensioncontext) {// createWebview createWebview(context); }Copy the code

2.3 the effect

2.4 How do I Debug the WebView

Press theCtrl+Shift+PAnd then open it upWebview development tools(Open Webview Developer Tools)

Debugging interface:

2.5 Advanced Content

For security reasons, Webview cannot directly access local resources by default. If you want to load local images, JS, CSS, etc., you must use the special VScode-resource: protocol. All static resources in the web page must be converted to this format, otherwise they cannot be loaded normally

If you want to interact with vscode, you need to use its message communication API, which is not described here, you can read blog.haoji.me/vscode-plug… To learn more

Third, series of articles

  • Vscode plug-in development guide (I)- theory
  • Vscode plug-in development guide (ii) – practice – build projects
  • Vscode plug-in development guide (three) – actual combat – grammar verification implementation
  • Vscode plug-in development guide (four) – combat – automatic completion implementation