大家好，今早在B站看到up主的vscode里藏了leetcode插件，這才知道原來(lái)還有這款神器。但是沒(méi)想到在用的時(shí)候遇到了一些麻煩，花了一點(diǎn)時(shí)間才解決。所以寫這篇文章除了給大家安利這個(gè)好用的插件之外，也是為了幫助更多的同學(xué)避免踩坑。

簡(jiǎn)介vscode

vscode在工業(yè)界鼎鼎大名，被譽(yù)為微軟少有的拿得出手的精品（逃）。原本是不想過(guò)多贅述的，但是鑒于許多粉絲還是正在上學(xué)的萌新，所以花點(diǎn)筆墨簡(jiǎn)單介紹一下。

vscode是微軟開(kāi)發(fā)的編輯器，嚴(yán)格說(shuō)起來(lái)它并不是一個(gè)IDE，只是一個(gè)編輯器。但是由于它支持嵌入各大語(yǔ)言的編譯器，并且對(duì)于terminal的支持也非常出色，所以已經(jīng)近乎于一個(gè)支持眾多語(yǔ)言，擁有許多特性的IDE了。根據(jù)2019年stackflow最新的調(diào)研，vscode已經(jīng)成為最受開(kāi)發(fā)者歡迎的開(kāi)發(fā)環(huán)境了。在當(dāng)下的互聯(lián)網(wǎng)公司當(dāng)中，可以說(shuō)是無(wú)論前后端或者是其他的開(kāi)發(fā)崗位都有大量的工程師使用它。它免費(fèi)輕量級(jí)、跨平臺(tái)、并且有著大量好用的插件作為支持。

所以不論你用的是Windows，linux還是Mac，都可以非常方便地使用它。

強(qiáng)調(diào)一下，vscode支持各大語(yǔ)言，基本上我們能想到的，我們聽(tīng)說(shuō)過(guò)的沒(méi)有聽(tīng)說(shuō)過(guò)的，它都支持。我剛才特意去看了一下，連上古語(yǔ)言Pascal都支持，所以裝就完事了。對(duì)學(xué)生黨多說(shuō)一句，不要聽(tīng)什么老師或者是某本教材的忽悠，去裝什么visual studio或者是dev C++了，已經(jīng)過(guò)時(shí)了。

vscode的插件

vscode之所以強(qiáng)大很大的原因是因?yàn)?span style="color: #008080">擁抱開(kāi)源，我們每個(gè)人都可以為它開(kāi)發(fā)插件。也正是因?yàn)檫@點(diǎn)，vscode當(dāng)中有著非常非常多的插件，無(wú)論我們想得到的還是想不到的，可以說(shuō)是應(yīng)有盡有。

我們點(diǎn)擊左側(cè)邊欄的extensions打開(kāi)插件市場(chǎng)，我們可以當(dāng)中進(jìn)行搜索。

比如你想要寫Python，那么我們就輸入Python，排名第一的就是Python的解釋器：

并且右側(cè)還會(huì)有詳細(xì)的說(shuō)明和介紹文檔，介紹這款插件的使用方法或者是配置方法，以及我們可以自己根據(jù)需要設(shè)置的配置。

換成C++也是一樣：

這些說(shuō)明其實(shí)對(duì)應(yīng)github倉(cāng)庫(kù)當(dāng)中的一個(gè)repo，所以當(dāng)我們點(diǎn)擊其中的一些鏈接會(huì)跳轉(zhuǎn)到github當(dāng)中。另外，如果我們自己開(kāi)發(fā)了相應(yīng)的插件，同樣也可以注冊(cè)到vscode當(dāng)中來(lái)，給其他人使用。

這也是開(kāi)源精神所在，即使微軟家大業(yè)大，僅僅靠它一家公司的努力，是不可能同時(shí)支持和維護(hù)這么多功能和插件的。

另外，需要注意的是大部分插件是安裝好了可以直接使用的，但是也有些插件是需要配置的，這需要我們?cè)诎惭b和使用之前詳細(xì)閱讀文檔。

leetcode插件

熟悉了vscode的插件之后，我們開(kāi)始進(jìn)入本文的正題。和預(yù)料的一樣，我們?cè)诓寮袌?chǎng)當(dāng)中搜索leetcode，然后安裝下載量最高的那個(gè)即可。

我們安裝之后，按住shift + ctrl(command) + p，打開(kāi)插件搜索欄。輸入leetcode，選擇第一個(gè)sign in，然后輸入賬號(hào)和密碼即可。

但是你會(huì)發(fā)現(xiàn)登陸失敗了。

怎么回事，為什么失敗了，難道是記錯(cuò)密碼了嗎？

于是你打開(kāi)leetcode的網(wǎng)站又嘗試了一下，發(fā)現(xiàn)密碼沒(méi)有記錯(cuò)，網(wǎng)頁(yè)可以登陸。

我們打開(kāi)官網(wǎng)，會(huì)發(fā)現(xiàn)官方已經(jīng)知道登陸失敗的問(wèn)題了，這是由于leetcode官網(wǎng)升級(jí)了登陸機(jī)制導(dǎo)致的。

但是leetcode只升級(jí)了國(guó)際版，對(duì)于國(guó)內(nèi)的版本還沒(méi)有升級(jí)，所以如果你使用的是國(guó)內(nèi)的leetcode賬號(hào)，那么我們只需要更換leetcode版本即可。更換的方式也很簡(jiǎn)單，點(diǎn)擊上方地球形狀的按鈕進(jìn)行選擇即可：

但是，我個(gè)人更推薦使用國(guó)際版，因?yàn)橛⑽牡念}目描述會(huì)更加清楚，并且題目的更新也會(huì)更加及時(shí)。況且以后說(shuō)不準(zhǔn)中文版的leetcode也會(huì)升級(jí)登陸機(jī)制，到時(shí)候還是會(huì)面臨無(wú)法登陸的問(wèn)題。

很遺憾的是，對(duì)于無(wú)法登陸這個(gè)問(wèn)題，官方很坦率地承認(rèn)了對(duì)于這個(gè)問(wèn)題沒(méi)有特別好的解決方法，只能使用cookie來(lái)繞開(kāi)。

cookie登陸

cookie在網(wǎng)站當(dāng)中經(jīng)常使用，我們可以簡(jiǎn)單地將它認(rèn)為是一個(gè)標(biāo)識(shí)身份的令牌或者說(shuō)證書。

我們都知道，現(xiàn)在的網(wǎng)站往往有自動(dòng)登錄機(jī)制。因?yàn)槲覀兠看蜷_(kāi)一次都要用戶輸入一次賬號(hào)密碼實(shí)在是太反人類了，并且有時(shí)候我們打開(kāi)多個(gè)相同網(wǎng)站中的不同站點(diǎn)，也會(huì)想要保持登錄的狀態(tài)，而不是再輸入賬號(hào)密碼。cookie正是基于整個(gè)目的誕生的。

cookie的原理也很簡(jiǎn)單，我們?cè)诘卿浘W(wǎng)站成功之后，網(wǎng)站的服務(wù)器會(huì)根據(jù)我們的賬號(hào)id或者是其他信息使用加密算法生成一串密文。并且將這串密文發(fā)送給瀏覽器，瀏覽器會(huì)將這串密文存儲(chǔ)起來(lái)，這樣下次瀏覽器在訪問(wèn)網(wǎng)站的時(shí)候，只需要攜帶上這串密文，網(wǎng)站拿到密文進(jìn)行解密之后就能識(shí)別出這是哪一個(gè)用戶，自動(dòng)設(shè)置成已經(jīng)登錄的狀態(tài)，并且返回對(duì)應(yīng)的數(shù)據(jù)。

因此cookie數(shù)據(jù)非常重要，它關(guān)乎我們?cè)S多賬號(hào)的安全。如果我們的cookie被黑客獲取，我們的賬號(hào)都會(huì)面臨被盜的風(fēng)險(xiǎn)。由于對(duì)稱加密算法幾乎不可攻破，所以目前許多針對(duì)瀏覽器賬戶的攻擊手段都和cookie有關(guān)。

我猜測(cè)登錄問(wèn)題出現(xiàn)的原因應(yīng)該是leetcode官方人為限制了第三方插件通過(guò)賬號(hào)密碼代理登錄，所以解決方法很簡(jiǎn)單，就是我們使用cookie來(lái)進(jìn)行模擬登錄。

前期準(zhǔn)備

由于leetcode插件底層是使用的leetcode-cli命令行工具，所以我們需要現(xiàn)在本地保證我們的命令行工具的版本正確。

首先，我們需要安裝Node.js 8以上的版本，關(guān)于Node.js的安裝方法網(wǎng)上隨便就能搜到，安裝也很簡(jiǎn)單，這里就不贅述了。

接著，我們通過(guò)npm工具安裝最新版本的leetcode-cli：

# to remove the old version
npm uninstall -g leetcode-cli
# to install the up-to-date version(2.6.17+)
npm install -g leetcode-tools/leetcode-cli

操作流程

首先，我們需要通過(guò)瀏覽器獲取我們賬號(hào)的cookie。下面以Google Chrome瀏覽器舉例。

我們先打開(kāi)leetcode用我們自己的賬號(hào)和密碼登錄，然后右擊選擇inspect：

接著選擇Network下的XHR：

然后我們點(diǎn)擊網(wǎng)站導(dǎo)航欄中的problems：

這時(shí)候右邊會(huì)顯示出前端網(wǎng)頁(yè)跳轉(zhuǎn)的請(qǐng)求信息，我們找到其中一個(gè)名叫all的請(qǐng)求，選擇Headers，往下拉就能找到cookie：

我們把這一串字符串復(fù)制下來(lái)。

重新打開(kāi)vscode，打開(kāi)leetcode插件，選擇sign in，這一次在選擇登錄方式的時(shí)候我們選擇使用cookie登錄：

然后輸入賬號(hào)，粘貼進(jìn)我們剛才復(fù)制下來(lái)的cookie即可。

順利的話，看到下圖紅框當(dāng)中的邊欄出現(xiàn)，就說(shuō)明我們已經(jīng)成功登錄了。

leetcode插件使用

leetcode的使用很簡(jiǎn)單，和網(wǎng)頁(yè)版差距不大，我們點(diǎn)開(kāi)all可以看到所有的問(wèn)題，我們點(diǎn)擊問(wèn)題的標(biāo)題會(huì)自動(dòng)為我們加載題目的詳細(xì)信息，已經(jīng)通過(guò)的問(wèn)題會(huì)打上綠色的勾。

我們要做題的話就右擊選擇Show Problem

之后會(huì)彈出語(yǔ)言讓我們選擇，我們就選擇我們最常用的語(yǔ)言就好。比如我最近用Python做題，就選擇Python3：

之后選擇Just Open The problem file

vscode會(huì)自動(dòng)為我們打開(kāi)一個(gè)分屏。我們就可以一邊看問(wèn)題一邊寫代碼了，不得不說(shuō)實(shí)在是非常方便。

leetcode配置

最后簡(jiǎn)單講一下leetcode插件的一些配置。

leetcode這個(gè)插件當(dāng)中的配置還蠻多的，但是我個(gè)人覺(jué)得最主要的是其中的兩個(gè)。一個(gè)是配置我們每個(gè)問(wèn)題代碼存放的文件路徑，方便以后我們找到這些寫好的代碼。

這個(gè)配置名字叫做leetcode.workspaceFolder，默認(rèn)的路徑是$HOME/.leetcode。這里的HOME是你系統(tǒng)的環(huán)境變量，不同的系統(tǒng)這個(gè)變量指定的位置不一樣。

我們可以打開(kāi)終端輸入echo $HOME


查看一下我們當(dāng)前的$HOME目錄指向哪里，當(dāng)然我們也可以自己修改這個(gè)配置。我們打開(kāi)vscode的配置文件，搜索leetcode.workspaceFolder，就可以找到vscode當(dāng)中的配置，我們修改我們想要的path即可。

另一個(gè)配置是編輯器的快捷方式，我們仔細(xì)觀察會(huì)發(fā)現(xiàn)我們打開(kāi)的leetcode py文件下面會(huì)有兩個(gè)按鈕。我這張圖里是三個(gè)，因?yàn)槲以O(shè)置過(guò)。

這些按鈕是可以點(diǎn)擊的，它們都有具體的功能。比如Submit是提交當(dāng)前的code到leetcode網(wǎng)站，幫我們提交代碼。Test是執(zhí)行樣例，看看樣例是否能夠通過(guò)。除了這兩個(gè)之外還有兩個(gè)，一個(gè)叫做Solution，可以查看當(dāng)前最高贊的代碼。另一個(gè)是Description，是顯示問(wèn)題描述。

我們可以在leetcode.editor.shortcuts配置當(dāng)中進(jìn)行修改：

總結(jié)

有了這個(gè)插件之后，我們就可以擺脫使用網(wǎng)頁(yè)端來(lái)進(jìn)行刷題了。不得不說(shuō)實(shí)在是非常方便，另外對(duì)于我們程序員來(lái)說(shuō)，我覺(jué)得leetcode當(dāng)中的許多問(wèn)題，我們是一定會(huì)遇到的。問(wèn)題僅僅是你遇到它的時(shí)候是在刷題還是面試。

到此這篇關(guān)于vscode中配置LeetCode插件，從此愉快地刷題的文章就介紹到這了,更多相關(guān)vscode中配置LeetCode插件，從此愉快地刷題 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論