🙍🏽 🔯 🎇 Visual Studio Code Code Editor. The most detailed guide for setting up and installing plugins for beginners 🤰🏼 👨 🌿

Free, powerful, very popular, with a bunch of add-ons, what can I say, Facebook himself chose it as the main editor!

Today we will focus on the Visual Studio Code code editor or just VS Code. We will install it, configure it, and also use plugins that will greatly simplify our work.

If the Sublime Text 3 code editor is more interesting, the article here https://habr.com/en/post/458206/

Content:

Delete

If you already use VS Code, but decided to start from scratch, then I will show how to remove the program completely, including all settings and plugins. Besides the fact that the program needs to be removed from the Windows control panel, you also need to go to Disk C> Users> Your username and delete the .vscode folder here.

AppData must be added in the path bar, then go to the Roaming folder and here you need to delete the Code folder.

Installation

Ok, now we can install the program. Go to the code.visualstudio.com website , Download section. There is a version for Mac, Linux. I'm interested in Windows. Click and download to your PC. By the way, the program website is very useful, so I advise you to study it.

The program is downloaded, run the installer and follow the instructions: accept, add all the checkmarks, then wait until the program is installed on our PC.

Running on a weak machine

When the program is installed, we can start it. But it will not start on every computer. The fact is that the program is quite resource intensive. Therefore, on a weak machine, you can get this result: instead of the program interface, a black screen, and the processor sweats 100%. But there is a way out - you need to open the context menu of the program’s shortcut and add the following flag in the path to the file: --disable-gpu

Great, now the program will start even on the calculator.

Language setting

The program is launched and we can begin to get acquainted with it. And to make it easier to get to know, I will install the Russian language. To do this, I click on the extensions icon. In the search field, I start writing russian until I see the Russian Language Pack for Visual Studio Code package.

I click on the Install button. Next, the program will ask you to restart, do this. Great, now it will be much clearer. But, if you speak English, then switching to Russian is not necessary.

Welcome Screen

I will hide the side panel for now, we will return to it more than once.
The first thing we see is the welcome screen. There is an item here with which we can import all settings, keys from already installed editors, for example Vim, Sublime, Atom and others.

This will greatly speed up and facilitate the transition from one editor to another. But today we will do everything from scratch. Further, there are other useful links - General information about the interface, as well as a list of keyboard shortcuts in a very convenient form and much more.

I advise you to study this screen, and when it is no longer needed every time you start the program, you need to uncheck this checkbox. Later, you can always call it from the Help> Greeting menu.

Interface out of the box

Too lazy to read? Here is the video version.

All preparations have been made and now we can familiarize ourselves with the program interface and at the same time see what VS Code can do out of the box.

We call the General interface information window and see the main elements of the program.

Above we see the menu. Next is the execution interface of any command that we can always call. General area of the editor. Left action bar. Below is the status bar, and we will start with it. Tips tell us that there is a View of errors and warnings. You can call the built-in terminal.

Let's consider all in more detail.

Status bar

Problems

On the left side, the numbers next to the icons will display the number of errors and warnings that arose during code execution.

To open the panel, you need to click on these icons or hold Ctrl + Shift + M , here we will see the text of the error messages.

In the panel, you can filter these messages, minimize them, expand the entire panel to full screen, or close it.

Debug console

In addition to the tab for the output of problems in this panel, we still have a Debugging Console, we will return to it.

Conclusion

The output log of the work of all programs and systems of the editor. Here you can also filter this log, clear it, block the scroll of messages, expand the panel or close it.

Terminal

The last tab in this panel is the integrated terminal. You can call it by holding Ctrl + ` .

In the Control Panel, you can also add terminals, split the window into several parts, delete the terminal window, switch between terminal windows, and also select the default shell.

For example, I have GitBash installed. Selecting it, adding a new terminal window, this interface will open for me. Traditionally, here you can expand the panel to full screen and close it.

Notifications

On the right in the status bar we see notifications, now they are not there. It is also possible to send a tweet with feedback about the program.

Also, many other items will appear in the status bar.

Context menu

We can also call the context menu and remove from this line what we do not use. For example, a review tweet to make room.

Also in the same context menu we can hide this line completely.

Action bar

By default, an action panel with 6 elements is located in the left part of the editor:

Explorer, it’s a built-in file manager;
Search;
Version control management system;
Launching and debugging applications;
The installer for various add-ons is our editor;
At the bottom there is a gear, clicking on which we will see a menu of the main program settings.

Conductor

Let's start with the Explorer, it can be opened by clicking on the icon or hold down the Ctrl + the Shift + E .

It is very convenient that when you hover over the icon, the editor prompts us with a keyboard shortcut.

Here we see 3 main tabs:

Open editors - here will be a list of files open for editing.
Tab with folders, projects. Now we do not have open folders.
The structure - now there is nothing here, we will return to it later.

The Welcome Window we can close already. When all the windows are closed, the editor displays a stub where it shows the keyboard shortcuts for the main actions:

Let's add an empty folder to our future project in the editor. To do this, click Open Folder or simply drag it into this field.

Now we have an empty hello_vscode folder, as well as some controls:

Create file;
Create a folder;
Update all files and folders;
Collapse everything in Explorer.

Let's create some files that we need for the project. Click Create file, write for example Index.html. Next, we can create a css folder and create a style.css file in it. It is very convenient to use this built-in file manager.

You can also use the context menu to create files and folders. In addition to this, there are also interesting features, for example, show the folder in Windows Explorer.

Now we can go to Index.html and write something interesting there, for example, “Hello VC Code”.

Syntax highlighting

Just want to say a few words about syntax highlighting - this is the ability of the editor to recognize the code and colorize its individual elements. When we opened the file and started working in it, an html element appeared in the bottom of the status bar in addition to other new elements. This means that the editor has recognized the language and highlighted it accordingly. Clicking on this element, we will see a large list of highlights for various languages.

This list may not include absolutely everything. For example, if we are working with a .kit file. Let's create index.kit and copy our code there. We will see that there is no highlighting, and instead of the html element we see the text plain text. What to do in this case? We need to click on plain text and here we have a choice - instead of automatic detection, we can try to look for add-ons for syntax highlighting specifically for .kit files.

If this does not work, then we can configure the mappings. Click here and select a mapping language for .kit files. In my case it is html.

Now all .kit files the program will recognize as an html file and highlight accordingly. Let's get back to our real html file. We’ll save everything that we edited here. The result of the work can be seen by opening this file in the browser. In the structure tab, we will see that such a tree structure of our document has appeared.

An additional useful feature of the explorer is its Context Menu, where we can show or hide any tab. For example, I will remove the structure and remove the open editors.

As a result, I will only have a project folder.

Search

Search ( Ctrl + Shift + F ) - the thing you need. We write the word hello, which we indicated in our html file. Search immediately found it, highlighted, showed in which file. You can immediately replace this word with some other.

It’s convenient for us to show all this by clicking here on the icon the word will be replaced.

Version Control Management System

Open the tab you can click on the icon or hold down the Ctrl + the Shift + the G . For those who are already familiar with version control systems, such as Git, he will appreciate this feature. A bit later I will show how to link my local project with the repository on GitHub.

Application debugging

The next item in the action bar is Debugging the application. This tool, both independently and with the help of third-party plug-ins, allows us to analyze the execution of a particular program code.

For example, we have some kind of javascript code, and in order to start debugging, we can click on the button here or press F5.

The debugging result will be displayed in the bottom panel, you can also set the so-called code breakpoints and move between them, which is very convenient.

Extensions

Here we have a whole warehouse of extensions and plugins for our editor. We have already used this tab to install the language pack. We click on the icon or holding the key combination Ctrl + Shift + X we will see a search field for extensions and three additional tabs:

Enabled - all installed extensions are displayed;
Recommended
Extensions that are installed but disabled.

In the tab with our installed extensions, we have quick access to them, we can see, read some information, hot keys, find out all the details about this extension. Also, it can be deleted here by clicking on the Delete button. We will return to extensions and install the best and most useful of them.

Settings

In the action panel, we still have one more element - gear - the main settings menu. Here we can call a palette of commands by clicking here or the Ctrl + the Shift + P . A block will open where we can find and execute any editor command or installed plugins.

Further keyboard shortcuts. Here we can customize our keyboard shortcuts to commands or change to existing ones. We will return to them. Custom code snippets, the so-called snippets, are small abbreviations that will cause the code fragment we need. Today we will learn how to configure them. Here you can customize the color theme of the program, icons for files and much more.

Finishing with the Action Bar, it is worth noting that you can quickly call up the last open tab with Ctrl + B. Also, hiding the context menu, you can hide an unnecessary item. For example, I will hide Start and Debug. In the same context menu, you can hide the entire action bar.

Editor Area

Too lazy to read? Here is the video version.

We see tabs with open files. They can be dragged, closed. If the file is not saved, then the place of the cross will display a large bold dot here. Next to the top is the split window icon. There is an open active file, click on the icon and it will be duplicated on the side.

There is an additional menu for managing all files.

Below we see the navigation bar - breadcrumbs, where we can conveniently navigate the structure of the document, as well as between other files.

The general area of the code - we see the code of the open file itself, and on the right is a mini-map that allows you to conveniently navigate through a long file. There is a small space in the code area on the left, for setting breakpoints for debugging the code, there are line numbering.

Next we see the arrows, they appear when you hover, with their help you can collapse the whole block of code. In this editor, this function works with memory. I can close the file, even close the entire program, and when I open it again, the previously minimized block will remain minimized.

What can we configure here?

As I have already shown, the editor window can be divided into several parts, this is convenient when working with different files. In order to see different options, you need to go to View> Editor Layout . There are a bunch of options here, for example, two lines, and we can move a file here and work like this. There is also a 2x2 grid option. That is, you can work simultaneously with 4 files.

You can also quickly arrange the desired position of files by simply dragging and dropping them. I immediately formed the right layout for myself. It is also possible to customize the appearance of the entire editor area. Open Menu> View> Appearance .

Below there is the ability to adjust the scale of the entire program. Do not confuse with font sizes. It is convenient to use keyboard shortcuts. For example, to increase the elements I press Ctrl + , to reduce - Ctrl- , to reset - the Ctrl + 0 .

You can move the action bar from left to right and then it will be on the other side. You can specify the position of the panel of our status bar. By clicking, we will see that the panel will no longer open from below as before, but from the side. That is, it is possible to configure almost everything.

Also in this block you can hide or show different elements. I said earlier that we can hide the entire notification line, completely hide the action bar. In this block we can return all this to the place.

Screen modes

At the top there is a full-screen mode when you press F11 . The top menu, buttons for managing the program window will be hidden.

Center alignment of the layout. The code area is centered, you can adjust the width. This is in order to better concentrate on the code.

There is a wonderful Zen mode. It hides all elements, even file tabs, we concentrate on only one single file, on one code. We solve a difficult task that requires maximum concentration.

To exit it, press Escape .

Text wrapping

Further, in the View menu, we can enable or disable the text wrapping, you can do so by holding the Alt + the Z . What does it mean? For example, we have a very long text that does not fit in the code area and horizontal scrolling appears. If this seems inconvenient, you can press Alt + Z; all our text will be wrapped to fit in the code area.

It is possible to hide or show a minimap, controls, that is, bread crumbs. If it seems unnecessary. Here you can display non-printable spaces and printable characters and draw control characters that can be copied from the source in the text.

Color scheme

We can choose one of the installed themes by going to the Office, point Color theme. We see the list and with the arrows on the keyboard we can move between topics, picking the right theme for ourselves. There are both dark and light options.

If none of these topics is appropriate, we can set our own. To do this, I return to the Extensions tab, in the search field I write the name of my theme - SpaceOceanKit. I find, click Install. Next, I have a choice of which topic to choose and I choose it.

Now I have the whole editor, including the code, it will look different. I set my theme, you can install any other.

The combination of colors is very important for long-term work with the code, this affects the perception, fatigue and health of your eyes. So carefully choose a topic for yourself and do not forget to take breaks.

Icons

We can also change the appearance of the icons for files in our explorer. To do this, go to Management> File icon theme , here we can turn off the icons completely or choose from the list.

Also install additional icon packs. For example, Matherial Icon Theme.

Parameters

You can additionally configure comfort for working with the code and with the editor as a whole in the Program Settings. To do this, go to Management> Options or hold Ctrl +,

Parameters can be configured both globally and for a specific project. There are a lot of settings here. We will go through the main ones.

Autosave

The first useful option is file autosave. For beginners, a very cool option. Beginners often come up to me with the problem, “Why doesn’t my job work for me?” I look, and the file is not saved there.

To prevent this from happening, here you can change the value to one of three:

afterDelay - the file will be saved after some delay, which can be configured immediately here below. If you select this option when editing a file, it will immediately be saved, a bold dot will not even appear.
onfocusChange - the file will be saved when we move to another file
onWindowChange - when we switch to a completely different program, then the file will be saved automatically.

Choose a convenient option for yourself and move on.

Code display

The following options will help you set up a comfortable code display. This is the font size and font family. Here you can choose the value that suits you.

I adjust the size of the indentation when tabbing. By default it is 4. As for me, the field is too wide with one Tab, so I change it to 3, so it seems more compact to me. You indicate the value that is comfortable for you.

In one file, spaces are displayed for me, dots when Tab is pressed, in another - a tab icon. The Insert Spaces parameter is responsible for this option. By default, a check mark is set, that is, spaces will be displayed. I want my tabs to be displayed, so I'll remove the check mark.

In order to convert an existing file with spaces, you can go to the status bar, press 4 spaces and select the option Convert indent to tab steps. Thus we can convert already opened files.

And the Detect Indentation option answers how to determine the insertion of characters for new open files. I’ll remove the checkmark because I want my configured settings to work for all files.

Hide tooltips

Earlier, I showed that when you hover over an element in the code, tooltips pop up, often this can be annoying. To remove hints, there is a Hover Enabled parameter . The checkmark can be removed and the prompts disappear.

But, along with this, functions that might be useful will disappear.
For example, in the stylesheet we have the color blue. It is highlighted immediately. If Hover is turned on, then when you hover over a color, such a thing falls out:

We can make it translucent, set rgba values, or even change the color to another. If we clear the Hover Enabled checkbox, then this function also disappears.

The Color Decorators parameter is responsible for the output, if it is not needed, the checkmark can be removed and there will be no color squares.

Mouse Wheel Zoom - by checking the box, we can change the font size in the editor by holding Ctrl and turning the mouse wheel .

Close Active Groups controls whether the group will be closed when the last tab in it is closed. The editor can be divided into parts. By default, when closing in the last tab, the entire tab will close. Sometimes this is inconvenient, so I remove this checkmark. And now, when closing the last tab, the group will still remain with me.

Formatting

The next group of settings is responsible for formatting, which is already built into the VC Code editor. What is formatting? For example, we write a structure, there is another structure in it, but for some reason a tab has moved out. When you hold Shift + Alt + F , everything will line up as it should.

Back to our settings. Here we can put three checkmarks:

Format On Paste - formatting will be done automatically when you paste the code.
Format On Save - formatting will be done when the file is saved.
Format On Type - formatting will be automatic, that is, we will print and everything will be formatted at once.

I set one checkmark - Formatting when saving.
Now, when the tab stops, I don’t pay attention, at the time of saving the file everything will be in its place.

You can make more fine-tuning the formatting of a particular language by understanding the documentation on the program’s website. You can also install additional extensions for a specific language, as well as for many others.

I showed that part of the settings that I use myself. You can familiarize yourself with the rest of the settings yourself. For convenience, the settings here are divided into categories. There is also a category of settings for extensions already installed or those that we only install.

For quick access to everything that we have configured, hold down Ctrl + Shift + P and write in the search barSettings until we see Settings (JSON). We click and our settings will appear in front of us, you can immediately change them.

In the same file we will configure the new extension.

Comfort when working with the program is very important, as this directly affects performance. The next thing we will do is install a number of plugins that will help us substantially in this.

Plugins

Too lazy to read? Here is the video version.

Emmet

- This plugin is already built into the VS Code editor out of the box. Indeed, today it’s hard to imagine life without Emmet. Super speeds up typing. For example, it was thanks to him that I so quickly created the initial code for the HTML file by writing only an exclamation mark and pressing Tab.

Here is another example. We need to create a div with the block class for this, I write .block and press Tab. Done!

Or for example more complicated - we need to create a bulleted list of 10 elements. Write ul> li * 10 Tab. Done!

The same applies to style files. For example, for the body tag, I want to set the font size to 20 pixels. To do this, it is enough for me to write fz20 . By pressing Tab, I get a ready-made parameter.

You can learn more about Emmet's features on this add- on's website .

Snippets

But it’s even cooler to create your own snippet shortcuts to quickly call that other piece of code.
Go to Management> Custom Code Snippets . There is a choice:

Create snippets for a specific language;
Create snippets for all languages, but for a specific project;
Create global snippets for all languages and for all projects.

Let's create global ones, here you need to enter the name of the list of snippets.

I type my, click and the my.code-snippets file opens. There is any commented information, as well as an example. I will uncomment him. Here is the snippet for JavaScript.

. scope — . , . — , , . body . console.log description, .

: , . , css .

— “ ”, . , mm. body «margin: 0px, 0px, 0px 0px;», mm . Ctrl+S .

style.css mm Tab. , , .

, . js, log Tab.

, , $1 $2. $1. Tab, $2. .

, , , .

. Ctrl+Shift+X .

Live Sass Compiler

, SASS/SCSS. Install. , , , . , .

Watch Sass. .

scss , . style.scss.
:
```
body{
	font-size: 20 px;
	div{
		font-size: 10 px;
	}
}		
```
, Watch Sass scss\sass . style.css style.css.map.

. , , , scss, css.

. Shift+Ctrl+P, Settings (JSON). , .
```
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
	{
		"format": "expanded",
		"autoprefix": "last 5 versions",
		"extensionName": ".css",
		"savePath": "css"
	}
],
```
-, -. . «format» — , scss — , , ..

— css . . — css. css, .

, . , - - , css , style.css. , .

, style.scss. , scss - . , — import «header.scss»

, . …

? header.scss header.css. , style.css, header, , . header, . , header.scss, , .

, . , , header.css, . :)

Live Server

Live Css Compiler Live Server — , . Live Css Compiler, Live Server .

, , Live Css Compiler. Go Live. , , index.html Go Live .

html , “Hello”, , GoLive .

, . . link, link.css, . , .

, , , . , .

SCSS IntelliSense

SaSS. SCSS IntelliSense, scss, .

SCSS Formatter

. sss . .

Auto Complete Tag

Auto Rename Tag Auto Close Tab. , VS Code , Auto Close Tab — html, . Auto Rename Tag — , . , span , .

Bracket Pair Colorizer

, — , , . . , , . , , , .

Indent Rainbow

, , , , SaSS pug, .

Better Comments

. , , .. , , - , .

- —! — , ToDO — , —? — .

, , .

, .
Color, - .

BEM Helper

BEM. bem, , . , , - css scss bem- html .

. Alt+B+E, , , .

?

.
. , > BEM Helper.

, Insert Element. , , .

, . , , - .

eCSStractor

, html css\scss\sass. , . > , eCSStractor, . eCSStractor Run (With BEM Nesting).

, , Ctrl+Alt+1, Enter, .

: html , , Ctrl+Alt+1, , .

. , .

, , BEM? Ctrl+Alt+2 .

, , . , — BEM BEM.

CSS Navigation

, . -, .
, red. html, . r , .

. , F12 . , , .

, , - , . F12 , , , html-.

Alt + F12

Image Preview

. , . html-, , , . , , , .

Debugger for Chrome

, - . F5 Chrome, , .

Vscode Google Translate Google Translate

. , translate text.

, , , Shift+Alt+T.
html , hello, Shift+Alt+T . , .

, > , , , , .

, (Preffered). , Shift+Alt+T . .

Project Manager

, , .. . Project Manager.

, , . . , , Project Manager .

Settings Sync

, , Windows, Settings Sync.

, GitHub .
, GitHub, , .

, , . , .

, . Shift+Alt+U.

. , , , , .

.

, Settings Sync. , GitHub. .

. , , — Shift+Alt+D.

, , - . , , , . , — . , , , .

. , .

( ) :
Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
Settings Sync

GITHub

? .

! Git.

, +, , .

. +, .

, , -, Enter. GitHub. , , . :

git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git git push -u origin master

, . , . , , , . , Enter.

, . Git. - , 1, 1 , , . > .

GitHub, , GitHub.

GitLens, .

, , — , — .

, , — , !

VS Code " "