vscode Plugin for LeetCode

The VSCode plugin allows users to solve LeetCode problems within the VSCode editor. You can directly access the site's explanations, visualization panels, and it also integrates problem sets from the Quick Mastery Directory and Beginner's Directory for easy review:

Installation Method

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

If it doesn't appear, you can install it from the VSCode plugin store webpage:

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

This plugin is modified 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, which are briefly introduced below.

Usage Method

Logging into LeetCode

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

Next, follow the prompts to enter the cURL command for LeetCode to complete the login.

1️⃣ Open the official website https://leetcode.cn/problemset/ (or https://leetcode.com/problemset/) and ensure you are logged in.

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

3️⃣ ~ 4️⃣ Refresh the page, select the first network request, right-click and choose Copy -> Copy as cURL. For Windows Chrome, you may need to click 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.

Plugin Configuration

Search for the keyword labuladong in the settings page of vscode to view all plugin-related configurations and modify them according to your needs.

Update Method

By default, vscode will automatically detect and update plugins.

Update Log

See vscode Plugin Update Log for details.

Unlocking Site Content and Problem Sets in the Plugin

You can learn the site's problem list and exercise ideas in the plugin, but you need to purchase a site subscription and manually refresh the data as described in the Subscription Purchase Page.

Common Problem Solutions

Missing ✨ Mark and Solution/Idea Button?

If the solution/idea button is missing, it is likely because the plugin data failed to load. You can manually trigger data loading by following these steps:

1. Press the shortcut key F1, which will bring up the vscode plugin command input box.

2. Enter labuladong in the input box to find the command Refresh labuladong.onlin data.

3. Click this command to manually trigger data loading. Once completed, the problem list should show the ✨ mark, and the corresponding solution/idea button will appear.

Setting Code File Names and Paths?

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

Search for the configuration keyword labuladong-leetcode filepath in the vscode settings page, and you will find an Edit in setting.json option. Click it to write your desired 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 include:

Bug Feedback

You can create an issue on GitHub to report problems:

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