Shulou(Shulou.com)06/01 Report--

This article is about how to develop a vscode Baidu translation plug-in, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Every time to give the element className always have to go to Baidu translation, greatly slowed down the development speed, this simple version of vscode Baidu translation plug-in, directly write Chinese select easy button to convert to English, you can also select English for translation.

I. Project construction

The project can be built directly by official scaffolding.

Install scaffolding

Npm install-g yo generator-code

Project generation

Yo code

Project operation

Press F5 directly to run, and after a successful run, a new vscode window will pop up with a title indicating the extension of the development host.

II. Preparatory work

Since the plug-in uses the api of Baidu Translation, you first need to log in to the Baidu Translation Open platform using the Baidu account, register as a developer, and get APPID and APPKEY.

Access mode

By calling the universal translation API, passing in the content to be translated, and specifying the source language to be translated (which supports automatic detection of the source language) and the target language, the corresponding translation results can be obtained.

The request api is as follows:

/ * Q: field for which translation is requested. Utf-8 encoding from: translation source language, which can be set to auto. Automatic detection of to: translation target language appid:APP ID salt: MD5 value of random number sign:appid+q+salt+ key * / https://fanyi-api.baidu.com/api/trans/vip/translate?q=&from=&to=&appid=&salt=&sign=

III. Project development

The main development files are the manifest file package.json and the entry file extension.js

Package.json

The configuration is as follows:

{/ / plug-in name, which must be composed of "name": "vscode-translate-plugin" with all-lowercase letters without spaces, / / the plug-in name shown in the plug-in market. "displayName": "vscode-translate-plugin", / / plug-in description "description": "vscode Baidu translation plug-in", / / plug-in version "version": "0.0.1", / / plug-in icon Minimum 128x128 pixel "icon": "img/icon.png", / / the minimum supported vscode version of the plug-in supports "engines": {"vscode": "^ 1.50.0"}, / / plug-in application market classification Optional values: [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs] "categories": ["Other"], / / activate event array "activationEvents": ["onCommand:vscode-translate-plugin.helloWorld"] / / plug-in entry "main": ". / extension.js", / / describe the release content of the plug-in "contributes": {"commands": [{"command": "vscode-translate-plugin.helloWorld" "title": "Hello World"}]}, "scripts": {"lint": "eslint.", "pretest": "npm run lint", "test": "node. / test/runTest.js"} "devDependencies": {"@ types/vscode": "^ 1.50.0", "@ types/glob": "^ 7.1.3", "@ types/mocha": "^ 8.0.0", "@ types/node": "^ 12.11.7", "eslint": "^ 7.9.0" "glob": "^ 7.1.6", "mocha": "^ 8.1.3", "typescript": "^ 4.0.2", "vscode-test": "^ 1.4.0"}}

Mainly configure the two configuration items, activationEvents and contributes

1 、 activationEvents

Plug-ins are not activated by default in VS Code, so how do you activate them? It can be configured through activationEvents, and there are several activation opportunities.

OnLanguage:$ {language} activated when a specific language file is opened

Activation event when onCommand:$ {command} invokes a command

Activate before onDebug debugging session starts

Triggered when the workspaceContains:$ {toplevelfilename} folder is opened and the folder contains at least one file that conforms to the glob pattern.

OnFileSystem:$ {scheme} is triggered when a file or folder opened by the protocol (scheme) is opened. It is usually file- protocol. It can also be replaced with custom file provider functions, such as ftp and ssh.

Triggered when the view id specified by onView:$ {viewId} is expanded

Triggered when the system-level URI of the onUri plug-in is open

* triggered when VS Code starts

The translation plug-in is configured with three commands here:

"activationEvents": [/ / translate English into Chinese command "onCommand:extension.translateToZh", / / translate Chinese into English command "onCommand:extension.translateToEn", / / replace Chinese with corresponding Chinese command "onCommand:extension.replaceWithEn"]

2 、 contributes

There are mainly the following configurations

VS Code provides users with good setting support for key-value pairs in configuration JSON format. The content of the configuration in this configuration item will be exposed to the user, and the user can modify your exposed options from "user Settings" and "Workspace Settings".

Commands sets command title and command body

Menus sets the menu item for the command for the editor or file manager, which at least contains the command that is called when selected and when the menu item is displayed. You can also set the location of the display for this menu item.

Keybindings shortcut key binding

Languages configures a language, introduces a new language, or enhances VS Code's existing language support.

Debuggers configures the debugger for VS Code

Breakpoints usually has a contributes.breakpoints entry for debugger plug-ins, where plug-ins can set breakpoints for which languages can be set.

Grammars configures TextMate syntax for a language.

Themes adds a TextMate theme to the VS Code.

Snippets adds code snippets to the language.

JsonValidation adds a validator to the json file.

Views adds views to the VS Code.

ProblemMatchers configures the mode of the problem locator.

ProblemPatterns configures the name of the problem mode that can be used in the question locator.

TaskDefinitions configures and defines an object structure that defines unique configuration tasks in the system.

Colors these colors can be used in the editor decorator of the status bar.

The translation plug-in is configured as follows:

"contributes": {/ / Command "commands": [{"command": "extension.translateToZh", "title": "translateToZh"}, {"command": "extension.translateToEn", "title": "translateToEn"}, {"command": "extension.replaceWithEn" "title": "replaceWithEn"}], / / shortcut key binding "keybindings": [{/ / command "command": "extension.translateToZh", / / windows shortcut key binding "key": "ctrl+shift+t", / / mac shortcut key binding "mac": "cmd+shift+t" "when": "editorTextFocus", {"command": "extension.translateToEn", "key": "ctrl+shift+e", "mac": "cmd+shift+e", "when": "editorTextFocus"}, {"command": "extension.replaceWithEn", "key": "ctrl+shift+r" "mac": "cmd+shift+r", "when": "editorTextFocus"}], / / menu "menus": {/ / Editor context menu That is, click the menu "editor/context" that comes out of the right mouse button: [{/ / when the editor is focused, "when": "editorFocus", / / Click the command triggered by the menu item "command": "extension.translateToZh", / / sort in groups The navigation group is always at the top of "group": "navigation"}, {"when": "editorFocus", "command": "extension.translateToEn", "group": "navigation"}, {"when": "editorFocus" "command": "extension.replaceWithEn", "group": "navigation"}}, / / plug-in configuration item "configuration": {"type": "object", "title": "translate configuration" "properties": {/ / Baidu Translation request api "translate.url": {"type": "string", "default": "*", "description": "Baidu Translation API"} / / Baidu Translation appId "translate.appId": {"type": "string", "default": "*", "description": "Baidu Translation appId"} / / Baidu Translation appKey "translate.appKey": {"type": "string", "default": "*", "description": "Baidu Translation appKey"}}

Extension.js

This file is the entry file for the plug-in and generally includes two functions, activate and deactivate. The activate function is executed when the plug-in is activated, that is, when the registered activationEvents occurs. What's in deactivate is the code that the plug-in shuts down.

We need to register the command configured in activationEvents when the plug-in is activated, implement the trigger function of the command, and then subscribe the plug-in to the command.

The complete code is as follows

Const vscode = require ('vscode') Const request = require ('request') const crypto = require (' crypto') const randomstring = require ('randomstring') / / md5 function function getMD5 (content) {if (! content) {return content} let md5 = crypto.createHash (' md5') md5.update (content) let d = md5.digest ('hex') return d.toLowerCase ()} / / Translation function function translate (targetType) {return new Promise ((resolve) Reject) = > {/ / Open vscode window object const editor = vscode.window.activeTextEditor / / if there is no open window Then return if (! editor) {console.log ('no open text editor') return} / / selected text position let selection = editor.selection / / get selected text let text = editor.document.getText (selection) / / unselected text Then return if (! text) {console.log ('no choosed text') return} / / Random number let salt = (new Date ()). GetTime () + randomstring.generate () / / get the configuration item const config = vscode.workspace.getConfiguration () / / request Baidu to translate api in package.json Translate the selected text request.post ({url: config.get ("translate.url"), formData: {Q: text, from: 'auto', to: targetType, appid: config.get ("translate.appId"), salt: salt Sign: getMD5 (config.get ("translate.appId") + text + salt + config.get ("translate.appKey")}}, function (err, res Body) {if (err) {vscode.window.showInformationMessage ('translation error:' + err.message) return} try {let msg = JSON.parse (body) If (msg.error_code) {vscode.window.showInformationMessage ('translation error:' + msg.error_msg) } else {/ / returns the translation result resolve ((msg.trans_result) [0] .dst)}} catch (e) {vscode.window.showInformationMessage ('translation error:' + e.message) })})} / / text replacement function Replace the currently selected text with the incoming valconst insertText = (val) = > {const editor = vscode.window.activeTextEditor if (! editor) {vscode.window.showErrorMessage ('no open text editor') return} const selection = editor.selection const range = new vscode.Range (selection.start, selection.end) editor.edit ((editBuilder) = > {editBuilder.replace (range) Val)})} / * * @ param {vscode.ExtensionContext} context * / / entry for plug-in activation function activate (context) {/ / Registration Command / / translated into Chinese var transToZhDisposable = vscode.commands.registerCommand ('extension.translateToZh' Function () {translate ('zh') .then (res = > {/ / the lower right corner of the vscode window shows the translated content vscode.window.showInformationMessage (decodeURIComponent (res)) ) / / translated into English var transToEnDisposable = vscode.commands.registerCommand ('extension.translateToEn', function () {translate (' en') .then (res = > {vscode.window.showInformationMessage (decodeURIComponent (res) })}) / / replace Chinese with English var replaceWithEnDisposable = vscode.commands.registerCommand ('extension.replaceWithEn', function () {translate (' en'). Then (res = > {/ / replace the selected Chinese with the corresponding English insertText (res)})}) / / vscode subscription registration command context.subscriptions.push (transToZhDisposable) Context.subscriptions.push (transToEnDisposable); context.subscriptions.push (replaceWithEnDisposable);} exports.activate = activate;// plugin triggers function deactivate () {} module.exports = {activate, deactivate} when the plug-in is released

Now that the development is complete, press F5 to run the project. Press Ctrl+Shift+P to open the command panel of vscode, enter the commands registered in the plug-in, and execute it. We have also added the corresponding shortcut keys and menus, which can be executed directly by using the shortcut keys or by clicking the menu that appears with the right mouse button.

The above is how to develop a vscode Baidu translation plug-in, the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.