前端妹子失业在家刷题,开发了个leetcode刷题工具,效率直接翻倍!

34,919 阅读7分钟

省流版

解决了什么痛点?

  • LeetCode网页版编辑器代码提示弱

  • 刷题很多时候要背模版和套路,只做一遍很难掌握,网页版回顾起来也很不方便

  • 想自建LeetCode笔记仓库要重复:建立文件夹 -> 新建.js文件 -> 修改文件名称为题目名称 -> 从LeetCode上复制题目描述 -> 从LeetCode上复制题解 -> 粘贴到.js文件,这一过程,容易从开始到放弃。

  • 类似工具主力语言极少便捷支持JavaScript,更熟悉JavaScript前端同学夹缝中生存

工具的优势是什么?

我们知道市面上已经有很多类似的工具,且坦白来说功能很强大,我们才刚起步

  • 更关心于前端同学的刷题用户体验

  • 脚手架形态,在任意目录下执行命令自建题解库,一键创建模版、校验测试用例

    请认准kfc,创建lc,测试用例校验lk,查找(开发中)lf

  • 小而美,可以蹭到github生态,又不局限于某种编辑器,同时刷github contributions的小绿点,享受vscode/webstorm/Sublime Text/nodepad++/vim生态

🤔 还是没懂如何使用?👉 案例🌰

  • 大佬vs咱们的github,还不卷起来吗?

大佬vs我的github

image.png

详细版

大家好,我是薇薇,一名沪漂女程序员,年前惨遭被裁,正值在家悲伤抠脚之际,突然看到两位朋友在合谋开发一款刷leetcode的小工具——leetcode-practice……

下面重点稍微来介绍一下

EternalHeart:江湖人称A哥,Angular的忠实信徒,插件的主创+仓库创建人,

SmallTeddy:n年(n>=5)前端经验的神秘大佬,有钱有闲热爱开源

Hedwig:前端萌新,本文女主,主业撸码,兼职卖艺/研究魔法

在神秘力量的号召下~~(主要是A太热情了,把我拉了项目,实在不好意思挂名贡献者却啥也不干)~~,从一开始的摆烂抠脚到参与进来,现在这款工具也初具雏形

关于详细的介绍参见A佬写的这篇# [leetcode-practice]一款能够适合骑驴找马程序员的摸鱼神器

快速开始

leetcode-practice拥有多种形态,但是我更倾向于脱离仓库本身的使用方式,也就是说你可以尝试在终端内执行(node版本大于20)

这样做的好处主要是你可以自己脱离leetcode-practice项目建立自己的git题库,方便回顾。

npm install -g leetcode-practice

比如说你想刷这道题

image.png 那么可以执行一下

lc 1

或者

lc -i 1

image.png 这时候当前目录会出现一个文件夹

image.png description是题目的markdown格式的描述,当然index.js的注释中也可以看到题目描述,但是markdown可以更方便的查看图片,这里推荐下载一个markdown preview 插件

index.js的内容如下


/**
 * 1.两数之和 
 * 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target  的那 两个 整数,并返回它们的数组下标。
 * 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。
 * 你可以按任意顺序返回答案。
 *  
 * 示例 1:
 * 输入:nums = [2,7,11,15], target = 9
 * 输出:[0,1]
 * 解释:因为 nums[0] + nums[1] == 9 ,返回 [0, 1] 。
 * 示例 2:
 * 输入:nums = [3,2,4], target = 6
 * 输出:[1,2]
 * 示例 3:
 * 输入:nums = [3,3], target = 6
 * 输出:[0,1]
 *  
 * 提示:
 *  2 <= nums.length <= 104
 *  -109 <= nums[i] <= 109
 *  -109 <= target <= 109
 *  只会存在一个有效答案
 *  
 * 进阶:你可以想出一个时间复杂度小于 O(n2) 的算法吗?
 * 
 */
/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 */
var twoSum = function(nums, target) {
// 题解需要自己填入哦
    const map = new Map();
    for(let i =0, len = nums.length; i< len; i++) {
        if(map.has(target - nums[i])) {
            return [map.get(target - nums[i]), i]
        }
        map.set(nums[i], i);
    }
};

/**
 * Test case
 */
showLogs(
    twoSum,
    {
        data: [[ [2,7,11,15],  9],[ [3,2,4],  6],[ [3,3],  6]],
        structure: ["number[]","number"],
    },
    {
        data: [[0,1],[1,2],[0,1]],
        structure: ["number[]"]
    }
)
console.log('点击跳转到题目提交:https://leetcode.cn/problems/two-sum/');

这时候就可以愉快的使用vscode的代码提示和调试功能了,同时你还可以在本地建立自己的刷题仓库,方便回顾和查看~

leetcode-practice支持本地验证结果 执行

lk 1

或者

lk -i 1

image.png

下面简单介绍一下我贡献的部分吧

数据结构转换

leetcode提供的测试用例不管是链表、树还是图都是以数组形式,我解析了leetcode提供的js code的js doc,并这些数据结构写了两个转换函数,toArray 链表/树/图转换为数组,parse 将数组解析为链表/树/图 以链表为例

/**
 * ListNode 链表数据结构
 * @param val
 * @param next
 * @constructor
 */

export class ListNode {
  constructor(val, next) {
    this.val = (val === undefined ? 0 : val);
    this.next = (next === undefined ? null : next);
  }

  static parse(arr) {
    if (arr.length === 0) {
      return null// Return null for an empty array
    }
    const head = new ListNode(arr.shift(), null);
    let current = head;
    while (arr.length > 0) {
      current.next = new ListNode(arr.shift(), null);
      current = current.next;
    }
    return head;
  }

  static toArray(listNodes, arr = []) {
    if (listNodes === undefined || listNodes === null) {
      return arr;
    }

    arr.push(listNodes.val);
    return ListNode.toArray(listNodes.next, arr);
  }
}

单元测试

忘记哪位大佬说,成熟的开源项目,测试用例覆盖率一定很高,虽然这个项目还处于起步状态,我还是为它添加了单元测试。 这里选型了vitest,开箱即用,非常方便,强烈推荐

image.png

image.png

lc/lk命令

这一部分也是研究了一番vue-cli得出来的结论,在package.json中有一个bin的字段,起到命令到本地的映射作用,使用npm link就可以将进行调试了

image.png

顺便一提,打开全局的npm安装目录可以看到

image.png 没错,lc,lf,lk在这里呢

测试用例的执行

你一定很疑惑,index.js中showLogs并没有提供上下文,那么执行lk 1的时候是怎样提供测试用例的验证的呢?

运行时执行代码,大家肯定都能想到js中的著名黑魔法——eval或者new Function,没错,第一版我就是简单用eval来实现的,但是这样做肯定既不优雅也不安全……

这里要讲一个小插曲,这不是我正失业在家边emo边惆怅未来该怎么办嘛,人在这种时候脆弱的时候,就容易想到那些斯人已逝的前辈,于是我就去翻司徒正美大佬的知乎,发现了他生前写的最后一篇文章# nodejs虚拟机,也为我提供了灵感,有一种冥冥之中收到前辈指引的感觉,感谢司徒正美大佬无私的贡献与分享,让前端得以薪火相传!

简单来说……

nodejs有一个叫vm的模块,可以用来执行代码块和执行上下文(比如说浏览器中的window对象,在node中就是通过这个模块提供的,这也是import的底层实现),它提供了一个沙箱,让代码得以安全的执行。

这里放上核心代码

export function executeScript(filePath, context) {
    const fileContent = fs.readFileSync(filePath, 'utf-8');
    const script = new vm.Script(fileContent);
    return script.runInContext(context);
}

/**
 * 执行问题检测进程
 * @param path
 */
export const checkQuestion = async (path)=>{
    return await executeScript(path, vm.createContext({
        showLogs,console
    }))
}

好了,有关leetcode-practice的技术揭秘就写到这里吧,下一步我们会继续完善这个工具,也许会有vscode插件或者更多功能(比如说正在开发中的lf功能:各种形态的查找)

我的想法是想做一键拉hot 100到本地,主要是为了满足自己的需求,毕竟我真的失业了在找工作呀,如果有一起在家抠脚的小伙伴想加入我们,欢迎加入相亲交友网站github一起开发~或者给我们的仓库点点star也行呀

 ⭐ 👉仓库地址

持续更新系列

使用leetcode-practice打断点和在工程化项目中配置script使用方案