在vscode中配置LeetCode插件,从此愉快地刷题

2019/04/10 10:10
阅读数 126

<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="font-size: 16px; color: black; padding: 0 10px; line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; margin-top: -10px;"><p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">大家好,今早在B站看到up主的vscode里藏了leetcode插件,这才知道原来还有这款神器。但是没想到在用的时候遇到了一些麻烦,花了一点时间才解决。所以写这篇文章除了给大家安利这个好用的插件之外,也是为了帮助更多的同学避免踩坑。</p> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgb(89,89,89); margin-bottom: 30px; color: rgb(89,89,89);"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgb(89,89,89);">简介vscode</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">vscode在工业界鼎鼎大名,被誉为<strong style="font-weight: bold; color: rgb(71, 193, 168);">微软少有的拿得出手的精品</strong>(逃)。原本是不想过多赘述的,但是鉴于许多粉丝还是正在上学的萌新,所以花点笔墨简单介绍一下。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/6692c9e4-fe71-421b-8175-4ea5c9542dd3.png" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">vscode是微软开发的<strong style="font-weight: bold; color: rgb(71, 193, 168);">编辑器</strong>,严格说起来它并不是一个IDE,只是一个编辑器。但是由于它支持嵌入各大语言的编译器,并且对于terminal的支持也非常出色,所以已经近乎于一个支持众多语言,拥有许多特性的IDE了。根据2019年stackflow最新的调研,vscode已经成为<strong style="font-weight: bold; color: rgb(71, 193, 168);">最受开发者欢迎的开发环境了</strong>。在当下的互联网公司当中,可以说是无论前后端或者是其他的开发岗位都有大量的工程师使用它。它免费轻量级、跨平台、并且有着大量好用的插件作为支持。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">所以不论你用的是Windows,linux还是Mac,都可以非常方便地使用它。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">强调一下,vscode支持各大语言,基本上我们能想到的,我们听说过的没有听说过的,它都支持。我刚才特意去看了一下,连<strong style="font-weight: bold; color: rgb(71, 193, 168);">上古语言Pascal</strong>都支持,所以装就完事了。对学生党多说一句,不要听什么老师或者是某本教材的忽悠,去装什么visual studio或者是dev C++了,已经过时了。</p> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgb(89,89,89); margin-bottom: 30px; color: rgb(89,89,89);"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgb(89,89,89);">vscode的插件</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">vscode之所以强大很大的原因是因为<strong style="font-weight: bold; color: rgb(71, 193, 168);">拥抱开源</strong>,我们每个人都可以为它开发插件。也正是因为这点,vscode当中有着非常非常多的插件,无论我们想得到的还是想不到的,可以说是应有尽有。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">我们点击左侧边栏的extensions打开插件市场,我们可以当中进行搜索。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/854e2d3f-9564-4949-aa48-122e827d636b.png" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">比如你想要写Python,那么我们就输入Python,排名第一的就是Python的解释器:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xkwrdksj30sg0lcn1i.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">并且右侧还会有<strong style="font-weight: bold; color: rgb(71, 193, 168);">详细的说明和介绍文档</strong>,介绍这款插件的使用方法或者是配置方法,以及我们可以自己根据需要设置的配置。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">换成C++也是一样:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xlht6lvj30sg0lcn17.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">这些说明其实<strong style="font-weight: bold; color: rgb(71, 193, 168);">对应github仓库当中的一个repo</strong>,所以当我们点击其中的一些链接会跳转到github当中。另外,如果我们自己开发了相应的插件,同样也可以注册到vscode当中来,给其他人使用。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">这也是<strong style="font-weight: bold; color: rgb(71, 193, 168);">开源精神</strong>所在,即使微软家大业大,仅仅靠它一家公司的努力,是不可能同时支持和维护这么多功能和插件的。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">另外,需要注意的是大部分插件是安装好了可以直接使用的,但是也<strong style="font-weight: bold; color: rgb(71, 193, 168);">有些插件是需要配置</strong>的,这需要我们在安装和使用之前详细阅读文档。</p> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgb(89,89,89); margin-bottom: 30px; color: rgb(89,89,89);"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgb(89,89,89);">leetcode插件</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">熟悉了vscode的插件之后,我们开始进入本文的正题。和预料的一样,我们在插件市场当中搜索leetcode,然后安装下载量最高的那个即可。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xmcsdx5j30sg0lcq5x.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">我们安装之后,按住<strong style="font-weight: bold; color: rgb(71, 193, 168);">shift + ctrl(command) + p</strong>,打开插件搜索栏。输入leetcode,选择第一个sign in,然后输入账号和密码即可。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xmudjohj30sg0lcacy.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">但是你会发现<strong style="font-weight: bold; color: rgb(71, 193, 168);">登陆失败了</strong>。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">怎么回事,为什么失败了,难道是记错密码了吗?</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">于是你打开leetcode的网站又尝试了一下,发现密码没有记错,网页可以登陆。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">我们打开官网,会发现官方已经知道登陆失败的问题了,这是由于leetcode官网升级了登陆机制导致的。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xnqldo9j31he0fc0xt.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">但是leetcode只升级了国际版,对于国内的版本还没有升级,所以如果你使用的是国内的leetcode账号,那么我们只需要更换leetcode版本即可。更换的方式也很简单,点击上方地球形状的按钮进行选择即可:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xojaghlj30sg0lcdi2.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">但是,我个人<strong style="font-weight: bold; color: rgb(71, 193, 168);">更推荐使用国际版</strong>,因为英文的题目描述会更加清楚,并且题目的更新也会更加及时。况且以后说不准中文版的leetcode也会升级登陆机制,到时候还是会面临无法登陆的问题。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">很遗憾的是,对于无法登陆这个问题,官方很坦率地承认了对于这个问题<strong style="font-weight: bold; color: rgb(71, 193, 168);">没有特别好的解决方法,只能使用cookie来绕开</strong>。</p> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgb(89,89,89); margin-bottom: 30px; color: rgb(89,89,89);"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgb(89,89,89);">cookie登陆</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">cookie在网站当中经常使用,我们可以简单地将它认为是一个<strong style="font-weight: bold; color: rgb(71, 193, 168);">标识身份的令牌或者说证书</strong>。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">我们都知道,现在的网站往往有自动登录机制。因为我们每打开一次都要用户输入一次账号密码实在是太反人类了,并且有时候我们打开多个相同网站中的不同站点,也会想要保持登录的状态,而不是再输入账号密码。cookie正是基于整个目的诞生的。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">cookie的原理也很简单,我们在登录网站成功之后,网站的服务器<strong style="font-weight: bold; color: rgb(71, 193, 168);">会根据我们的账号id或者是其他信息使用加密算法生成一串密文</strong>。并且将这串密文发送给浏览器,浏览器会将这串密文存储起来,这样下次浏览器在访问网站的时候,只需要携带上这串密文,网站拿到密文进行解密之后就能识别出这是哪一个用户,自动设置成已经登录的状态,并且返回对应的数据。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">因此cookie数据非常重要,它<strong style="font-weight: bold; color: rgb(71, 193, 168);">关乎我们许多账号的安全</strong>。如果我们的cookie被黑客获取,我们的账号都会面临被盗的风险。由于对称加密算法几乎不可攻破,所以目前许多针对浏览器账户的攻击手段都和cookie有关。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">我猜测登录问题出现的原因应该是leetcode官方人为限制了第三方插件通过账号密码代理登录,所以解决方法很简单,就是我们<strong style="font-weight: bold; color: rgb(71, 193, 168);">使用cookie来进行模拟登录</strong>。</p> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgb(89,89,89); margin-bottom: 30px; color: rgb(89,89,89);"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgb(89,89,89);">前期准备</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">由于leetcode插件底层是使用的<strong style="font-weight: bold; color: rgb(71, 193, 168);">leetcode-cli</strong>命令行工具,所以我们需要现在本地保证我们的命令行工具的版本正确。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">首先,我们需要安装Node.js 8以上的版本,关于Node.js的安装方法网上随便就能搜到,安装也很简单,这里就不赘述了。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">接着,我们通过npm工具安装最新版本的leetcode-cli:</p> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; color: #333; background: #f8f8f8; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-comment" style="color: #998; font-style: italic; line-height: 26px;"># to remove the old version</span><br>npm uninstall -g leetcode-cli<br><span class="hljs-comment" style="color: #998; font-style: italic; line-height: 26px;"># to install the up-to-date version(2.6.17+)</span><br>npm install -g leetcode-tools/leetcode-cli<br></code></pre> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgb(89,89,89); margin-bottom: 30px; color: rgb(89,89,89);"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgb(89,89,89);">操作流程</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">首先,我们需要通过浏览器获取我们账号的cookie。下面以Google Chrome浏览器举例。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">我们先打开leetcode用我们自己的账号和密码登录,然后右击选择inspect:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xr4zkbhj312s0rqdje.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">接着选择Network下的XHR:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xrdj2g0j31ce0pstba.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">然后我们点击网站导航栏中的problems:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xrnhkapj319o0o0djz.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">这时候右边会显示出前端网页跳转的请求信息,我们找到其中一个名叫all的请求,选择Headers,往下拉就能找到cookie:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xrxq32cj315z0u011p.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">我们把这一串字符串复制下来。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">重新打开vscode,打开leetcode插件,选择sign in,这一次在<strong style="font-weight: bold; color: rgb(71, 193, 168);">选择登录方式的时候我们选择使用cookie登录</strong>:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xsevf8kj30sg0lc0v0.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">然后输入账号,粘贴进我们刚才复制下来的cookie即可。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">顺利的话,看到下图红框当中的边栏出现,就说明我们已经<strong style="font-weight: bold; color: rgb(71, 193, 168);">成功登录</strong>了。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xsxfljqj30sg0lc76q.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgb(89,89,89); margin-bottom: 30px; color: rgb(89,89,89);"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgb(89,89,89);">leetcode插件使用</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">leetcode的使用很简单,和网页版差距不大,我们<strong style="font-weight: bold; color: rgb(71, 193, 168);">点开all可以看到所有的问题</strong>,我们点击问题的标题会自动为我们加载题目的详细信息,已经通过的问题会打上绿色的勾。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xtf7tzzj30sg0lcn1t.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">我们要做题的话就右击选择<strong style="font-weight: bold; color: rgb(71, 193, 168);">Show Problem</strong></p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xtpsr9zj30gy07amxv.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">之后会弹出语言让我们选择,我们就选择我们最常用的语言就好。比如我最近用Python做题,就选择Python3:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xtz95cpj30sg0lcwhf.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">之后选择<strong style="font-weight: bold; color: rgb(71, 193, 168);">Just Open The problem file</strong></p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xubhp12j30oy05qt9a.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">vscode会自动为我们打开一个分屏。我们就可<strong style="font-weight: bold; color: rgb(71, 193, 168);">以一边看问题一边写代码</strong>了,不得不说实在是非常方便。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xunln8hj313s0lc78l.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgb(89,89,89); margin-bottom: 30px; color: rgb(89,89,89);"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgb(89,89,89);">leetcode配置</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">最后简单讲一下leetcode插件的一些配置。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">leetcode这个插件当中的配置还蛮多的,但是我个人觉得最主要的是其中的两个。一个是配置我们每个问题代码存放的文件路径,方便以后我们找到这些写好的代码。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">这个配置名字叫做<strong style="font-weight: bold; color: rgb(71, 193, 168);">leetcode.workspaceFolder</strong>,默认的路径是$HOME/.leetcode。这里的HOME是你系统的环境变量,不同的系统这个变量指定的位置不一样。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">我们可以打开终端输入</p> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; color: #333; background: #f8f8f8; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-built_in" style="color: #0086b3; line-height: 26px;">echo</span> <span class="hljs-variable" style="color: #008080; line-height: 26px;">$HOME</span><br></code></pre> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">查看一下我们当前的$HOME目录指向哪里,当然我们<strong style="font-weight: bold; color: rgb(71, 193, 168);">也可以自己修改这个配置</strong>。我们打开vscode的配置文件,搜索leetcode.workspaceFolder,就可以找到vscode当中的配置,我们修改我们想要的path即可。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xwihlltj30pr09sgm5.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">另一个配置是<strong style="font-weight: bold; color: rgb(71, 193, 168);">编辑器的快捷方式</strong>,我们仔细观察会发现我们打开的leetcode py文件下面会有两个按钮。我这张图里是三个,因为我设置过。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xwvteduj30gl08eglu.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">这些按钮是可以点击的,它们<strong style="font-weight: bold; color: rgb(71, 193, 168);">都有具体的功能</strong>。比如Submit是提交当前的code到leetcode网站,帮我们提交代码。Test是执行样例,看看样例是否能够通过。除了这两个之外还有两个,一个叫做Solution,可以查看当前最高赞的代码。另一个是Description,是显示问题描述。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">我们可以在<strong style="font-weight: bold; color: rgb(71, 193, 168);">leetcode.editor.shortcuts</strong>配置当中进行修改:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://tva1.sinaimg.cn/large/00831rSTgy1gd9xxe7o7yj30j4087glt.jpg" alt style="display: block; margin: 0 auto; width: auto; max-width: 100%;"></figure> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgb(89,89,89); margin-bottom: 30px; color: rgb(89,89,89);"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgb(89,89,89);">总结</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">有了这个插件之后,我们就可以摆脱使用网页端来进行刷题了。不得不说实在是<strong style="font-weight: bold; color: rgb(71, 193, 168);">非常方便</strong>,另外对于我们程序员来说,我觉得leetcode当中的许多问题,我们是一定会遇到的。<strong style="font-weight: bold; color: rgb(71, 193, 168);">问题仅仅是你遇到它的时候是在刷题还是面试</strong>。</p> <p data-tool="mdnice编辑器" style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0; line-height: 26px; color: rgb(89,89,89);">今天是周末,祝愿大家刷题愉快,<strong style="font-weight: bold; color: rgb(71, 193, 168);">点个关注</strong>再走吧。</p> </section>

原文出处:https://www.cnblogs.com/techflow/p/12590795.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部