vscode Plugin for LeetCode

The VSCode plugin allows users to practice LeetCode problems within the VSCode editor, supporting step-by-step code debugging. It provides direct access to the site's solution explanations and visualization panels. Additionally, it integrates the Quick Mastery Directory and Beginner Directory problem lists for easy review:

This plugin is a modification based on the following 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 have tried to combine their advantages and added some useful features. Below is a brief introduction.

Installation Method

The Microsoft plugin store is accessible in China. Simply search for the keyword "labuladong" in the VSCode plugin store to find the plugin and click to install:

If it's not found, you can install it from the VSCode plugin store webpage:

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

Feature Display

Auxiliary Thought Explanation

The problem explanations on our site are integrated into the plugin. Problems marked with ✨ in the list are those explained by us. You can view a brief idea by opening it or visit the website for detailed explanations:

Algorithm Visualization

All features of our site are also supported by the plugin, including image annotations and algorithm visualization:

Switching to English for International Users

The plugin's problem solutions/thoughts/visualization panels are in Chinese by default. International users can switch to English by searching for the configuration keyword labuladongLanguage in the vscode settings page and changing it from Chinese 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' \
...

Local Debugging of Algorithm Code

The algorithm code for each problem is essentially an ordinary code file and can theoretically be debugged and run locally. However, there are several issues:

1. LeetCode has some built-in types, such as ListNode and TreeNode, and the test case inputs are in the form of arrays. You need to implement these structures yourself and convert the input data accordingly.

2. Additional configuration specific to different programming languages is needed to allow the code editor to correctly recognize the project structure. Otherwise, you may encounter issues such as being unable to run the code locally or use auto-completion.

To address these issues, I have developed a solution. By following the steps below to configure the plugin, you can directly run LeetCode problem code locally. Currently, it supports Java/C++/Python/Golang/JavaScript.

Step 1: Clone the Code Template

I have hosted the configured project template on a GitHub repository, which can be cloned locally:

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

# Readers in mainland China can download from Gitee:
git clone https://gitee.com/labuladong/lc-plugin-template.git

If you encounter issues or have suggestions for improvements while using it, feel free to submit a PR or Issue.

Step 2: Configure the Code File Path

In the VSCode settings page, search for the keyword labuladong file path, click Edit in settings.json, and configure it as follows:

"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 the configuration is complete, open the LeetCode problem to write your algorithm code, set breakpoints, and prepare the test input. There is a Run and Debug button on the sidebar, clicking it will allow you to debug the code step by step:

Unlocking Ideas/Problem Sets on This Site

All users can freely use the plugin's problem-solving features and access some problem-solving ideas on this site. Only by purchasing the site subscription can you unlock all problem-solving ideas, algorithm visualization panels, and problem sets in the plugin.

If you have already purchased the site subscription, follow the steps below to unlock all problem-solving ideas and thoughts in the plugin.

Step 1: Install and Launch the Plugin

Follow the instructions above to install the plugin and log into your LeetCode account, ensuring the basic functionality of the plugin is working correctly.

Note that after installing the plugin, a LeetCode icon will appear in the left sidebar. You need to click this icon to load the plugin before proceeding with the following steps. Otherwise, command execution might fail.

Step 2: Obtain the Site Cookie

Click the copy button below to get the cookie needed for logging into the plugin:

Step 3: Enter the Cookie in VSCode

Go to VSCode's settings page, search for the keyword sitecookie, and paste the cookie string you copied earlier into the input box:

Step 4: Manually Refresh Data

Press F1 in VSCode, and a command prompt will appear. Type the keyword labuladong to see the option Refresh labuladong.online data manually:

Click or press Enter to execute the refresh operation. After a few seconds, a popup should appear indicating that the site subscription data has been successfully retrieved:

You can now view all problem-solving ideas and problem sets on this site within VSCode.

Plugin Configuration

Search for the keyword labuladong in the settings page of VSCode to see all the configurations related to the plugin, which you can modify according to your needs.

Common configurations:

• Enter the keyword labuladong default language to set the programming language for problem solving.
• Enter the keyword labuladong show locked to configure whether to display the LeetCode plus problems.

Update Method

By default, VSCode will automatically detect and update the plugin.

Changelog

See VSCode Plugin Changelog.

Common Issue Solutions

Error command xxx not found?

This error indicates that the plugin hasn't loaded yet. Please click the LeetCode icon in the VSCode sidebar to start and load the plugin.

Unable to Log into LeetCode?

Ensure you have copied the cURL for login as per the above method; ensure you have selected the correct login platform; ensure you are already logged into the LeetCode account on the web.

If it displays login... and doesn't show a successful login, it is likely a network issue. Try closing all network proxies or changing networks.

No ✨ Mark and Solution/Idea Button?

If you don't see the solution/idea button, it is likely because the plugin data failed to load. You can manually trigger data loading as follows:

1. Press the shortcut key F1 to open the VSCode plugin command input box.
2. Enter labuladong in the input box to find a Refresh labuladong.onlin data command.
3. Click this command to manually trigger data loading. Once completed, the problem list should display the ✨ mark, and the corresponding solution/idea button will appear.

If no window pops up after the operation, or data loading is slow, try closing all network proxies or changing networks.

No Response to Manual Data Refresh?

This is usually a network issue. Try closing all network proxies or changing networks.

Setting the Name and Path of Code Files?

The plugin supports setting the storage name of code files according to different programming languages.

Search the configuration keyword labuladong-leetcode filepath in the VSCode settings page to see an Edit in setting.json option. Click it to write your required configuration into the settings.json file.

For example, you can set the naming convention for Python3 code files as follows:

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

    // ...
}

Available variables are:

Bug Report

You can create an issue on GitHub to report problems:

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