配套 vscode 刷题插件

labuladong原创配套学习工具约 722 字

The vscode plugin allows you to practice LeetCode/LiKou problems directly in the vscode editor, while also viewing my thought process explanations:

Video Introduction

Recently, I recorded a video introducing the main features of the vscode plugin. Readers who prefer videos can watch it on Bilibili:

Usage

Basic Features

This plugin is based on the open-source LeetCode official plugin that I have modified:

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

Therefore, it includes all the features of the official plugin, such as logging into your LeetCode/LiKou account, searching for problems, testing, and submitting code. The issue with the official plugin is that it works well with the English version of LeetCode but has limited support for the Chinese LiKou, and it hasn't been maintained for a long time, leading to login errors.

I have fixed all these bugs and added some useful features, which I will briefly introduce below.

Logging into LiKou/LeetCode Account

Click the plugin icon in the sidebar, then click the login icon, which will guide you to choose between logging into the Chinese LiKou or the English LeetCode:

Follow the prompts thereafter. I recommend using the cookie login method. Here’s how to obtain the cookie for the Chinese LiKou:

1️⃣ ~ 2️⃣ Open the Chinese LiKou website https://leetcode.cn and ensure you are logged into your account.

3️⃣ Open the developer tools (Chrome: press F12) and click the Network tab.

4️⃣ ~ 6️⃣ Refresh the page, click the first request, and view the Headers of that request. You will find a Cookie field.

7️⃣ Select the entire cookie string and copy it by right-clicking.

The method to obtain the cookie for the English LeetCode is similar. Just open the English LeetCode website https://leetcode.com and repeat the above steps. I won't elaborate further here.

Custom Code Templates

Firstly, a practical feature is the ability to configure code templates. This allows you to easily compile and debug code locally:

Solution/Idea Assistance for Problem Solving

Another important feature is the convenience for readers to view my problem-solving ideas and detailed solutions. All problems marked with ✨ in the problem list have been explained by me. You can open them to see my solutions or ideas:

You can write code while referring to my idea explanations:

I consistently practice solving algorithm problems and summarize solving patterns, so the number of problems marked with ✨ in the plugin will continue to increase, and all related plugins will be updated accordingly.

Code Image Annotations

The code in "labuladong's Ideas" supports direct copying, and the light bulb icons in the code will pop up images to help understand the code logic:

Algorithm Visualization Panel

When "labuladong's Ideas" is expanded, an interactive algorithm visualization panel will appear below the solution code, helping to understand the execution process of the algorithm:

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

Here's a short GIF to see how useful this plugin is:

Installation Method

The Microsoft Plugin Store is accessible in China. You can directly search for the keyword "labuladong" in the vscode plugin store to find the plugin, and click to install it:

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

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

注意

If you have already installed the official LeetCode plugin, you need to uninstall it first. This plugin is based on the official plugin and rewritten. If both are enabled at the same time, conflicts may occur due to shared configurations. Rest assured, my plugin's functionality is a superset of the official plugin, so uninstalling the original plugin will not affect your previous plugin configurations and code files.