vscode Plugin for LeetCode

The vscode plugin allows you to practice LeetCode problems directly in the vscode editor, with support for line-by-line debugging. You can directly view explanations and visualizations from this site, and it also integrates the Quick Mastery Directory and Beginner Directory problem lists for easy review:

This plugin is 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 advantages and disadvantages. I have tried to combine their strengths and added some useful extra features. Here is a brief introduction.

Installation

Search for the keyword "labuladong" in the vscode plugin marketplace to find the plugin, then click install:

If you can't find it, you can install it from the vscode marketplace website:

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

Feature Showcase

Practice Assistance

All exercise explanations on this site are integrated into the plugin. Problems marked with a ✨ in the list have been explained on this site. You can view a brief solution or click through to the website for a detailed explanation:

All features available on the website are fully supported in the plugin, including image annotations and algorithm visualization:

Switch Between Chinese and English

The plugin supports logging in to both the Chinese version leetcode.cn and the English version leetcode.com for practicing problems.

By default, the explanation/solution/visualization panels in the plugin are displayed 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 Solution Ideas/Problem Lists on This Site (Optional)

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

Step 1: Install and Start the Plugin

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

Note: After installing the plugin, you will see a LeetCode icon on the left sidebar. Click this icon first to let the plugin finish loading before proceeding. Otherwise, you may encounter command execution failures.

Step 2: Get the Site Cookie

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

Step 3: Enter the Cookie in VS Code

Go to the settings page in VS Code, search for the keyword sitecookie, and paste the copied cookie string into the input box:

Step 4: Manually Refresh Data

In VS Code, press the F1 key to open the command palette, and enter the keyword labuladong. You will see an option called Refresh labuladong.online data manually:

Click or press Enter to refresh. After a few seconds, a notification should confirm that the site subscription data was successfully retrieved:

Now, you can view all solution ideas and problem lists from this site directly in VS Code.

Local Debugging of Algorithm Code (Optional)

The code for each problem is essentially a regular code file that can, in theory, be run and debugged locally. However, there are a few issues:

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

2. You need to configure your code editor for the specific programming language so it recognizes the project structure correctly. Otherwise, you may not be able to run 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 run LeetCode problem code locally. Currently, Java, C++, Python, Golang, and JavaScript are supported.

Step 1: Clone the Code Template

I have uploaded a configured project template to Github, which you can clone locally:

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

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

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

Step 2: Configure the Code File Path

In the VS Code settings, search for the keyword labuladong file path, and click Edit in settings.json. Please 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:

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/