在vscode中配置LeetCode插件,從此愉快地刷題
- 2020 年 3 月 29 日
- 筆記
大家好,今早在B站看到up主的vscode里藏了leetcode插件,這才知道原來還有這款神器。但是沒想到在用的時候遇到了一些麻煩,花了一點時間才解決。所以寫這篇文章除了給大家安利這個好用的插件之外,也是為了幫助更多的同學避免踩坑。
簡介vscode
vscode在工業界鼎鼎大名,被譽為微軟少有的拿得出手的精品(逃)。原本是不想過多贅述的,但是鑒於許多粉絲還是正在上學的萌新,所以花點筆墨簡單介紹一下。

vscode是微軟開發的編輯器,嚴格說起來它並不是一個IDE,只是一個編輯器。但是由於它支持嵌入各大語言的編譯器,並且對於terminal的支持也非常出色,所以已經近乎於一個支持眾多語言,擁有許多特性的IDE了。根據2019年stackflow最新的調研,vscode已經成為最受開發者歡迎的開發環境了。在當下的互聯網公司當中,可以說是無論前後端或者是其他的開發崗位都有大量的工程師使用它。它免費輕量級、跨平台、並且有着大量好用的插件作為支持。
所以不論你用的是Windows,linux還是Mac,都可以非常方便地使用它。
強調一下,vscode支持各大語言,基本上我們能想到的,我們聽說過的沒有聽說過的,它都支持。我剛才特意去看了一下,連上古語言Pascal都支持,所以裝就完事了。對學生黨多說一句,不要聽什麼老師或者是某本教材的忽悠,去裝什麼visual studio或者是dev C++了,已經過時了。
vscode的插件
vscode之所以強大很大的原因是因為擁抱開源,我們每個人都可以為它開發插件。也正是因為這點,vscode當中有着非常非常多的插件,無論我們想得到的還是想不到的,可以說是應有盡有。
我們點擊左側邊欄的extensions打開插件市場,我們可以當中進行搜索。

比如你想要寫Python,那麼我們就輸入Python,排名第一的就是Python的解釋器:

並且右側還會有詳細的說明和介紹文檔,介紹這款插件的使用方法或者是配置方法,以及我們可以自己根據需要設置的配置。
換成C++也是一樣:

這些說明其實對應github倉庫當中的一個repo,所以當我們點擊其中的一些鏈接會跳轉到github當中。另外,如果我們自己開發了相應的插件,同樣也可以註冊到vscode當中來,給其他人使用。
這也是開源精神所在,即使微軟家大業大,僅僅靠它一家公司的努力,是不可能同時支持和維護這麼多功能和插件的。
另外,需要注意的是大部分插件是安裝好了可以直接使用的,但是也有些插件是需要配置的,這需要我們在安裝和使用之前詳細閱讀文檔。
leetcode插件
熟悉了vscode的插件之後,我們開始進入本文的正題。和預料的一樣,我們在插件市場當中搜索leetcode,然後安裝下載量最高的那個即可。

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

但是你會發現登陸失敗了。
怎麼回事,為什麼失敗了,難道是記錯密碼了嗎?
於是你打開leetcode的網站又嘗試了一下,發現密碼沒有記錯,網頁可以登陸。
我們打開官網,會發現官方已經知道登陸失敗的問題了,這是由於leetcode官網升級了登陸機制導致的。

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

但是,我個人更推薦使用國際版,因為英文的題目描述會更加清楚,並且題目的更新也會更加及時。況且以後說不準中文版的leetcode也會升級登陸機制,到時候還是會面臨無法登陸的問題。
很遺憾的是,對於無法登陸這個問題,官方很坦率地承認了對於這個問題沒有特別好的解決方法,只能使用cookie來繞開。
cookie登陸
cookie在網站當中經常使用,我們可以簡單地將它認為是一個標識身份的令牌或者說證書。
我們都知道,現在的網站往往有自動登錄機制。因為我們每打開一次都要用戶輸入一次賬號密碼實在是太反人類了,並且有時候我們打開多個相同網站中的不同站點,也會想要保持登錄的狀態,而不是再輸入賬號密碼。cookie正是基於整個目的誕生的。
cookie的原理也很簡單,我們在登錄網站成功之後,網站的服務器會根據我們的賬號id或者是其他信息使用加密算法生成一串密文。並且將這串密文發送給瀏覽器,瀏覽器會將這串密文存儲起來,這樣下次瀏覽器在訪問網站的時候,只需要攜帶上這串密文,網站拿到密文進行解密之後就能識別出這是哪一個用戶,自動設置成已經登錄的狀態,並且返回對應的數據。
因此cookie數據非常重要,它關乎我們許多賬號的安全。如果我們的cookie被黑客獲取,我們的賬號都會面臨被盜的風險。由於對稱加密算法幾乎不可攻破,所以目前許多針對瀏覽器賬戶的攻擊手段都和cookie有關。
我猜測登錄問題出現的原因應該是leetcode官方人為限制了第三方插件通過賬號密碼代理登錄,所以解決方法很簡單,就是我們使用cookie來進行模擬登錄。
前期準備
由於leetcode插件底層是使用的leetcode-cli命令行工具,所以我們需要現在本地保證我們的命令行工具的版本正確。
首先,我們需要安裝Node.js 8以上的版本,關於Node.js的安裝方法網上隨便就能搜到,安裝也很簡單,這裡就不贅述了。
接着,我們通過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:

然後我們點擊網站導航欄中的problems:

這時候右邊會顯示出前端網頁跳轉的請求信息,我們找到其中一個名叫all的請求,選擇Headers,往下拉就能找到cookie:

我們把這一串字符串複製下來。
重新打開vscode,打開leetcode插件,選擇sign in,這一次在選擇登錄方式的時候我們選擇使用cookie登錄:

然後輸入賬號,粘貼進我們剛才複製下來的cookie即可。
順利的話,看到下圖紅框當中的邊欄出現,就說明我們已經成功登錄了。

leetcode插件使用
leetcode的使用很簡單,和網頁版差距不大,我們點開all可以看到所有的問題,我們點擊問題的標題會自動為我們加載題目的詳細信息,已經通過的問題會打上綠色的勾。

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

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

之後選擇Just Open The problem file

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

leetcode配置
最後簡單講一下leetcode插件的一些配置。
leetcode這個插件當中的配置還蠻多的,但是我個人覺得最主要的是其中的兩個。一個是配置我們每個問題代碼存放的文件路徑,方便以後我們找到這些寫好的代碼。
這個配置名字叫做leetcode.workspaceFolder,默認的路徑是$HOME/.leetcode。這裡的HOME是你系統的環境變量,不同的系統這個變量指定的位置不一樣。
我們可以打開終端輸入
echo $HOME
查看一下我們當前的$HOME目錄指向哪裡,當然我們也可以自己修改這個配置。我們打開vscode的配置文件,搜索leetcode.workspaceFolder,就可以找到vscode當中的配置,我們修改我們想要的path即可。

另一個配置是編輯器的快捷方式,我們仔細觀察會發現我們打開的leetcode py文件下面會有兩個按鈕。我這張圖裡是三個,因為我設置過。

這些按鈕是可以點擊的,它們都有具體的功能。比如Submit是提交當前的code到leetcode網站,幫我們提交代碼。Test是執行樣例,看看樣例是否能夠通過。除了這兩個之外還有兩個,一個叫做Solution,可以查看當前最高贊的代碼。另一個是Description,是顯示問題描述。
我們可以在leetcode.editor.shortcuts配置當中進行修改:

總結
有了這個插件之後,我們就可以擺脫使用網頁端來進行刷題了。不得不說實在是非常方便,另外對於我們程序員來說,我覺得leetcode當中的許多問題,我們是一定會遇到的。問題僅僅是你遇到它的時候是在刷題還是面試。
今天是周末,祝願大家刷題愉快,點個關注再走吧。