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

簡介vscode

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

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

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

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

vscode的插件

vscode之所以強大很大的原因是因為擁抱開源，我們每個人都可以為它開發(fā)插件。也正是因為這點，vscode當(dāng)中有著非常非常多的插件，無論我們想得到的還是想不到的，可以說是應(yīng)有盡有。

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

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

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

換成C++也是一樣：

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

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

另外，需要注意的是大部分插件是安裝好了可以直接使用的，但是也有些插件是需要配置的，這需要我們在安裝和使用之前詳細閱讀文檔。

leetcode插件

熟悉了vscode的插件之后，我們開始進入本文的正題。和預(yù)料的一樣，我們在插件市場當(dāng)中搜索leetcode，然后安裝下載量最高的那個即可。

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

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

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

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

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

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

但是，我個人更推薦使用國際版，因為英文的題目描述會更加清楚，并且題目的更新也會更加及時。況且以后說不準(zhǔn)中文版的leetcode也會升級登陸機制，到時候還是會面臨無法登陸的問題。

很遺憾的是，對于無法登陸這個問題，官方很坦率地承認了對于這個問題沒有特別好的解決方法，只能使用cookie來繞開。

cookie登陸

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

我們都知道，現(xiàn)在的網(wǎng)站往往有自動登錄機制。因為我們每打開一次都要用戶輸入一次賬號密碼實在是太反人類了，并且有時候我們打開多個相同網(wǎng)站中的不同站點，也會想要保持登錄的狀態(tài)，而不是再輸入賬號密碼。cookie正是基于整個目的誕生的。

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

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

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

前期準(zhǔn)備

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

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

接著，我們通過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

操作流程

首先，我們需要通過瀏覽器獲取我們賬號的cookie。下面以Google Chrome瀏覽器舉例。

我們先打開leetcode用我們自己的賬號和密碼登錄，然后右擊選擇inspect：

接著選擇Network下的XHR：

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

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

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

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

然后輸入賬號，粘貼進我們剛才復(fù)制下來的cookie即可。

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

leetcode插件使用

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

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

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

之后選擇Just Open The problem file

vscode會自動為我們打開一個分屏。我們就可以一邊看問題一邊寫代碼了，不得不說實在是非常方便。

leetcode配置

最后簡單講一下leetcode插件的一些配置。

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

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

我們可以打開終端輸入echo $HOME


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

另一個配置是編輯器的快捷方式，我們仔細觀察會發(fā)現(xiàn)我們打開的leetcode py文件下面會有兩個按鈕。我這張圖里是三個，因為我設(shè)置過。

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

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

總結(jié)

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

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

最新評論