Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode-VSCode-php.cn

Artikel ini akan membantu anda menulis pemalam terjemahan vscode Dengan melaksanakan contoh pemalam terjemahan, anda boleh membiasakan diri dengan fungsi dan kaedah biasa pembangunan pemalam VS Code semoga dapat membantu rakan-rakan yang memerlukan.

Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode

Artikel ini akan mengetahui fungsi dan kaedah biasa pembangunan pemalam VS Code dengan melaksanakan contoh pemalam terjemahan. Sudah tentu, anda boleh pergi ke Kod VS API Rasmi dan Contoh GitHub rasmi untuk melihat dan belajar. [Kajian yang disyorkan: "tutorial pengenalan vscode"]

Keperluan

Bagi pengaturcara, terjemahan adalah keperluan yang sangat biasa, terutamanya bagi seseorang seperti saya yang tidak pandai berbahasa Inggeris pengaturcara.

boleh digantikan terus dengan nama pembolehubah Cina yang diterjemahkan
terjemahan perkataan, yang digunakan untuk terjemahan ulasan dalam kod sumber

Membangunkan

Memulakan projek

Melaksanakan perancah, memulakan projek

yo code

Salin selepas log masuk

Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode

hello world

Selepas mencipta direktori, kita boleh pergi ke fail entri untuk mencari fail entri ./src/extension.ts Terdapat activekaedah

export function activate(context: vscode.ExtensionContext) {
  console.log(&#39;Congratulations, your extension "vscode-fanyi" is now active!&#39;);
  let disposable = vscode.commands.registerCommand(
    "vscode-fanyi.helloWorld",
    () => {
      vscode.window.showInformationMessage("Hello World from vscode-fanyi!");
    }
  );
  context.subscriptions.push(disposable);
}

Salin selepas log masuk

kaedah aktif adalah untuk pemalam Kaedah entri mendaftarkan kaedah vscode-fanyi.helloWorld

"activationEvents": [
    "onCommand:vscode-fanyi.helloWorld"
],
"contributes": {
    "commands": [
        {
            "command": "vscode-fanyi.helloWorld",
            "title": "Hello World"
        }
    ]
}

Salin selepas log masuk

dan kemudian mengkonfigurasi acara yang diaktifkan dalam package.json, dan tajuk acara pelaksanaan ialah Hello World

Tekan F5 Apabila nyahpepijat, tetingkap penyahpepijatan lanjutan vscode baharu akan dibuka secara automatik Anda boleh melihat kesan berikut dengan melaksanakan arahan.

Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode

API Terjemahan

API Terjemahan Saya memilih untuk menggunakan Youdao Smart Cloud, sudah tentu semua orang boleh Pilih API terjemahan lain Sebab untuk memilihnya adalah kerana: anda mendapat 100 yuan wang percubaan percuma apabila anda mendaftar, yang cukup untuk kegunaan peribadi.

Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode

Mula-mula buat aplikasi, pilih perkhidmatan sebagai perkhidmatan terjemahan bahasa semula jadi dan kaedah akses ialah API

Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode

Penciptaan selesai Kemudian anda boleh mendapatkan ID aplikasi dan kunci rahsia.

Tukar kepada versi Nodejs berdasarkan demo JS rasmi

import CryptoJS from "crypto-js";
import axios from "axios";
import querystring from "querystring";

function truncate(q: string): string {
  var len = q.length;
  if (len <= 20) {
    return q;
  }
  return q.substring(0, 10) + len + q.substring(len - 10, len);
}

async function youdao(query: string) {
  var appKey = "3dde97353116e9bf";
  var key = "xxxxxxxxxx"; //注意：暴露appSecret，有被盗用造成损失的风险
  var salt = new Date().getTime();
  var curtime = Math.round(new Date().getTime() / 1000);
  // 多个query可以用\n连接  如 query=&#39;apple\norange\nbanana\npear&#39;
  var from = "AUTO";
  var to = "AUTO";
  var str1 = appKey + truncate(query) + salt + curtime + key;

  var sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);

  const res = await axios.post(
    "http://openapi.youdao.com/api",
    querystring.stringify({
      q: query,
      appKey,
      salt,
      from,
      to,
      sign,
      signType: "v3",
      curtime,
    })
  );
  return res.data;
}

Salin selepas log masuk

Mula-mula, pasang 3 pakej ini, antaranya crypto-js menjana tandatangan dan axios pustaka permintaan Nodejs.

Pemasangan

yarn add crypto-js axios querystring

Salin selepas log masuk

Hasil pertanyaan

Jika betul, ia mesti wujud dalam terjemahan

{
  "errorCode":"0",
  "query":"good", //查询正确时，一定存在
  "translation": [ //查询正确时一定存在
      "好"
  ],
  "basic":{ // 有道词典-基本词典,查词时才有
      "phonetic":"gʊd",
      "uk-phonetic":"gʊd", //英式音标
      "us-phonetic":"ɡʊd", //美式音标
      "uk-speech": "XXXX",//英式发音
      "us-speech": "XXXX",//美式发音
      "explains":[
          "好处",
          "好的",
          "好",
      ]
  },
}

Salin selepas log masuk

Kemudian tukar acara berdaftar untuk kembali secara tak segerak

let disposable = vscode.commands.registerCommand(
    "vscode-fanyi.helloWorld",
    async () => {
      const res = await youdao(
        &#39;Congratulations, your extension "vscode-fanyi" is now active!&#39;
      );
      vscode.window.showInformationMessage(res.translation[0]);
    }
  );
  context.subscriptions.push(disposable);

Salin selepas log masuk

Lihat hasil penyahpepijatan

Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode

Penggantian perkataan

Mula-mula dapatkan teks yang dipilih, kemudian terjemahkannya, dan akhirnya gantikan teks asal selepas terjemahan selesai.

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.commands.registerCommand("vscode-fanyi.replace", async () => {
      let editor = vscode.window.activeTextEditor;
      if (!editor) {
        return; // No open text editor
      }
      let selection = editor.selection;
      let text = editor.document.getText(selection);//选择文本

      //有选中翻译选中的词
      if (text.length) {
        const res = await youdao(text);
        //vscode.window.showInformationMessage(res.translation[0]);
        editor.edit((builder) => {
          builder.replace(selection, res.translation[0]);//替换选中文本
        });
      }
    })
  );
}

Salin selepas log masuk

Ikuti konfigurasi dalam package.json

"activationEvents": [
    "onCommand:vscode-fanyi.replace"
 ],
 "contributes": {
    "commands": [
      {
        "command": "vscode-fanyi.replace",
        "title": "翻译"
      }
    ],
    "keybindings": [
      {
        "command": "vscode-fanyi.replace",
        "key": "ctrl+t",
        "mac": "cmd+t",
        "when": "editorTextFocus"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "when": "editorTextFocus",
          "command": "vscode-fanyi.replace",
          "group": "vscode-fanyi"
        }
      ]
    }
  },

Salin selepas log masuk

Tambah menu klik kanan dan ikat pintasan papan kekunci.

Gambar di bawah ialah kumpulan Menu rasmi vscode , letakkan kumpulan dalam bahagian kod yang diubah suai

Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode

Mari kita lihat kesannya

Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode

Delineate perkataan Terjemah

Kod VS menyediakan provideHover Apabila tetikus dialihkan di atas, anda boleh melakukan beberapa operasi tertentu berdasarkan perkataan semasa Walau bagaimanapun, dalam senario terjemahan ini, satu perkataan tidak mencukupi , jadi ia mesti berdasarkan perkataan yang dipilih untuk menterjemah. Mari lihat kodnya.

vscode.languages.registerHoverProvider("*", {
    async provideHover(document, position, token) {
      const editor = vscode.window.activeTextEditor;
      if (!editor) {
        return; // No open text editor
      }

      const selection = editor.selection;
      const text = document.getText(selection);

      const res = await youdao(text);

      const markdownString = new vscode.MarkdownString();

      markdownString.appendMarkdown(
        `#### 翻译 \n\n ${res.translation[0]} \n\n`
      );
      if (res.basic) {
        markdownString.appendMarkdown(
          `**美** ${res.basic["us-phonetic"]}　　　　**英** ${res.basic["uk-phonetic"]}　\n\n`
        );

        if (res.basic.explains) {
          res.basic.explains.forEach((w: string) => {
            markdownString.appendMarkdown(`${w} \n\n`);
          });
        }
      }
      if (res.web) {
        markdownString.appendMarkdown(`#### 网络释义 \n\n`);
        res.web.forEach((w: Word) => {
          markdownString.appendMarkdown(
            `**${w.key}:** ${String(w.value).toString()} \n\n`
          );
        });
      }
      markdownString.supportHtml = true;
      markdownString.isTrusted = true;

      return new vscode.Hover(markdownString);
    },
  });

Salin selepas log masuk

Saya pada asalnya berpendapat bahawa jika MarkdownString menyokong html, audio hasil terjemahan juga boleh dimasukkan ke dalamnya boleh berhubung di ruangan komen.

Langkah paling kritikal ialah menukar package.json kepada activationEvents dalam "=onStartupFinished, yang boleh didapati dalam dokumentasi.

此激活事件将被发出，并且相关扩展将在VS代码启动后的某个时间被激活。这类似于激活事件，但不会降低VS代码启动的速度。当前，此事件在所有激活的扩展完成激活后发出。

"activationEvents": [
    "onStartupFinished"
  ],

Salin selepas log masuk

效果

Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode

驼峰转换

如果是变量是驼峰命名，可能无法翻译，需要转换下成空格

function changeWord(text: string): string {
  if (!text.includes(" ") && text.match(/[A-Z]/)) {
      const str = text.replace(/([A-Z])/g, " $1");
      let value = str.substr(0, 1).toUpperCase() + str.substr(1);
      return value;
  }
  return text;
}

Salin selepas log masuk

自定义配置

将有道 appKey 和 appSecret 改成用户扩展配置, 在下 package.json 中的配置 contributes 添加 configuration配置

"configuration": {
  	"title": "Vscode  fanyi",
  	"type": "object",
  	"properties": {
  	  "vscodeFanyi.youdaoApiname": {
  		"type": "string",
  		"description": "youdao appKey"
  	  },
  	  "vscodeFanyi.youdaoApikey": {
  		"type": "string",
  		"description": "youdao appSecret"
  	  },
  	}
  }

Salin selepas log masuk

就可以在扩展下方填入配置了

Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode

然后在代码中获得配置，并传入到原先的翻译函数中就可以了

const config = vscode.workspace.getConfiguration("vscodeFanyi");
const appKey = config.get("youdaoAppkey") as string;
const appSecret = config.get("youdaoAppSecret") as string;

Salin selepas log masuk

小结

本插件与 comment-translate 对比

1、API 不同

本插件目前只支持有道，用完免费相当于是付费
comment-translate 支持百度谷歌和必应，是免费API

2、实现方式不同

本插件是利用 provideHover 划词翻译，实现起来比较简单
comment-translate 是hover 翻译，使用 Language Server Extension Guide 实现起来比较复杂

最后附上链接和github

vscode 使用范围在扩大，从extensions market 市场上也可以发现，各种功能的插件基本都很齐全。本篇只介绍了其功能的冰山一角，同时 vscode extensions 开发门槛不高，欢迎大家尝试，或者将有意思的 extensions 推荐在评论区。

希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

更多关于VSCode的相关知识，请访问：vscode教程！！

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara membangunkan pemalam terjemahan dalam VSCode. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!