听说这个VS Code插件,可以自动翻译中文变量名?

作为一名努力搬砖的程序员,英语能力是不可或缺的职业技能之一。但是,多少时候我们会被一个变量的命名绊住思考的脚步,然后打开翻译工具,ctr+c/ctr+v。甚至有时候不得不草率地起名字,比如用"x"、"data"之类的,结果有时候连自己都看不懂。当然,英语了得的大神们可能还好,变量名就像小菜一碟。

不过,你有没有幻想过,有没有一种神器,可以在我们脑洞大开的时候,嘭!自动将我们的中文变量转化为符合变量规范的英文变量名呢?别逗了,这种神奇的东西,叫做「发现变量」(Found Variable)插件!

实现思路

要实现一个在编码时自动翻译变量名的插件,我们需要考虑以下几点:

  1. 监听文本编辑器的变化,在用户输入空格时触发翻译。
  2. 获取光标所在行的文本,使用正则表达式提取出变量名。
  3. 调用翻译API,将提取的中文变量名翻译成英文。
  4. 使用VS Code提供的文本编辑API,将中文变量名替换为英文。

实现代码

监听文本变化

VS Code提供了workspace.onDidChangeTextDocument方法来监听文本编辑器的变化。我们可以通过检查change事件中的文本和光标位置,在用户输入空格时判断是否需要翻译当前行的变量名:

ini 复制代码
js

Copy code

// 监听文本变化
translateListener = vscode.workspace.onDidChangeTextDocument((event) => {

  const text = event.contentChanges[0].text; 
  const editor = vscode.window.activeTextEditor;
  
  // 检查文本和光标位置
  if (text === ' ' && editor) {
    // 触发翻译逻辑
  }

});

提取变量名

获取到当前行文本后,我们使用正则表达式提取出变量名:

ini 复制代码
js

Copy code

const lineText = editor.document.lineAt(cursorLine).text;
const varReg = /\b(var|let|const)\s+(.*)\s*=/;
const matches = lineText.match(varReg);

if (matches) {
  const variable = matches[2];
  // 调用翻译API
}

这里我们只关心varletconst定义的变量。匹配出的第二组(.*)就是我们要翻译的变量名。

调用翻译API

调用第三方翻译API将变量翻译成英文。这里我们使用了chatGPT的翻译能力:

javascript 复制代码
js

Copy code

async function translate(text) {
  const result = await axios({
    // 调用OpenAI翻译API
  });

  return result.data.translated_text; 
}

替换文本

最后使用TextEdit API替换变量名:

ini 复制代码
js

Copy code

// 计算变量名的范围
const nameRange = getNameRange(lineText, variable);

// 创建文本替换  
const edit = vscode.TextEdit.replace(nameRange, translatedVar);

// 提交替换
editor.edit(editBuilder => {
  editBuilder.replace(edit.range, edit.newText); 
});

完整实现

把以上代码组合起来,我们就完成了一个在Coding时自动翻译变量的插件。完整代码可查看Github仓库

这个插件还具备了配置、启用/禁用的功能,以及针对不同文件类型进行翻译的定制。总体来说,利用VS Code提供的强大API,我们可以很容易地开发出非常实用的扩展来增强编辑体验。

使用插件

  1. 在VS Code插件商城中搜索"found-variable",下载并安装本插件。

  2. 在设置中填入你的OpenAI API Key。可以在OpenAI官网注册账户获取。

  3. 将插件的Enabled选项设置为true,启用插件。

  4. 现在在代码中输入中文变量名,输入一个空格后会自动翻译成英文。

  5. 也可以通过命令面板,搜索"Toggle Variable Translate"来启用或关闭该插件。

    重点注意: 使用前请通过命令面板设置你的OpenAI API Key

配置OpenAI的API Key后,插件就可以自动翻译变量名了。这极大地提高了编程效率,不用再人工翻译变量。可以让代码遵循英文命名规范,同时又不影响思路的流畅性。

总结

本文介绍了如何利用VS Code API开发一个自动翻译变量名的插件。主要包括监听文本变化、提取变量名、调用翻译API和替换文本。熟练掌握VS Code提供的各种API之后,我们就可以开发出各种增强编程体验的实用插件。如果本文对你有帮助,欢迎点赞转发支持一下。

相关推荐
小六路几秒前
可以横跨时间轴,分类显示的事件
前端·javascript·vue.js
比老马还六10 分钟前
Blockly文件积木开发
前端
Nayana18 分钟前
Element-Plus源码分析--form组件
前端
Bellafu66619 分钟前
selenium对每种前端控件的操作,python举例
前端·python·selenium
littleboyck41 分钟前
VSCode 全自动调试Vue/React项目
前端·visual studio code
洛小豆1 小时前
她问我::is-logged 是啥?我说:前面加冒号,就是 Vue 在发暗号
前端·vue.js·面试
我有一棵树1 小时前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
white-persist2 小时前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
IT_陈寒2 小时前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start3 小时前
前端基础一、HTML5
前端·html·html5