Shulou(Shulou.com)06/02 Report--

This article will introduce you in detail "how to use VSCode", the content steps are clear and detailed, the details are handled properly, and the editor will update different knowledge points every day, I hope this article "how to use VSCode" can give you unexpected gains, please follow the editor's ideas slowly in depth, the specific content is as follows, to harvest new knowledge together.

What is the use of vscode Visual Studio Code is a cross-platform editor for writing modern web and cloud applications, which runs on OS X web Windows and Linux. It provides developers with built-in support for a variety of programming languages, and as Microsoft pointed out in keynote at the Build conference, this editor also provides rich code completion and navigation features for these languages.

"VS Code is really easy to use and cool to write code."

You must have heard more than one person say that. In the recent JS 2019 report, VS Code also won by a landslide, and other editors could only be ruthlessly crushed to the ground.

JS 2019 report

However, VS Code is not out-of-the-box like PyCharm/WebStorm, need to install some additional plug-ins, master some keyboard shortcuts and skills in order to be easy to use.

It took us a week to sort out perhaps the most complete VS Code novice guide for you, which is divided into three parts: shortcut key checklist, 10 super easy-to-use plug-ins, and novice tutorials, so that rookies can get started quickly and double their efficiency.

Quick look-up table for ● shortcut keys

Let's start with two quick lists of common VS Code shortcuts we've compiled:

Mac shortcut key

Windows/Linux shortcut key

Only when you use the keyboard shortcuts well can you find out how convenient VS Code is. The real god writes code with his hands on the keyboard.

10 super easy to use plug-ins for ●

Chinese (Simplified) Language Pack for Visual Studio Code

‍ Microsoft

3358698 downloads

Chinese VS code one second after installation, you no longer have to worry about not being able to read English.

City Lights theme

‍ Yummygum

54054 downloads

This is a good theme plug-in, but it is up to the individual to choose the theme, or you can get a lot of topics and find what suits you by directly searching for "theme".

Beautify

‍ HookyQR

3998071 downloads

Can enlarge the tag, adjust the code spacing, quickly format the code, so that the messy HTML, CSS, JS code instantly become neat, convenient for others to read, but also convenient for later maintenance.

Vscode-icons

‍ VSCode Icons Team

4237487 downloads

Set the file icon, according to various types of files, set the corresponding file icon, when we look at the file list, it is clear at a glance, and we can quickly find the files we need (especially when there are many files and types).

Image preview

‍ Kiss Tam á s

123990 downloads

When the cursor hovers over the image path, a preview of the image is displayed so that when we tap the code, we can know at once whether the correct picture or icon is referenced.

Code Spell Checker

‍ Street Side Software

970955 downloads

Many names of our daily typing code use English words, and careless friends may misspell them. This plug-in is a rescue artifact when words are misspelled. It can mark the wrong words and prompt the correct spelling of the words. With it, you don't have to look for bug for half a day because of misspelling.

Live Server

‍ Ritwick Server

3551236 downloads

When doing front-end development, we need to open a browser to preview and debug the page. This plug-in can achieve real-time preview of static and dynamic pages, save to see page updates, and do not need to refresh manually.

Indent-rainbow

‍ oderwat

567061 downloads

When writing code, can remind us whether the indentation is in place, alternating four different colors in each step, if not in place, then the color turns red, it is very comfortable to see the code neatly.

Rainbow Brackets

‍ 2gua

367290 downloads

Provide color for parentheses, square brackets, and curved parentheses; the same color indicates the same level of parentheses, and isolated closing parentheses are highlighted in red, which is useful for people who write JavaScript.

Polacode-2019

‍ Jeff Hykin

4704 downloads

You can save the code as a beautiful picture, the theme is different, the code color scheme is also different, you can also set the border color, size, shadow, in tutorials or documentation to provide code examples is very useful.

Tutorial for novice users of ● VS Code

① install VS code

Official download address of VS Code: https://code.visualstudio.com

Download the corresponding version according to your computer, and then install it.

② enters VS code

The interface is divided into these parts, first understand what each part does as a whole

③ installs the VS Code plug-in

The super easy-to-use plug-ins mentioned above can be installed here.

④ started writing code.

First, create a new folder on your computer.

Then open the folder in VScode, or press the shortcut key (Command / Ctrl+ O)

To create a new file (Command/Control + N), write the suffix before VScode can identify what type of file it is.

⑤ starts running code

Edit the code, save it, and use the Live Server plug-in preview recommended above. After installing the plug-in, right-click "Open with Live Server" to open or click "Go Live" in the lower right corner.

If you can read this, the editor hopes that you will have the most profound understanding of the key issue of "how to use VSCode" from the practical level, and you need to practice and use it yourself to understand it. If you want to read more related articles, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.