Solving LeetCode problems in VS Code.
I’m planning to use LeetCode to learn more about data structures and algorithms in 2023. LeetCode is a great resource because it has a ton of problems and a good community around it.
The downside is that the default way to solve problems is to edit code on the LeetCode website. I’m used to having IDEs with auto-completion, vim emulation, bracket colouring, and more. I don’t want to downgrade my coding experience just to work on LeetCode problems.
Fortunately, there is a great plug-in for VS Code that enables you to work on problems in the editor. My goals for setting up a workspace are:
Edit and submit in VS Code
No cutting and pasting between leetcode.com and VS Code
Save work on GitHub
The environment and tools I’m working with are:
macOS Big Sur
VS Code (Nov 2021 v1.63)
Firefox 95.0
LeetCode Extension
There is a great LeetCode extension to VS Code that does most of the heavy lifting for my setup. The requirements for the extension are:
I had VS Code installed, but not Node. The easiest way to install Node on macOS is to use Homebrew.
brew install node
The extension itself can be installed using the normal process for installing extensions in VS Code.
Now comes the tricky part. Run the LeetCode: Sign In
command to sign into LeetCode. However, signing in with the user and password doesn’t work.
Log in with the cookie
To log into your LeetCode account, you’ll need to use the LeetCode Cookie
option of the LeetCode: Sign In
command. There are a few resources to help figure out what to do here. The steps are:
Open the browser and navigate to leetcode.com
Right-click on the page and select “Inspect”
In the developer tools, go to the Network tab and then choose XHR
Click on any link on the leetcode.com page
Select any of the HTTP calls in the Network tab
Find the Cookie attribute in the Request Headers
Copy the Cookie value (excluding the “Cookie: “ string)
Run the
LeetCode: Sign In
command in VS CodeSelect the
LeetCode Cookie
optionEnter the username and paste the value of the Cookie attribute
` Cookie field in developer tab in Firefox
Set up GitHub
Create a new repo in Github to store your problem solutions. Now we need to configure the LeetCode extension to save into the git directory.
Clone the Github repo locally. I cloned mine to
/Users/epicness/gitHub/leetcode
.Update your VS Code
settings.json
file to specify this folder as a workspace. Unfortunately, the LeetCode extension doesn’t allow zero-padding of the problem id number so that files would sort correctly. There is an open issue on the problem, but it hasn’t been worked on for over a year.
3. Right-click on any problem in the LeetCode extension explorer and select “Show Problem”.
4. A problem file is created in your Github repo. Edit and commit this file with git like any other code file.
5. Use the LeetCode extension commands to test and submit your solution.
Wrap Up
This setup enables all of the tools of VS Code while working on LeetCode problems while avoiding the issue of cutting and pasting between the browser and the IDE. It provides a modern development experience and speeds up the process of solving LeetCode problems. Best of luck to you on your LeetCode journey!