VS Code 整活：100行代码写一个悬浮翻译插件

前端劝退师

已于 2022-04-24 17:02:24 修改

阅读量2.3k

点赞数

分类专栏：前端劝退师前端开发文章标签： js javascript github vscode visual studio code

于 2022-02-18 18:04:32 首次发布

本文链接：https://blog.csdn.net/weixin_40906515/article/details/123013343

版权

本文介绍了如何利用100行代码在VS Code中实现一个悬浮翻译插件，通过分析现有插件源码，讲解了初始化配置、触发翻译和显示悬停等关键步骤，适合初学者和插件开发者学习。

摘要由CSDN通过智能技术生成

前言

要说哪个插件对效率提升最大，可能各有推荐，各有千秋。但我要说对初学者，以及英文有亿点点差的同学来讲：翻译，是日常开发中必不可少的一环。在下找过N个VSCode 翻译插件发现一个神器：

VSCode 插件：Google Translate Extension

这款插件不像其它要么需科学上网，要么强绑定快捷键的憨憨插件，有个最直观的功能：选中悬浮翻译

啊这...也太作弊了吧，编程能力+1s。

因为这两年都在从事VSCode二次/插件开发，这个功能深得我心，于是想捣腾一下，看看能不能写轮眼学习一番

撒话不说，开干！

1. 代码目录分析

其中代码逻辑都在src目录里。

command.js //全部命令
extension.js //插件入口文件
tranlate.js //翻译工具函数

先从入口文件extension.js出发：

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const command = require('./command')

function activate(context) {
    console.log('Congratulations, your extension "vsc-google-translate" is now active!');

    command.initSetting(context);

    context.subscriptions.push(command.hoverDisposable);
    context.subscriptions.push(command.tranDisposable);
    context.subscriptions.push(command.switchDisposable);
    context.subscriptions.push(command.copyDisposable);
    context.subscriptions.push(command.replaceDisposable);
    context.subscriptions.push(command.canDisposable);
    context.subscriptions.push(command.switchLangDisposable);
    conte