省流版
解决了什么痛点?
-
LeetCode网页版编辑器代码提示弱
-
刷题很多时候要背模版和套路,只做一遍很难掌握,网页版回顾起来也很不方便
-
想自建LeetCode笔记仓库要重复:
建立文件夹 -> 新建.js文件 -> 修改文件名称为题目名称 -> 从LeetCode上复制题目描述 -> 从LeetCode上复制题解 -> 粘贴到.js文件
,这一过程,容易从开始到放弃。 -
类似工具主力语言极少便捷支持JavaScript,更熟悉JavaScript前端同学夹缝中生存
工具的优势是什么?
我们知道市面上已经有很多类似的工具,且坦白来说功能很强大,我们才刚起步
-
更关心于
前端
同学的刷题用户体验 -
脚手架形态,在任意
目录
下执行命令自建题解库,一键创建模版、校验测试用例请认准kfc,创建lc,测试用例校验lk,查找(开发中)lf
-
小而美,可以蹭到github生态,又不局限于某种编辑器,同时刷github contributions的小绿点,享受vscode/webstorm/Sublime Text/nodepad++/vim生态
🤔 还是没懂如何使用?👉 案例🌰
- 大佬vs咱们的github,还不卷起来吗?
详细版
大家好,我是薇薇,一名沪漂女程序员,年前惨遭被裁,正值在家悲伤抠脚之际,突然看到两位朋友在合谋开发一款刷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
比如说你想刷这道题
那么可以执行一下
lc 1
或者
lc -i 1
这时候当前目录会出现一个文件夹
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
下面简单介绍一下我贡献的部分吧
数据结构转换
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
lc/lk命令
这一部分也是研究了一番vue-cli得出来的结论,在package.json中有一个bin的字段,起到命令到本地的映射作用,使用npm link就可以将进行调试了
顺便一提,打开全局的npm安装目录可以看到
没错,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
也行呀
⭐ 👉仓库地址