Visual studio code useful extensions. Useful plugins for Visual Studio Code. Enabling Live Server if there are no .html or .htm files

Visual Studio Code is free, cross-platform text editor from Microsoft, which has become popular due to its lightness, powerful and extensible functionality and, of course, "freebie", unlike PHPStorm, Sublime, etc.

Like most modern IDEs, VSCode has many add-ons that expand its original capabilities. We have selected 15 plugins that will be useful to any programmer working in this editor.

Open-In-Browser

By default, in Visual Studio Code there is no way to open the file in the browser. This extension not only adds the "Open in browser" function, but also allows you to open files in any browser installed on your computer.

Quokka

Quokka- a utility that allows you to preview the result of executing a particular piece of code, displaying the results of the execution of functions and the calculated values ​​of variables. The extension is easy to configure and works out of the box with JSX or Typescript projects.

Faker

Allows you to quickly insert random data (arbitrary names, addresses, images, phone numbers, etc.) into the code. Each category has its own subsections, which allows you to more accurately adjust to the needs of the programmer.

CSS Peek

With this plugin, you can keep track of class definitions and id's in a CSS file. To do this, you need to press right click mouse over the selector in your HTML file and select Go to Definition(Go to definition) or Peek definition(Peep the definition).

HTML Boilerplate

HTML Boilerplate Simplifies working with HTML by eliminating the need to write the head and body tags yourself. Type in an empty html file, press the Tab key and Visual Studio Code will generate a document template!

Prettier

Prettier Is a popular code editor among web developers that allows you to bring code written by different people to a single form. In settings Prettier you can set autorun, which will immediately format the code written in JS and CSS.

Color Info

A small plugin that provides a quick reference about the colors used in CSS. By hovering over a color name, you can see how it looks and how to write it in other color formats ( hex, rgb, hsl and cmyk).

SVG Viewer

This extension allows you to work with SVG files: you can edit SVG files, convert them to PNG format and create data url schema.

TODO Highlight

This add-on allows you to tag unfinished places in your code, making it easier on your project. By default, only labels are specified TODO(finish) and FIXME(fix), but you can create your own label types as well.

Fonts with icons

An extension adding to Visual Studio Code support for about 20 popular icon fonts, including Font Awesome, Ionicons, Glyphicons, Material Design...

Minify

Utility for optimizing and compressing code. Minify works with Html, Js and CSS files and works great with plugins like uglify-js, clean-css and html-minifier.

Change case

VS Code allows you to convert the selection to upper and lower case only. Through Change case, you will get access to a large number of registers (snake, camel, etc.).

Regex Previewer

An add-on that allows you to work with regular expressions. Regex Previewer applies the template regular expression to any open text file, highlighting all matches. Just like

Let's take a look at the best Visual Studio Code editor plugins for web development in 2020.

1. Live Server
2. Auto Close Tag
3. Import cost
4. Material Theme
5. Apache Conf
6. Russian Language Pack
7. Small bonus

1. Live Server

Enabling Live Server for .html or .htm files:

Enabling Live Server if there are no .html or .htm files:

How to set up automatic page refresh for PHP files using Live Server

2. Sass

Sass syntax support: indentation, autocomplete, and more

Compiles SASS / SCSS files to CSS in real time

To turn on you need to press Watch sass in the status bar

What Live Sass Complier includes:

1. selection of the export folder for the compiled file
2. CSS style selection (extended, compact, condensed, nested)
3. choice of extension name (.css or .min.css)
4. extension compatibility Live Server
5. setting up automatic setting of vendor prefixes
6. etc

Highlighting tags - opening and closing

The highlighting of the tag selection can be customized for yourself. My setup:

Highlighting web colors in the editor with the corresponding color

The extension colors symmetrical brackets with the same color, but different from other brackets.

When you change one paired tag, the second one will be changed automatically.

By default, the extension works for all languages, to change this setting use the following code:

8. Auto Close Tag

Automatic tag closing

Works for all languages ​​by default: HTML, PHP, JavaScript, markdown, liquid, etc. You can change the settings in setting.json

9. Import Cost

This extension will display the size of the imported package inline in the editor.

10. Material Theme

One of the most popular themes for VS Code. You can also install a font that supports ligatures (converting a sequence of characters into a single element)

Then the settings for settings.json will be like this

11. Apache Conf

Apache syntax support. Convenient for editing files with extensions .htaccess... Also supports file types: .conf, .htgroups, .htpasswd

To quickly insert random data using the Faker library. You can insert arbitrary names, addresses, images, phone numbers and more. A very popular and very useful plugin.

It allows you to automatically complete filenames as you type in a string. Perhaps, soon this functionality will be integrated into the editor, but so far the plugin helps a lot.

A plugin that allows you to leave bookmarks in the code, it is just as easy and convenient to work with them.

Plugin for checking spelling in code.

GitLens reloads the built-in Visual Studio Code Git capabilities. It helps you visualize your code history information in Git right away, navigate smoothly and explore the history of a file or branch, gain valuable insights through a plugin, code comparisons, and more.

Plugins for Back-end developers

PowerShell

Allows you to work with PowerShell scripts right in the Visual Code interface.

Python

Extension Visual code Studio with Python language support (including Python 3.6) with including the following features:

• Linting (Prospector, Pylint, pycodestyle, Flake8, pylama, pydocstyle, mypy)
• Intellisense
• Auto indent, code formatting, refactoring
• Running and debugging unit tests (unittest, pytest, nose)
• Snippets

• .NET Core development and debugging tools.
• Great C # editing support including syntax highlighting, IntelliSense, go to definition, find all references, etc.
• Support for project.json and csproj projects for Windows, MacOS and Linux.

Front-end developer plugins

JSHint

JSHint is a very handy tool for static analysis of JavaScript code. Checks if the written code meets programming standards.

Code Time is an open source plugin source code which provides metrics right in the code editor.

After installing the extension, you will be prompted to enter the control panel. If inside your code editor you click command + shift + P, a window will open in which you can enter Code time, and then choose between displaying the data in a code editor or in a browser.

Inside the browser, the information will look like this:

It's more colorful inside the browser:

Code Time is useful if you need to know exactly or are just wondering how much time you spend writing code.

One dark pro

One Dark pro one of the most popular and frequently downloaded themes for Visual Studio Code.

In this example, you can see that we have icons for directories like client and server, as well as files like .eslintrc .gitignore and package.json.

One dark pro supported in React, Angular, Redux and many different frameworks and libraries, providing different directory icons for components, utilities, styles, and also for Reducers, Actions, and Stores.

Bracket Pair Colorizer

This extension allows you to match parentheses to colors. This comes in handy when you have deeply nested objects or functions, as shown here:

Color Highlight

Color Highlight shows a visual representation of any color code. For example, if you enter RGB, RGBa, Hexadecimal, or any other color code, you can see the color as in this example:

Path Intellisense

Path Intellisense is a plugin that automatically completes filenames.

This is useful for importing components into React because you don't have to manually enter the path to the file you're looking for.

ES7 React / Redux / GraphQL / React-Native Snippets

The next extension is ES7 React / Redux / GraphQL / React-Native Snippets. Long title, but will save you a lot of time, especially if you are using it in React.

This extension provides JavaScript and React / Redux snippets in ES7 with features from the Babel plugin for VS Code.

Right in the code editor, you can click command + shift + P, and then ES7 Snippet Search, you will see a long list of short commands that you can run to get longer code snippets.

With this extension, you can easily find a command, for example, for a fragment of a functional component. You run commands by typing them in the editor and pressing enter. It's that simple!

GitLens - Git supercharged

GitLens extends the Git capabilities built into Visual Studio Code. Helps you identify the author of your code at a glance with Git-blame and code lens annotations, easily navigate and explore Git repositories, gain insight with compare commands, and more. By clicking on a line of code, you can see who edited it, when it was edited, and in which commit.

let `s talk about Code -. My dear readers asked me to tell you about those extensions that I use for development. This is what we are going to do now.
VSC Download Link: https://code.visualstudio.com/ Our VSC will be a five-horned laser-shooting unicorn - after we provide it with the most useful extensions I use every day. Oh, and if you are not already using the wonderful VSC editor, under the picture above there is a link to the official site from which you can download it.
Material Theme

Material Theme

Auto Import

Import cost

Indent-Rainbow

IntelliSense for CSS class names in HTML

SVG Viewer

Prettier - Code formatter

React Native Tools

Sublime Text Keymap and Settings Importer

npm Intellisense

lit-html

highlight-matching-tag

GitLens - Git supercharged

Git project manager

Git history

File Utils

Bracket Pair Colorizer

Color Highlight

CSS Peek

Debugger for Chrome

Quokka.js

Trailing Spaces

TypeScript Hero

WakaTime

Vetur

Code runner