vscode Plugin for LeetCode

The vscode plugin lets you practice LeetCode problems in vscode or Cursor. You can debug code line by line. You can also view this site's solution explanations, visualization panels, and the problem lists in Quick Mastery List and Beginner List for easy review:

This plugin is made by modifying these two open source vscode plugins:

https://github.com/LeetCode-OpenSource/vscode-leetcode

https://github.com/ccagml/leetcode-extension

Each of these plugins has its own strengths and weaknesses. I tried my best to combine their good features and added some useful new ones. Here is a simple introduction.

How to Install

In the vscode extension marketplace, search for "labuladong" and you will find the plugin. Click install:

If you can't find it, you can also install it from the vscode plugin store webpage:

https://marketplace.visualstudio.com/items?itemName=labuladong.leetcode-helper

Feature Demo

Problem Solving Helper

All the problem explanations on this site are built into the plugin. In the problem list, questions marked with ✨ have explanations. You can see a short idea or jump to the website for a full explanation:

All features of the site are also supported in the plugin, including image notes and algorithm visualization:

Switch Between Chinese and English

This plugin supports logging in and solving problems on both leetcode.cn (Chinese) and leetcode.com (English).

By default, the explanations, ideas, and visualization panels in the plugin are in Chinese. You can search for the setting keyword labuladongLanguage in the vscode settings page to switch to English.

Log in to LeetCode

Select a Login Platform

Click the plugin icon on the sidebar and then click the login icon. You will be guided to choose to log in to the Chinese LeetCode or the English LeetCode:

Log in Using a cURL Command

Follow the prompts to enter the cURL command for LeetCode login, and you can complete the login process.

Here is how to get the cURL command:

1️⃣ Open the official website https://leetcode.cn/problemset/ (international version at https://leetcode.com/problemset/) and ensure you are logged into your account on the webpage.

2️⃣ Open the browser developer tools (F12 for Chrome/Edge), then click the Network tab.

3️⃣ ~ 4️⃣ Refresh the page, select the first network request, right-click it, and choose Copy -> Copy as cURL. For Chrome on Windows, you may need to select Copy -> Copy as cURL (bash).

curl 'https://leetcode.cn/problemset/' \
  -H 'Cookie: ... ; csrftoken=xxx; LEETCODE_SESSION=xxx'; ... \
  -H 'Pragma: no-cache' \
  -H 'Sec-Fetch-Dest: document' \
...

Unlocking Site Solutions/Problem Lists (Optional)

If you have already subscribed, please follow these steps to unlock all solutions in the plugin.

Step 1: Install and Start the Plugin

Install the plugin as described above and log in with your LeetCode account. Make sure the plugin is working.

Note: After installing the plugin, a LeetCode icon will appear in the VSCode sidebar. Click this icon to load the plugin fully before you take the next steps. Otherwise, command execution may fail.

Step 2: Log in to labuladong.online

Press F1 in VSCode. A command window will appear. Enter the keyword labuladong. You will see the Login labuladong.online option:

Click this option. A box will pop up for you to enter text. Copy the cookie field below and paste it into the box:

Press Enter. After a few seconds, you should see a message saying the subscription data was fetched successfully:

Now you can view all the solutions and problem lists from this site in VSCode.

Local Debugging of Algorithm Code (Optional)

Note

This part is optional, mainly for readers who want to run and debug code with breakpoints on their own computer:

If you do not set this up, the experience is the same as solving problems on the LeetCode website. The code will be submitted to the LeetCode API for testing and judging (you might see type errors in VSCode, but they do not affect submission and can be ignored):

The local debugging feature depends on your own development environment, it is not related to the plugin. If you still see errors after following this guide, please check the error message to fix the problem.

The code for each problem is actually a normal code file, so in theory you can debug and run it locally. But there are a few issues:

1. LeetCode has some built-in types, such as ListNode and TreeNode. Also, test cases for the problems are given as arrays. You need to implement these structures yourself and convert the input data.

2. You need to do some extra setup for different programming languages, so that your code editor can recognize the project structure. Otherwise, you might not be able to run the code locally or use auto-complete.

To solve these problems, I created a solution. If you follow the steps below, you can run LeetCode problems locally. Currently, Java, C++, Python, Golang, and JavaScript are supported.

Step 1: Clone the Code Template

I have uploaded the configured template project to Github. You can clone it to your computer:

git clone https://github.com/labuladong/lc-plugin-template.git

# If you are in Mainland China, you can download from Gitee:
git clone https://gitee.com/labuladong/lc-plugin-template.git

If you find any problems or have ideas for improvement while using it, feel free to submit a PR or Issue.

Step 2: Set the Code File Path

Search for the keyword labuladong file path in the VSCode settings page. Click Edit in settings.json, and set it like this:

"labuladong-leetcode.filePath": {
    "python": {
        "folder": "leetcode/editor/${endpointType}",
        "filename": "${kebab-case-name}.${ext}"
    },
    "python3": {
        "folder": "leetcode/editor/${endpointType}",
        "filename": "${kebab-case-name}.${ext}"
    },
    "javascript": {
        "folder": "leetcode/editor/${endpointType}",
        "filename": "${kebab-case-name}.${ext}"
    },
    "cpp": {
        "folder": "leetcode/editor/${endpointType}",
        "filename": "${kebab-case-name}.${ext}"
    },
    "golang": {
        "folder": "leetcode/editor/${endpointType}",
        "filename": "${snake_case_name}_test.${ext}"
    },
    "java": {
        "folder": "src/main/java/leetcode/editor/${endpointType}",
        "filename": "${PascalCaseName}.${ext}"
    },
    "default": {
        "folder": "",
        "filename": "${id}.${kebab-case-name}.${ext}"
    }
},

Step 3: Configure the workspace folder for Programming Language

Search for the keyword labuladong language in the settings page of vscode to configure the programming language you use for practice.

Search for the keyword labuladong workspace folder in the settings page of vscode and configure the working directory according to the programming language you use:

/<your>/<path>/<to>/lc-plugin-template/<your-language>-template/

Here, /<your>/<path>/<to>/ is the path where lc-plugin-template is cloned locally; the value of <your-language>-template depends on the programming language you set for practice:

• For Java, configure java-template
• For C++, configure cpp-template
• For Python, configure python-template
• For Golang, configure go-template
• For JavaScript, configure js-template

C:\<your>\<path>\<to>\lc-plugin-template\<your-language>-template\

Step 3: Configure Code Templates

In the settings page of VS Code, search for the keyword labuladong custom code template to configure code templates. Once configured, you can locally debug algorithm code.

The configuration I provide only imports the basic standard library. If you wish to import other libraries or have more customized needs, you can modify the code template yourself.

Below is an introduction for different languages.

Java Configuration Method

The configuration for Java code templates is as follows:

package leetcode.editor.${question.endpointType};

import java.util.*;
import leetcode.editor.common.*;

public class $!velocityTool.camelCaseName(${question.titleSlug}) {

${question.codeWithIndent(4)}
    
    public static void main(String[] args) {
#set($className = $!velocityTool.camelCaseName(${question.titleSlug}))
        Solution solution = new ${className}().new Solution();
        // put your test code here
        
    }
}

After configuration is complete, open the LeetCode problem to write algorithm code, set breakpoints, and write test cases in the main function. Finally, click the Debug button above the main function to debug the code line by line:

If the Debug button does not appear above your main function, it might be because the Extension Pack for Java is not installed. Please install it and try again.

Python Configuration Method

The configuration for Python code templates is as follows:

import sys
import os

sys.path.append(os.path.join(os.path.dirname(__file__), '..'))

from typing import *
from common.node import *

${question.code}

if __name__ == '__main__':
    solution = Solution()
    \# your test code here

After configuration, open the LeetCode problem to write algorithm code, set breakpoints, and prepare test inputs. Note the run icon at the top right of the file; there is a Debug Python File option in the dropdown. Click it to debug the code step by step:

If you cannot see the Debug Python File option, it may be because the Python Debugger plugin is not installed. Please install it and try again.

C++ Configuration Method

The code template configuration for C++ is as follows:

\#include <iostream>
\#include <vector>
\#include <string>
\#include "../common/ListNode.cpp"
\#include "../common/TreeNode.cpp"

using namespace std;

${question.code}

int main() {
    Solution solution;
    // your test code here
}

After configuration is complete, open the LeetCode problem to write algorithm code, set breakpoints, and prepare your test inputs. Note that there is a CMake icon in the sidebar, click it and select the build target corresponding to the problem file, then right-click and select Debug to debug the code line by line:

If you do not see the Debug icon, it may be because the C/C++ Extension Pack plugin is not installed. Please install it and try again.

The C++ project environment configuration can be quite cumbersome. If there is an error running the code, please check:

1. Your C++ environment should at least be C++ 17 standard, as outdated environments may lack some standard library types, such as nullopt.

2. Ensure that your compiler is loading the CMakeLists.txt file from the cpp-template folder, as loading the wrong file will prevent the code from running.

Golang Configuration Method

A Golang package cannot have multiple runnable main functions, but we can use the Golang test file mechanism to bypass this limitation.

The Golang code template configuration is as follows:

package leetcode_solutions

import "testing"


${question.code}

#set($className = $!velocityTool.camelCaseName(${question.titleSlug}))
func Test${className}(t *testing.T) {
	// your test code here
	
}

After configuration, open a LeetCode problem to write algorithm code, set breakpoints, and prepare test inputs. You will see a debug test button above the TestXXX function. Click it to debug the code line by line:

If you do not see the debug test button, it may be because the Go for Visual Studio Code plugin is not installed. Please install it and try again.

JavaScript Configuration Method

The JavaScript code template configuration is as follows:

import {ListNode} from "../common/listNode.js";
import {TreeNode} from "../common/treeNode.js";

${question.code}

// your test code here

After setting up, open a LeetCode problem in VS Code, write your algorithm, set breakpoints, and prepare the test input. There is a Run and Debug button in the sidebar. Click it to debug the code step by step:

Plugin Settings

In VS Code settings, search for labuladong to see all related plugin options. You can change them as you need.

Common settings:

• Search for labuladong default language to set your preferred programming language.
• Search for labuladong show locked to show or hide LeetCode Plus problems.

How to Update

By default, VS Code will automatically check for and update the plugin.

Changelog

See details in the vscode plugin changelog.

FAQ

Error command xxx not found?

This means the plugin hasn’t loaded yet. Click the LeetCode icon in the VS Code sidebar to start and load the plugin.

Can’t login to LeetCode?

Make sure you followed the cURL login steps above, chose the correct platform, and have already logged in to your LeetCode account on the website.

If it keeps showing login... and never says you’ve logged in, it’s probably a network problem. Try turning off all network proxies or switch your network.

No ✨ marks or solution/thoughts button?

If you don’t see the solution/thoughts button, it may be because the plugin failed to fetch data. You can fetch data manually:

1. Press F1 to bring up the VS Code plugin command box.
2. Type labuladong to find the Refresh labuladong.onlin data command.
3. Click this command to fetch data manually. After it’s done, you should see ✨ marks and the solution/thoughts button for problems.

If there is no popup or data fetch is slow, try turning off network proxies or change network.

No response after refreshing data manually?

This is usually a network problem. Try disabling network proxies or use a different network.

How to set code file name and path?

The plugin lets you set code file naming rules for each programming language.

In VS Code settings, search for labuladong-leetcode filepath. Click Edit in setting.json to write your config in the settings.json file.

For example, to set the file naming rule for python3:

"labuladong-leetcode.filePath": {
    "python3": {
        "filename": "${id}.${cn_name}.${ext}"
    },

    // ...
}

You can use the following variables:

Bug Report

Create an issue on GitHub:

https://github.com/labuladong/fucking-algorithm/issues/