大家好，今早在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當中的許多問題，我們是一定會遇到的。問題僅僅是你遇到它的時候是在刷題還是面試。

今天是週末，祝願大家刷題愉快，點個關注再走吧。