Bringen Sie Ihnen Schritt für Schritt bei, wie Sie ein vscode-Variablenübersetzungs-Plug-in von Grund auf entwickeln

Dieser Artikel hilft Ihnen bei der Entwicklung eines vscode-Variablen-Übersetzungs-Plug-Ins. Dieser Artikel zeigt den gesamten Prozess des gesamten Plug-Ins vom funktionalen Design bis zur Veröffentlichung unter vier Gesichtspunkten !

Der Grund für die Nachfrage ist, dass englische Drecksäcke während des Entwicklungsprozesses häufig auf eine Variable stoßen, die ihren chinesischen Namen kennt, aber möglicherweise das englische Wort vergessen hat oder es nicht kennt. Zu diesem Zeitpunkt habe ich es getan Bisher musste ich den Browser öffnen und Google Translate öffnen, Chinesisch eingeben, Englisch kopieren, dann zurück zu vscode wechseln und das Ergebnis einfügen.

Als ich jung war, hatte ich ein gutes Gedächtnis und konnte mich an die meisten englischen Wörter erinnern. Mit zunehmendem Alter werden meine Haare jedoch immer schlechter wiederholten sich immer häufiger, also habe ich aus der Erfahrung gelernt und dieses Plug-in entwickelt.

Da ich in den letzten Tagen auch die Plug-in-Entwicklung von Grund auf gelernt habe, wird in diesem Artikel der von einem Anfänger entwickelte Plug-in-Entwicklungspfad vollständig aufgezeichnet. Der Inhalt ist hauptsächlich eine praktische Einführung, die hauptsächlich aus vier Aspekten eingeführt wird Geben Sie eine vollständige Darstellung des gesamten Plug-In-Prozesses vom funktionalen Design bis zur Veröffentlichung.

?

Vscode-Einführungs-Tutorial
• 》】
  Funktionales Design
• Die Funktion hat hauptsächlich zwei Funktionen: die Übersetzung vom Chinesischen ins Englische und die Übersetzung anderer Sprachen ins Chinesische.

• Ersetzen Sie chinesische Variablen durch übersetzte englische Variablen Das Problem, das in der täglichen Entwicklung häufig auftritt, ist das Problem, dass bei der Wortübersetzung verschiedene Sprachen automatisch ins Chinesische übersetzt werden müssen und auf unbekannte Wörter stoßen und nicht wissen, was sie bedeuten, was sich auf die Effizienz auswirkt

• Der erste Schritt, um mit dem Aufbau einer Umgebung zu beginnen
  ist die Installation von Gerüsten,
yo

und

Generator-Code. Diese beiden Tools können uns helfen Erstellen Sie schnell das Projekt. Details finden Sie unter (https://github.com/Microsoft/vscode-generator-code). Suffix, das einfach in den Microsoft Plug-in Store hochgeladen oder lokal installiert werden kann

//安装
yarn global add yo generator-code

Generieren und initialisieren Sie das Projekt, geben Sie die Initialisierungsinformationen entsprechend Ihrer eigenen Situation ein

yarn global add vsce

Nach Erreichen dieses Schritts wählen Sie, direkt zu öffnen ,

Mit Code öffnen

• Nach dem Öffnen wird automatisch ein Arbeitsbereich erstellt und Sie können sie entsprechend Ihren Anforderungen bearbeiten. Die Datei wird gelöscht Direkt entwickeln und debuggen.

• Gehen Sie zum Bedienfeld „Ausführen und Debuggen“ und klicken Sie auf „Erweiterung ausführen“ oder auf die Tastenkombination

  F5. Der Mac kann direkt auf die Debug-Schaltfläche in der Touch-Leiste klicken. Nach dem Öffnen erscheint ein neues vscode-Fenster Dieses neue Fenster ist Ihre Testumgebung (

  Extended Development Host
). Die von Ihnen erstellte Plug-in-Funktion wird in der

Debug-Konsole

des vorherigen Fensters angezeigt Das integrierte Beispiel befindet sich beispielsweise in: Nach der Eingabe von „Hallo Welt“ in unserem neuen Fenster „cmd/Strg+Umschalt+P“ werden einige Informationen auf der Konsole des vorherigen Fensters gedruckt. An dieser Stelle werden Die Entwicklungsvorbereitungsumgebung ist bereit und der nächste Schritt besteht darin, mit der formalen Plug-in-Funktionsentwicklung zu beginnen und das andere ist

extension.js

• Wichtige Dateibeschreibung

  package.json

• activationEvents wird verwendet, um Aktivierungsereignisse zu registrieren und anzugeben, unter welchen Umständen die aktive Funktion in extension.js wird aktiviert. Gängige sind onLanguage

  ,
onCommand

... Weitere Informationen finden Sie im vscode-Dokument „activationEvents“ (https://code.visualstudio.com/api/references/activation-events)

main

der steckbare Haupteingang

contributes用来注册命令(commands),绑定快捷键(keybindings),**配置设置项(configuration)**等等，更多可配置项可看文档（https://code.visualstudio.com/api/references/contribution-points）

extention.js

extention.js主要作用是作为插件功能的实现点，通过active,deactive函数，以及vscode提供的api以及一些事件钩子来完成插件功能的开发

实现翻译功能

翻译这里主要是使用了两个服务，谷歌和百度翻译。

谷歌翻译参考了别人的做法，使用google-translate-token获取到token，然后构造请求url,再处理返回的body,拿到返回结果。这里还有一个没搞懂的地方就是请求url的生成很迷，不知道这一块是啥意思。

const qs = require('querystring');
const got = require('got');
const safeEval = require('safe-eval');
const googleToken = require('google-translate-token');
const languages = require('../utils/languages.js');
const config = require('../config/index.js');

// 获取请求url
async function getRequestUrl(text, opts) {
    let token = await googleToken.get(text);
    const data = {
        client: 'gtx',
        sl: opts.from,
        tl: opts.to,
        hl: opts.to,
        dt: ['at', 'bd', 'ex', 'ld', 'md', 'qca', 'rw', 'rm', 'ss', 't'],
        ie: 'UTF-8',
        oe: 'UTF-8',
        otf: 1,
        ssel: 0,
        tsel: 0,
        kc: 7,
        q: text
    };
    data[token.name] = token.value;
    const requestUrl = `${config.googleBaseUrl}${qs.stringify(data)}`;
    return requestUrl;
}

//处理返回的body
async function handleBody(url, opts) {
    const result = await got(url);
    let resultObj = {
        text: '',
        from: {
            language: {
                didYouMean: false,
                iso: ''
            },
            text: {
                autoCorrected: false,
                value: '',
                didYouMean: false
            }
        },
        raw: ''
    };

    if (opts.raw) {
        resultObj.raw = result.body;
    }
    const body = safeEval(result.body);

    // console.log('body', body);
    body[0].forEach(function(obj) {
        if (obj[0]) {
            resultObj.text += obj[0];
        }
    });

    if (body[2] === body[8][0][0]) {
        resultObj.from.language.iso = body[2];
    } else {
        resultObj.from.language.didYouMean = true;
        resultObj.from.language.iso = body[8][0][0];
    }

    if (body[7] && body[7][0]) {
        let str = body[7][0];

        str = str.replace(/<b><i>/g, &#39;[&#39;);
        str = str.replace(/<\/i><\/b>/g, &#39;]&#39;);

        resultObj.from.text.value = str;

        if (body[7][5] === true) {
            resultObj.from.text.autoCorrected = true;
        } else {
            resultObj.from.text.didYouMean = true;
        }
    }
    return resultObj;
}

//翻译
async function translate(text, opts) {
    opts = opts || {};
    opts.from = opts.from || &#39;auto&#39;;
    opts.to = opts.to || &#39;en&#39;;

    opts.from = languages.getCode(opts.from);
    opts.to = languages.getCode(opts.to);

    try {
        const requestUrl = await getRequestUrl(text, opts);
        const result = await handleBody(requestUrl, opts);
        return result;
    } catch (error) {
        console.log(error);
    }
}

// 获取翻译结果
const getGoogleTransResult = async(originText, ops = {}) => {
    const { from, to } = ops;
    try {
        const result = await translate(originText, { from: from || config.defaultFrom, to: to || defaultTo });
        console.log(&#39;谷歌翻译结果&#39;, result.text);
        return result;
    } catch (error) {
        console.log(error);
        console.log(&#39;翻译失败&#39;);
    }
}

module.exports = getGoogleTransResult;

百度翻译，百度翻译的比较简单，申请服务，获得appid和key，然后构造请求url直接请求就行

不知道如何申请的，可查看我之前的一篇文章 Electron+Vue从零开始打造一个本地文件翻译器 进行申请

https://juejin.cn/post/6899581622471884813

const md5 = require("md5");
const axios = require("axios");
const config = require('../config/index.js');
axios.defaults.withCredentials = true;
axios.defaults.crossDomain = true;
axios.defaults.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded";

// 百度翻译
async function getBaiduTransResult(text = "", opt = {}) {
    const { from, to, appid, key } = opt;
    try {
        const q = text;
        const salt = parseInt(Math.random() * 1000000000);
        let str = `${appid}${q}${salt}${key}`;
        const sign = md5(str);
        const query = encodeURI(q);
        const params = `q=${query}&from=${from}&to=${to}&appid=${appid}&salt=${salt}&sign=${sign}`;
        const url = `${config.baiduBaseUrl}${params}`;
        console.log(url);
        const res = await axios.get(url);
        console.log('百度翻译结果', res.data.trans_result[0]);
        return res.data.trans_result[0];
    } catch (error) {
        console.log({ error });
    }
}

module.exports = getBaiduTransResult;

获取选中的文本

使用事件钩子onDidChangeTextEditorSelection，获取选中的文本

    onDidChangeTextEditorSelection(({ textEditor, selections }) => {
        text = textEditor.document.getText(selections[0]);
    })

配置项的获取更新

通过vscode.workspace.getConfiguration获取到工作区的配置项，然后通过事件钩子onDidChangeConfiguration监听配置项的变动。

获取更新配置项

const { getConfiguration } = vscode.workspace;
const config = getConfiguration();

//注意get里面的参数其实就是package.json配置项里面的contributes.configuration.properties.xxx
const isCopy = config.get(IS_COPY);
const isReplace = config.get(IS_REPLACE);
const isHump = config.get(IS_HUMP);
const service = config.get(SERVICE);
const baiduAppid = config.get(BAIDU_APPID);
const baiduKey = config.get(BAIDU_KEY);

//更新使用update方法，第三个参数为true代表应用到全局
config.update(SERVICE, selectedItem, true);

监听配置项的变动

const { getConfiguration, onDidChangeConfiguration } = vscode.workspace;
const config = getConfiguration();

//监听变动
const disposeConfig = onDidChangeConfiguration(() => {
  config = getConfiguration();
})

监听个别配置项的变动

const disposeConfig = onDidChangeConfiguration((e) => {
    if (e && e.affectsConfiguration(BAIDU_KEY)) {
        //干些什么
    }
})

获取当前打开的编辑器对象

vscode.window.activeTextEditor代表当前打开的编辑器，如果切换标签页，而没有设置监听，那么这个这个对象不会自动更新，所以需要使用onDidChangeActiveTextEditor来监听，并替换之前的编辑器对象

const { activeTextEditor, onDidChangeActiveTextEditor } = vscode.window;
let active = activeTextEditor;
const edit = onDidChangeActiveTextEditor((textEditor) => {
  console.log('activeEditor改变了');
  //更换打开的编辑器对象
  if (textEditor) {
      active = textEditor;
  }
})

划词翻译悬浮提示

通过vscode.languages.registerHoverProvider注册一个Hover，然后通过activeTextEditor拿到选中的词语进行翻译，然后再通过new vscode.Hover将翻译结果悬浮提示

// 划词翻译检测
const disposeHover = vscode.languages.registerHoverProvider("*", {
    async provideHover(document, position, token) {
        const service = config.get(SERVICE);
        const baiduAppid = config.get(BAIDU_APPID);
        const baiduKey = config.get(BAIDU_KEY);

        let response, responseText;
        const selected = document.getText(active.selection);
        // 谷歌翻译
        if (service === 'google') {
            response = await getGoogleTransResult(selected, { from: 'auto', to: 'zh-cn' });
            responseText = response.text;
        }

        // 百度翻译
        if (service === 'baidu') {
            response = await getBaiduTransResult(selected, { from: "auto", to: "zh", appid: baiduAppid, key: baiduKey });
            responseText = response.dst;
        }
        // 悬浮提示
        return new vscode.Hover(`${responseText}`);
    }
})

替换选中的文本

获取到activeTextEditor,调用他的edit方法,然后使用回调中的replace

//是否替换原文
if (isReplace) {
  let selectedItem = active.selection;
  active.edit(editBuilder => {
    editBuilder.replace(selectedItem, result)
  })
}

复制到剪贴板

使用vscode.env.clipboard.writeText;

// 是否复制翻译结果
if (isCopy) {
  vscode.env.clipboard.writeText(result);
}

驼峰处理

function toHump(str) {
    if (!str) {
        return
    }
    const strArray = str.split(' ');
    const firstLetter = [strArray.shift()];
    const newArray = strArray.map(item => {
        return `${item.substring(0,1).toUpperCase()}${item.substring(1)}`;
    })
    const result = firstLetter.concat(newArray).join('');
    return result;
}

module.exports = toHump;

快捷键绑定

通过vscode.commands.registerCommand注册绑定之前package.json中设置的keybindings,需要注意的是registerCommand的第一个参数需要与keybindings的command保持一致才能绑定

registerCommand('translateVariable.toEN', async() => {
  //do something
})


//package.json
"keybindings": [{
  "key": "ctrl+t",
  "mac": "cmd+t",
  "when": "editorTextFocus",
  "command": "translateVariable.toEN"
}],

插件打包发布

打包

vsce package

打包后会在目录下生成.vsix后缀的插件

发布

插件发布主要是把打包的vsix后缀插件，传入微软vscode插件商店，当然也能本地安装使用。

传入商店

发布到线上需要到 微软插件商店管理页面（https://marketplace.visualstudio.com/manage/createpublisher），创建发布者信息，如果没有微软账号，需要去申请。

创建完成后，选择发布到vscode商店

本地安装

本地是可以直接安装.vsix后缀插件的，找到插件菜单

选择从VSIX安装,安装上面打包的插件就好了

Zu guter Letzt

Die chinesischen Informationen zu vscode sind etwas spärlich. Ich habe die meiste Zeit damit verbracht, englische Dokumente zu lesen, und ich hoffe, dass ich später mehr Englisch lernen kann Die Häufigkeit, mit der Sie dieses von Ihnen erstellte Plug-in verwenden, wird immer seltener. Das Projekt ist Open Source und die Nutzungsanweisungen und das Quellcode-Portal (https://github.com/Kerinlin/translate-variable)

Weitere Informationen zu VSCode finden Sie unter: vscode-Tutorial! !

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie ein vscode-Variablenübersetzungs-Plug-in von Grund auf entwickeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!