The tutorial of configuring leetcode plug-in in vscode


Hello everyone, I saw up master’s vscode hidden in station B this morningleetcodePlug in, this only know that there is this artifact. But I didn’t expect to encounter some troubles when I used it. It took a little time to solve them. So in addition to giving you Amway this easy-to-use plug-in, this article is also written to help more students avoid stepping on the pit.

Introduction to vscode

Vscode is well-known in the industry and is known asRare products of Microsoft. Originally, I didn’t want to repeat it, but in view of the fact that many fans are still in school, I’d like to give a brief introduction.

Vscode was developed by Microsofteditor Strictly speaking, it’s not an IDE, it’s just an editor. However, because it supports compilers embedded in major languages, and its support for terminal is excellent, it is close to an IDE that supports many languages and has many features. According to the latest research of stackflow in 2019, vscode has become aThe most popular development environment for developersIt’s too late. In the current Internet companies, it can be said that a large number of engineers use it in both front and back end or other development positions. It is free, lightweight, cross platform, and has a large number of easy-to-use plug-ins as support.

So whether you are using windows, Linux or Mac, you can use it very easily.

To emphasize, vscode supports all major languages. Basically, it supports everything we can think of, what we’ve heard and what we haven’t heard. I went to see it just now, and connected itAncient language PascalThey all support it, so it’s over. One more thing to say to the student party is, don’t listen to the teacher or a textbook. It’s out of date to install visual studio or dev C + +.

Plug in of vscode

The reason why vscode is so powerful is thatEmbrace open sourceEach of us can develop plug-ins for it. Because of this, there are many plug-ins in vscode, no matter what we want or what we can’t think of.

We click on the left sidebarextensionsOpen the plug-in market, we can search among them.

For example, if you want to write python, let’s enter python. The interpreter of Python is the first

And there will be more on the rightDetailed description and introduction document, introduce the usage or configuration of this plug-in, and the configuration we can set according to our own needs.

It’s the same with C + +

These instructions actually correspond to a repo in the GitHub repository, so when we click some of the links, we will jump to GitHub. In addition, if we develop our own plug-ins, we can also register them in vscode for other people to use.

This is also the spirit of open source. Even if Microsoft has a big business, it is impossible to support and maintain so many functions and plug-ins at the same time only by the efforts of one company.

In addition, it should be noted that most plug-ins are installed and can be used directly, but some plug-ins need to be configured, which requires us to read the documents carefully before installing and using them.

Leetcode plug in

Familiar with the vscode plug-in, we began to enter the main topic of this article. As expected, we search for leetcode in the plug-in market, and then install the one with the most downloads.

After we install, press and holdshift + ctrl(command) + p, open the plug-in search bar. inputleetcode, select the first sign in, and then enter the account number and password.

But you will find that the login failed

What’s the matter? Why did it fail? Did you remember the wrong password?

So you open itleetcodeWe tried again, and found that the password is correct, so we can log in.

When we open the official website, we will find that the official already knows the problem of login failure, which is due toleetcodeThe official website is upgraded due to the login mechanism.

However, leetcode has only been upgraded to the international version, but not to the domestic version. So if you use the domestic leetcode account, we just need to change the leetcode version. The replacement method is also very simple. Click the button of the earth shape above to select it

But, personally, IThe international version is recommendedBecause the English title description will be clearer and the title will be updated more timely. Moreover, it is not sure that the Chinese version of leetcode will also upgrade the login mechanism, and it will still be unable to log in.

Unfortunately, for the problem of being unable to log in, the official frankly admitted that there is no particularly good solution to this problem, so they can only use cookies to bypass it.

Cookie login

Cookie is often used in websites. We can simply think of it as a cookieA token or certificate that identifies an identity

As we all know, today’s websites often have an automatic login mechanism. Because it’s too anti-human to ask users to enter their account and password every time we open it, and sometimes when we open different sites in the same website, we want to keep the login status instead of entering the account and password again. Cookies are born for the whole purpose.

The principle of cookie is also very simple. After we log in to the website successfully, the server of the website will use the encryption algorithm to generate a string of ciphertext according to our account ID or other information. And send this string of ciphertext to the browser, and the browser will store this string of ciphertext, so that the next time the browser visits the website, it only needs to carry this string of ciphertext. After the website gets the ciphertext and decrypts it, it can identify which user it is, automatically set it to the login status, and return the corresponding data.

Therefore, cookie data is very important. It is related to the security of many of our accounts. If our cookies are obtained by hackers, our accounts will face the risk of theft. Since symmetric encryption algorithm is almost unbreakable, many attacks against browser accounts are related to cookies.

I guess the reason for the login problem should be that leetcode authorities artificially restrict third-party plug-ins from logging in through account password proxy, so the solution is very simple, that is, we use cookies to simulate login

preparation in advance

Because the leetcode plug-in bottom layer is usedleetcode-cliCommand line tools, so we need to make sure that the version of our command line tools is correct.

First, we need to install Node.js 8 or above, about Node.js The installation method can be found on the Internet, and the installation is also very simple. I won’t repeat it here.

Next, we install the latest version of theleetcode-cli

# to remove the old version
npm uninstall -g leetcode-cli
# to install the up-to-date version(2.6.17+)
npm install -g leetcode-tools/leetcode-cli

Operation process

First of all, we need to get the cookie of our account through the browser. Let’s take Google Chrome as an example.

First, open leetcode, log in with our own account and password, and then right-click to select inspect

Then select XHR under network

Then we click problems in the navigation bar of the website:

At this time, the front-end web page Jump request information will be displayed on the right. We find one of the requests called all. Select headers and pull down to find the cookie

Let’s copy this string.

Re open vscode, open the leetcode plug-in, and select sign inSelect login modeWhen we log in, we choose to use Cookie:

Then input the account number and paste it into the cookie we just copied.

If it goes well, we will see the sidebar in the red box in the figure below, which means that we have finishedLogin successfullyIt’s over

Use of leetcode plug-in

The use of leetcode is very simple, and it is not far behind the web version. We can see all the problems by clicking all. When we click the title of the problem, the details of the problem will be automatically loaded for us, and the passed problems will be marked with green.

If we want to make a question, right-click to chooseShow Problem

After that, the language will pop up for us to choose. We just choose our most commonly used language. For example, I recently used Python to do questions, and I chose Python 3:

Then select just open the problem file

Vscode will automatically open a split screen for us. We can write code while looking at the problem, which is very convenient.

Leetcode configuration

Finally, let’s talk about the configuration of leetcode plug-in.

There are many configurations in leetcode, but I think the most important ones are two of them. One is to configure the file path of each problem code, so that we can find the written code in the future.

This configuration is calledleetcode.workspaceFolderThe default path is$HOME/.leetcode. The home here is the environment variable of your system. The location of this variable is different for different systems.

We can open the terminal inputecho $HOME

Check where our current $home directory points to. Of course, we can modify the configuration ourselves. We open the vscode configuration file and searchleetcode.workspaceFolderTo find the configuration in vscode, we can modify the path we want.

Another configuration is a shortcut to the editor. If you look closely, you’ll find that we open theleetcode pyThere will be two buttons under the file. I have three in this picture, because I set them.

These buttons are clickable, and they all have specific functions. For example, submit is to submit the current code to the leetcode website to help us submit the code. Test is to execute the sample to see if it can pass. In addition to these two, there are also two, one is called solution, which can view the current top favorite code. The other is description, which shows the problem description.

We can do it hereleetcode.editor.shortcutsModify the configuration:


With this plug-in, we can get rid of using the web to brush the topic. I have to say that it is very convenient. In addition, for our programmers, I think we will definitely encounter many problems in leetcode. The question is whether you are brushing the questions or interviewing when you encounter it.

This article about the configuration of leetcode plug-in in vscode, happy to brush the topic from now on. For more related vscode configuration leetcode plug-in, happy to brush the topic from now on, please search the previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!