持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 3 天,点击查看活动详情
前言
因为英格里希不好所以基于vscode写了个翻译插件。
效果图
开发前须知
开发vscode插件需要安装以下的库:
npm install yo generator-code -g
1.yo code安装框架详细文档
2.主要文件:
extension.js是入口文件。
3.VS Code默认具有以下界面。
1:活动栏,2:侧边栏,3:编辑栏,4:面板栏,5:状态栏
不多说上代码
1.在extension.js中加入下列代码,翻译采用的有道词典(有个50元的券所以个人玩够了)
//extension
function truncate(q) {
var len = q.length;
if (len <= 20) {
return q;
}
return q.substring(0, 10) + len + q.substring(len - 10, len);
}
const youdao = async function(query) {
const appKey = "*******";//appID
const key = "*******"; //appSecret
const salt = new Date().getTime();
const curtime = Math.round(new Date().getTime() / 1000);
// 多个query可以用\n连接 如 query='apple\norange\nbanana\npear'
const from = "AUTO";
const to = "AUTO";
const str1 = appKey + truncate(query) + salt + curtime + key;
const 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.translation;
}
function activate (context) {
let disposable = vscode.commands.registerCommand('vs-demo.helloWorld', function () {
vscode.window.showInformationMessage('Hello World from vs-demo!');
});
//registerHoverProvider:注册hover事件
//vscode.Hover:hover提示
let provideTips = vscode.languages.registerHoverProvider(['javascript', 'vue'], {
async provideHover (document, position, token) {
let wordAtPosition = document.getWordRangeAtPosition(position);
var word = document.getText(wordAtPosition);
console.log(word,'word')
let data = await youdao(word)
return new vscode.Hover('翻译结果:'+data[0]);
}
})
context.subscriptions.push(disposable);
context.subscriptions.push(provideTips);
}
2.在package.json中加入触发activate的条件我这里主要是以打开js文件触发
//package.json
"activationEvents": [
"onLanguage:javascript"
],
3.按下f5进行调试(为了避免其他插件的影响建议注释掉setting.json里的配置)