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.

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:

  1. Open the browser and navigate to leetcode.com

  2. Right-click on the page and select “Inspect”

  3. In the developer tools, go to the Network tab and then choose XHR

  4. Click on any link on the leetcode.com page

  5. Select any of the HTTP calls in the Network tab

  6. Find the Cookie attribute in the Request Headers

  7. Copy the Cookie value (excluding the “Cookie: “ string)

  8. Run the LeetCode: Sign In command in VS Code

  9. Select the LeetCode Cookie option

  10. Enter 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.

  1. Clone the Github repo locally. I cloned mine to /Users/epicness/gitHub/leetcode.

  2. 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!