vscode Plugin for LeetCode

The VSCode plugin allows users to solve LeetCode problems directly within the VSCode editor while also accessing my solution explanations:

Usage Instructions

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 strengths and weaknesses. I have combined their advantages to create a more robust tool and added some useful features. Here's a brief introduction.

Logging into LeetCode

Click the plugin icon in the sidebar, then click the login icon. You will be guided to choose between the Chinese or English version of LeetCode:

Next, follow the instructions to input the cURL command from LeetCode, and you will be logged in.

1️⃣ Visit the official site https://leetcode.cn/problemset/ (or https://leetcode.com/problemset/ for the international version) and ensure you are logged in.

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

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

Custom Code Templates

A practical feature is the ability to configure code templates, allowing you to easily compile and debug code locally:

Solution/Thought Process for Problem Solving

Another important feature is the convenience for readers to view my thought process and detailed solutions. Problems marked with a ✨ in the list are the ones I have explained. By clicking on them, you can access my solutions or thought process:

You can write code while reviewing my thought process explanations:

I continuously practice algorithm problems and summarize solution strategies, so the number of problems marked with a ✨ in the plugin will increase, and all associated plugins will be updated in sync.

Code Image Annotations

In "labuladong Thoughts," the code supports direct copying, and the lightbulb icon in the code will pop up images to help understand the code logic:

Algorithm Visualization Panel

When "labuladong Thoughts" is expanded, an interactive algorithm visualization panel will appear below the solution code to assist in understanding the execution process of algorithms:

For specific functions of the visualization panel, please refer to Introduction to Algorithm Visualization Panel.

Switching to English for International Users

The default language for solution/thought process/visualization panel content in the plugin is Chinese. International users who wish to switch to English can search for the configuration keyword labuladongLanguage in the vscode settings page and change it from Chinese to English.

Installation Method

The Microsoft plugin store is accessible in China. You can search for the keyword "labuladong" in the vscode extension store to find the plugin. Click install:

If you cannot find it, you can install it from the vscode extension store webpage:

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

Plugin Configuration

In the vscode settings page, search for the keyword labuladong to see all the configurations related to the plugin. You can modify them according to your needs.

Update Method

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

Update Log

See vscode Plugin Update Log for details.

Unlock Site Exercise Explanations in the Plugin

All the problems in the exercise sections of the site can also be accessed through the plugin. However, you need to purchase a site subscription and manually refresh the data to unlock the corresponding problem explanations/thoughts/visualizations. For specific operations, refer to the bottom of the Subscription Page.

Common Issue Solutions

No ✨ Mark and Explanation/Thoughts Button?

If the explanation/thoughts button is missing, it is likely due to a failure in data retrieval by the plugin. You can manually trigger data retrieval with the following steps:

1. Press the shortcut key F1 to open the vscode plugin command input box.

2. Enter labuladong in the input box, and you will find a command Refresh labuladong.online data.

3. Click on this command to manually trigger data retrieval. Once completed, the problem list should display a ✨ mark, and the corresponding problem will have an explanation/thoughts button.

Setting Code File Names and Paths?

The plugin supports setting storage names for code files according to different programming languages.

In the vscode settings page, search for the configuration keyword labuladong-leetcode filepath. You will see an option Edit in setting.json. Click it to write your desired configuration into the settings.json file.

For instance, 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 Reports

You can create an issue on GitHub to report problems:

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