VSCode Extensions That Ease JavaScript and Vue Development

Today there is a sufficient amount of development tools with support for the JavaScript language and the frameworks based on it. The question of choosing a specific tool is out of this article, right there I will try to describe my user experience with Visual Studio Code and tools that are designed to make life easier for JS developers, in particular those who use Vue.

There are a huge number of plug-ins in the VSCode extension store, below will be given the most convenient ones for web development.

HTML & CSS

Layout and writing styles is often a monotonous task, so the following extensions can facilitate and speed up your work:

• Auto Close Tag and Auto Rename Tag - simple and convenient extensions, to simplify working with layout, have support for single-file components Vue.
• CSS Peek is a simple extension that adds the ability to quickly view a rule or navigate to it.
• Color Info - allows you to view detailed information about the color, has a good stock of settings.
• Color Highlight - adds a color display in the form of a border, when detecting the color encoding in the code.
• IntelliSense for CSS class names in HTML - analyzes the working environment to add the ability to autocomplete CSS classes.

Javascript

• Debbugger for Chrome - an extension to simplify debugging directly from the code editor, works with everything that Chrome DevTools has.
• JavaScript (ES6) code snippets - a set of snippets for JS, greatly speeds up development.
• JSHint is an extension for hints on the design and organization of JS code, has flexible settings.
• ESLint - linter for JS with flexible settings.

Vue

There are not many useful extensions to work with Vue, below are some of the most useful ones:

• Vetur is a complete set of the most necessary additions for working with vue, such as snippets, syntax highlighting.
• Vue Peek - adds a convenient transition to vue components.

Git

VSCode has support for working with git out of the box, but the built-in functions are not always enough. Below are extensions that will make working with git a bit easier:

• GitLens is probably the most well-known extension for working with git, which adds many opportunities to view git information.
• Git History - adds the ability to easily view the history of changes in git, has a fairly user-friendly interface.
• Git Indicators is a simple git activity indicator in the lower VSCode tray.

Work environment and development process

For productive work, it would be nice to have assistants in the form of add-ons highlighting simple mistakes, advising writing style and other handy tips / actions. Try the following extensions:

• Bracket Pair Colorizer - adds half-light for the brackets surrounding the code blocks, facilitates the perception of the code with deep nesting, visually separating the code.
• Beautify - in my opinion the most convenient extension for automatic code styling, for more information on the extension, please click here.
• Live Server is a very useful extension that allows you to quickly launch your live server, for example, for layout.
• Import Cost is an excellent extension that displays the size of the imported module, allows you to select in more detail the imported pieces of the module without resorting to bundle analyzers.
• NPM Intellisense - autocomplete for npm modules.
• Open in browser is a simple extension that adds an opening point in the browser.
• Path Intellisense - autocomplete for file names and their location.
• Settings Sync - after finishing the installation of the necessary tools and environment settings it is convenient to save the config, this extension will allow you to synchronize everything in git gist.
• Sort lines - a simple way to organize the sorting of lines in the code according to specified conditions.
• TODO Highlight is a simple extension for highlighting keywords like TODO, FIXME.
• Trailing Spaces - highlights extra spaces.
• VS Live Share - many faced the problem, when it took a very long time to explain to a remote developer, where and what was wrong, this extension simplifies life in such situations, allowing you to do a live demonstration, supports multiple users, and forwards the running environment of the client machine.
• Visual Studio IntelliCode - automates routine tasks for developers in languages ​​such as Python, TypeScript / JavaScript, and Java.

Editorial design

• Darcula Theme - the most successful design in my opinion, I can also advise Monokai Pro .
• vscode-icons - the most successful icon pack for VSCode.

It may also be interesting.

• GraphQL for VSCode is a kind of intellisense for GraphQL, the most convenient extension, under the soot a lot of useful, more details on the link.
• Instant Markdown - live preview for markdown markup.
• Paste JSON as Code is a convenient extension that generates a type model from JSON data. Supports TypeScript, Python, Go, Ruby, C #, Java, Swift, Rust, Kotlin, C ++, Flow, Objective-C, JavaScript, Elm, and JSON Schema.
• Rainbow CSV - backlight for CSV files.
• Regex Previewer is a very useful extension for regulars previews.
• SVG Viewer - SVG Viewer .

I hope that this list will be useful to you, I will be glad to add.