Visual studio code extensions. Useful plugins for Visual Studio Code. Enable Live Server for .html or .htm files

The main editor I use to write code has become Visual Studio Code (VSCode for short). Before that, I worked in the Sublime Text editor, which I completely deleted two weeks after I started using VSCode, simply because VSCode is much cooler and faster.

In this article, I want to tell you about the best extensions for the VSCode editor that I myself use and I advise you to pay your attention to them.

VSCode implements the search and installation of extensions directly from the editor - just open the extensions panel and enter the name of the extension or a keyword (tag) in the search for extensions in the Marketplace, and the editor will immediately make a search and offer you options available for your search query.

By default, the Emmet plugin is already installed in VSCode, but what extensions should be installed to make your work faster and more comfortable, read on.

Extensions for Visual Studio Code

Project Manager - Project Manager

This is the extension that you should install in the VSCode editor first. The author of this extension, Alessandro Fragnani, is an experienced developer with more than a dozen extensions for VSCode.

The extension will help you easily access your projects, no matter where they are. You can define your own favorite projects or choose to auto-detect VSCode projects, Git, Mercurial and SVN repositories or any folder.

In general, you can make any folder on your computer a project and with this extension you can quickly switch between your projects or open them in a new editor.

I personally contributed to the development of the Project Manager extension - I made it multilingual and added Russian, so now it is available in Russian.

Bookmarks

Another extension for VSCode by Alessandro Fragnani.

The extension allows you to bookmark the lines of a file, which is indicated by a mark in the margins.

Bookmarks have their own explorer bar and an icon on the left menu bar, providing quick access to bookmarks. You can add an unlimited number of them.

For convenience, to make it easier to navigate the bookmarks, I often bookmark a comment. Below is an example on the screen - the bookmark is on the line with the comment Buttons and in the bookmark explorer it is designated Buttons. I think this is convenient:

As well as for Project Manager, I made my contribution to the development of this extension - I made it multilingual and added Russian to it.

The extension adds the ability to quickly open html files in the browser.

With this extension, you do not need to fiddle for a long time to open the file in the browser.

If the file is open in the editor and is in the active state, just press the key combination Alt + B and the file will open in the default browser.

If you press the key combination Shift + Alt + B, then a list of browsers will appear on the editor's command line where you can select in which particular browser you want to open the file.

You do not need to memorize the key combinations mentioned above - just press the right mouse button and the context menu has the appropriate items to open the file in the default browser or select a browser from the list. Moreover, you can open not only active files (opened in the editor), but also files from the explorer panel.

Path Intellisense

Path Intellisense- this plugin for Visual Studio Code, which automatically fills in file names.

A similar Path Autocomplete extension.

Performs the same functionality as Path Intellisense, adding the path and filenames.

I currently have it disabled Path Intellisense, but is included. I'm testing which of these two extensions responds faster and gives hints in intelesense. While I like it better, the impression is that it is faster.

file size

This extension shows the size of the active file in the status bar of the editor.

I looked for a setting in VSCode options to display file size but didn't find it. But this small utility solves this problem and displays information about the file size in the status bar of the editor.

htmltagwrap

This extension wraps the selection with HTML tags.

It's simple - select a fragment or a line and the command with the keyboard shortcut Alt + W

If you get used to and remember the command, it's very cool.

Active File Status Bar

Displays the path to the file in the status bar of the editor. On click - copies the path to the file to the clipboard.

Bracket Pair Colorizer

This plugin allows you to set a color for each pair of brackets, which allows you to visually control the nesting or condition rules in the code. Works for round (), curly () and square brackets.

Before installing this plugin, I had problems with closing brackets, now I can see the nesting of brackets by color.

File and folder icons

VSCode simpler Icons with Angular

This is a collection of icons for files. I reviewed a lot of icons, but settled on this assembly, because. only folders for node_modules and bower are styled here. In other assemblies, different folders (for example: images, js, css, etc.) have their own beautiful icons, but it is difficult to quickly distinguish a folder from a file, but here everything is simple - in the tree of folders and files, I clearly see where the open folder, and where closed.

There are a lot of similar sets on the Marketplace, so you can see for yourself and choose the icon styles that suit you. You can put many collections at once. Changing icons is easy - the setting for changing icons is in the menu on the gear located at the bottom of the toolbar:

Choose an item File icon theme and your installed file icon themes will appear in the editor command line. Three default themes from VSCode and what you will add. In the list, simply use the up and down arrows to scroll through the topics and the icons will be immediately applied and displayed in the file explorer. So quickly pick up the theme that you like.

I repeat that I liked the theme VSCode simpler Icons with Angular

Starts a local development server with active reloading for static and dynamic pages.

To do this, in the status bar of the editor there is a button to start. After clicking on it, it opens the file in the browser and monitors the changes in the files. When changing files, automatically reloads the page in the browser.

Personally, I prefer to work with Browsersync through Gulp, which is faster, more functional and creates less load, but since Gulp is not always installed in every project, there is work to extend Live Server.

Profiled extensions for VSCode

And now I will offer a list of extensions for VSCode for specific areas.

Working with Git and Github

In addition to the fact that VSCode works with Git by default, there are a lot of extensions on the Marketplace for all tastes for working with Git and Github. I stand like this:

Git History, GitLens, Git Merger, GitHub Pull Requests

RemoteFS

This extension allows you to connect to the server via FTP and SFTP protocols.

All you need to open a site or project located on the server is to add the following setting in the settings.json file:

"remotefs.remote": ( "first site": ( "scheme": "ftp", "host": "Host", "port": 21, "username": "FTP login", "password": "Password ", "rootPath": "/", "connectTimeout": 10000 ), "second site": ( "scheme": "ftp", "host": "Host", "port": 21, "username": " FTP user", "password": "Password", "rootPath": "/", "connectTimeout": 10000) )

Connection data can be obtained on your hosting in the section FTP Users. I specifically showed a connection layout for two sites - according to this scheme, you can connect as many sites as you like using different protocols (FTP or SFTP).

Web-based text editors are booming. Atom, VS Code, Brackets, like monsters of rock, are gaining popularity among web developers (wait, what year is it on the calendar for "popular monsters of rock"? 🙂 - Approx. ed.). They are switched to both from the IDE and simply from native editors. The reason is extremely simple: the repositories are teeming with useful plugins, and everyone can create the missing ones on their own, using purely web technologies.

The number of extensions in the official repositories is constantly growing, and so that you do not get lost in them, we have prepared for you a list of the most popular plugins that simplify web development.

According to the taste of the author

Your obedient servant used all the listed editors and eventually settled on VS Code. There are several reasons for this, but the main one is performance. Microsoft did a great job and, despite the late release (VS Code was the last to appear on the scene), they managed to gather a huge community around themselves. This had a positive effect on the plugins: some of them, in my opinion, are a cut above the alternatives for Atom. In this regard, the names of extensions specifically for VS Code will flash in the text of the review. A link to an approximate version for Atom in terms of functionality will be given below. Don't be surprised if you copy the plugin name and search the Atom repository and find nothing. Use the links in the description.

Reasons for popularity

Web-based editors have roughly the same problems. One of the main ones is performance. The developers are working on the speed of the editors, but let's be honest - this problem is unlikely to be 100% dealt with. Native solutions still outperform in speed, and this should be taken into account when choosing an editor.

Well, the performance of native solutions is unrivaled. Due to what then the newly minted "lightweight" editors won so many hearts of developers? The main argument "for" is the technology stack. What does it mean to develop a plugin for some Sublime or Notepad ? That's right, you have to deal with C, Python (any other programming language can be used here), the editor's SDK and other things that are not necessary for the main work.

What web developer would agree to this feat? He has enough of his worries and technologies (a real revolution of solutions is taking place in the frontend). So it turned out that the plugin ecosystem for web developers in native editors has always suffered from a lack of specialized solutions.

The idea of ​​creating editors based on web technologies for the masters of these same technologies effectively solved the problem of a poor ecosystem of third-party modules. Third-party web developers quickly picked up the wave and set about creating the gadgets they needed. The results are easy to follow - the official repositories are full of plugins for a wide variety of tasks. Creating new plugins has become easier: you no longer need to learn a foreign programming language, JavaScript is enough.

Unfortunately, for the ease of finalizing the functionality of the editor, you have to pay with performance and resources. Lightweight editors often require more system resources and are not ready to compete with native ones in speed. During testing, Atom with a gentleman's set of extensions managed to overtake WebStorm in terms of memory consumption.

Snippets

Plugins-snippets are a separate class of extensions for editors. They are wildly popular, and there is an individual offer for almost every modern framework or library in the repositories. Snippets save time. Need to describe a class stub? No problem, we enter a couple of characters and get a few lines of finished code. It makes no sense to analyze plugin snippets in detail - there are too many of them. Here are some links to snippet plugins for popular technologies. You will find the missing ones.

VS code:

atom:

Wrapper for HTML

When describing page markup, you constantly have to wrap blocks, that is, nest one block within another. I wrote the block markup, and then I realized that for the convenience of styling it is better to wrap it in an additional block. It’s easy to do: we write the opening tag at the very beginning, scroll the block to the end and put the closing tag. There is only one problem - it is inconvenient to do this on large blocks. There is every chance to put the “closer” in the wrong place and break the markup. A similar problem appears when styling individual pieces of text. Try to quickly insert multiple start and end tags and not go crazy. Plugins help you deal with problems. htmltagWrap And Atom wrap in tag. With their help, the solution will come down to highlighting a piece of code / line and pressing a combination of hot keys.

• VS code: htmltagwrap
• atom: Atom wrap in tag

Getting used to hotkeys

When switching to a new editor/IDE, you always run into the same problem - you have to learn new hotkeys. Just got used to one combination, like bam - and everything is different. You begin to spend more time on habitual actions than usual, and once again you think about whether it is advisable to switch to something new at all. I am sure that developers who started their careers 10-15 years ago have experienced this many times, so they will definitely appreciate the power of plugins with key bindings for popular editors. The bottom line is simple: get used to the layout of the Visual Studio hotkeys - download the appropriate plugin, and the new editor begins to respond to familiar commands.

VS code:

atom:

Autocomplete for files

By default, none of the editors provide auto-completion for filenames when they are connected. This is often the cause of errors. You have to remember the full path to the file location. If the project is more complex than Hello world, then the files are grouped into several directories, and you will have to use the services of a file manager to specify the path. Not very comfortable. It is easier to enable autocomplete using AutoFileName and autocomplete+ plugins. Then it remains only to type the first letters of the file / directory name, after which the plugin will offer options for substitution.

• VS code: AutoFileName
• atom: autocomplete + path suggestions

Linters

The modern development process is unthinkable without automation. If something can be automated and shifted to tools, it's worth doing. There is nowhere without all kinds of linters in the frontend, so when working on the next project, you need to immediately take care of connecting solutions like ESLint, HTMLHint, CSSLint,<твой_линтер>. Linters control the style of writing code and in case of a discrepancy with the config, they will instantly point out errors.

Linters are especially useful in team development, when the chances of getting a "motley" code increase significantly. Need examples? Please! Between JS-developers there is a constant dispute about the choice of quotes. Some are adherents of single, others are double, and still others support the idea of ​​inverses. Linters will help achieve uniformity and notify a developer who has gone astray in time.

Continued available to members only

Option 1. Join the "site" community to read all the materials on the site

Membership in the community during the specified period will give you access to ALL Hacker materials, increase your personal cumulative discount and allow you to accumulate a professional Xakep Score rating!

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

Material Theme

The most epic theme for Visual Studio Code:
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

auto import

Automatically finds, parses and completes the names of methods and events for all available files. Supports Typescript and TSX.
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

import cost

This extension will display in the editor the size of the imported package in one line with the corresponding method. The extension uses Webpack with the babili-webpack-plugin to detect the import and estimate its size.
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Indent-Rainbow

A simple extension that makes indentation more readable. https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

IntelliSense for CSS class names in HTML

A VSCode extension that automatically completes the CSS class name for the HTML class attribute based on definitions found in your workspace or external files referenced by the link element.
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

SVG Viewer

An easy way to preview SVG.
https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

Prettier - Code formatter

Can't live without it - VSCode package for JavaScript/TypeScript/CSS formatting using Prettier.
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

React Native Tools

Hints, debugging and built-in commands for React Native.
https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

Sublime Text Keymap and Settings Importer

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings This extension allows you to use Sublime Text 3 hotkeys in VSCode. Try it out by opening the console with the keyboard shortcut: cmd ⌘ + P - Mac ctrl + P-Windows
In this console, you can quickly jump to files, and if you add the > symbol before the search string, you can search for actions such as switching the built-in terminal, installing an extension, and so on. Very handy for those of us who are used to the ST3. ?

npm Intellisense

A VSCode plugin that automatically completes npm module names in imports.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

lit-html

Adds syntax highlighting and HTML markup support inside JavaScript and TypeScript strings, as used in lit-html and other frameworks.
https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

highlight-matching-tag

This extension is intended to highlight paired opening or closing tags -  functionality that is not present in VSCode but should be built into the editor out of the box.
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

GitLens - Git supercharged

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens This extension reloads Visual Studio Code's built-in Git capabilities. It provides a visual representation of the authorship of changes in Git, as well as making it easier to navigate through repositories and allows you to track the history of changes to files or branches, use code comparison commands, and much more.

Git Project Manager

Git Project Manager (GPM) -  is a Microsoft VSCode extension that allows you to open a new window based on a git repository directly from VSCode.
https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager

Git History

View git logs and file change history and compare branches or commits.
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

File Utils

Convenient way to create, duplicate, move, rename and delete files and directories.
https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

Bracket Pair Colorizer

A custom extension for coloring parentheses. Extremely useful when dealing with a lot of callbacks.
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

color highlight

This extension highlights CSS/web colors found in your document.
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

CSS Peek

Jumping to CSS properties of identifiers (id) and classes directly from HTML files. Supports switching between files and fast transition from one to another.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Debugger for Chrome

A tool for debugging JavaScript code or any other code in the Chrome browser.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Quokka.js

Executes JavaScript code in the console in parallel as you write it. (Useful for quick demos).
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Trailing Spaces

Instantly highlights and removes trailing spaces.
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces#user-content-installation

TypeScript Hero

https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero This extension is useful for anyone who writes TypeScript and wants VSC to handle the imports for them.

WakaTime

Metrics, insights and time tracking automatically generated based on the statistics of your programming work.
https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

Vetur

Vue support for VSCode
https://marketplace.visualstudio.com/items?itemName=octref.vetur

code runner

Run a piece of code or an entire file in multiple languages ​​at once.
Thank you for reading this article! Follow the link on twitter for more VSCode extensions. Do you know any other useful plugins that are not mentioned here? Please write them in the comments❤ https://twitter.com/wesbos/status/907347014823923714 Article translation: “✨

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

Like most modern IDEs, VSCode has many additions 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 gives you the ability to preview the result of the execution of a particular piece of code, giving the results of the execution of functions and the calculated values ​​of variables. The extension is easy to set up 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 and id definitions in CSS file. To do this, you need to right-click on the selector in your HTML file and select Go to Definition(Go to definition) or Peek definition(See the definition).

HTML Boilerplate

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

Prettier

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

color info

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

SVG Viewer

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

TODO Highlight

This add-on allows you to put labels in unfinished places in the code, which simplifies the project. By default, only labels are set. TODO(finish) and FIXME(fix), but you can also create your own label types.

Fonts with icons

An extension that adds 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 work 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 cast the selection to upper and lower case only. Via Change Case, you will get access to a large number of registers (serpentine, camel, etc.).

Regex Previewer

Add-on that allows you to work with regular expressions. Regex Previewer applies a regular expression pattern to any open text file, extracting 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

Enable Live Server for .html or .htm files:

Enable 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

Support for Sass syntax: indentation, autocomplete, and more

Compiles SASS / SCSS files to CSS in real time

Press to turn on Watch Sass in the status bar

What does the Live Sass Complier include:

1. select 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 compatible live server
5. setting up automatic insertion of vendor prefixes
6. And so on

Highlighting tags - opening and closing

Tag highlighting can be customized. My setup:

"highlight-matching-tag.leftStyle": ( "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" ) , "highlight-matching-tag.rightStyle": ( "borderWidth" : "2px 2px 2px 2px" , "borderStyle" : "solid" , "borderColor" : "yellow" , "borderRadius" : "5px" ) ,

Highlighting web colors in the editor with the appropriate color

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

When changing 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:

"auto-rename-tag.activationOnLanguage": [ "html" , "xml" , "php" , "javascript" ] ,

8. Auto Close Tag

Tag auto-closing

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

"auto-close-tag.activationOnLanguage": [ "php" , "javascript" , "javascriptreact" , "typescript" , "typescriptreact" , "plaintext" , "markdown" , "vue" , ​​"liquid" , ]

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

"editor.fontLigatures" : true , "editor.fontFamily" : "Fira Code" , "editor.fontWeight" : "100" ,

11.Apache Conf

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