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

This article "VSCode is better to use 10 times the method skills" in addition to programmers, most people do not quite understand, today Xiaobian in order to make you better understand the "VSCode better to use 10 times the method skills", summed up the following content, has a certain reference value, detailed steps are clear, details handled properly, I hope you can get something through this article, let's take a look at the specific content.

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.

In the recent JS 2019 report, VS Code also won by a landslide, and other editors could only be ruthlessly crushed.

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 [1]

‍ 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 [2]

‍ 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 [3]

‍ 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 [4]

‍ 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 [5]

‍ 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 [6]

‍ 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 [7]

‍ 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 [8]

‍ 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 [9]

‍ 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 [10]

‍ 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.

Thank you for your reading. I hope you have a certain understanding of the key issue of "VSCode is better to use 10 times the method and skills". The specific usage still needs to be understood by everyone through hands-on experiments. Try it quickly. If you want to read more articles about relevant knowledge points, 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.