10 Visual Studio Code Extensions for Productive Web Development
Visual Studio Code is arguably the most popular, widely adopted, code editor for software developers. Visual Studio Code has a wide array of extensions, that extend the capabilities of the code editor.
As a software developer, one of the keys to increasing productivity is to maximize the capabilities of your code editor. Visual Studio Code has a great amount of functionality natively. Using the code editor without extensions may even suffice for your task at hand. However, software use-cases have become more complex and niche. In this case, extensions can help improve the quality of your development environment.
You may not need or use all of the extensions below. However, that is the beauty of Visual Studio Code being a general-purpose code editor. The use of each of these extensions will vary depending on your task at hand.
JavaScript (ES6) Code Snippets
JavaScript (ES6) Code Snippets is a very useful extension for any type of JavaScript. This includes TypeScript and major JavaScript frameworks.
The extension provides snippets for common tasks such as importing an entire module, importing a portion of a module, and requiring a package. Additionally, there is a wide array of snippets for quickly creating named exports, constructors, and many more common ES6 tasks. All snippets are automatically proceeded by a semi-colon.
You can find the snippets reference here.
ESLint
ESLint is a JavaScript linter that automatically highlights syntax errors in your JavaScript code. Visual Studio Code already has built-in Intellisense for native JavaScript. However, ESLint allows you to bring those linting capabilities to major frameworks such as Vue, Angular, and React.
ESLint highlights errors in your code and also can provide an automatic resolution to errors. Lastly, ESLint can be integrated into your version control workflow. This will ensure all contributors are following consistent conventions in the codebase.
Auto Close Tag
Have you ever used Visual Studio Code to create a static website with HTML? If so, you know that sometimes it is very repetitive writing opening and closing HTML tags for every element in your DOM tree.
The Auto Close Tag Extension solves this problem by automatically closing HTML (and XML) tags. After the tag has been added, your cursor will be in between the opening and closing tags. This is helpful for quickly creating child elements or adding text content. Self-closing tags such as <input /> are also supported by this extension.
Prettier
This extension is a must for software developers. I honestly cannot imagine writing JavaScript, HTML, or CSS without using Prettier. Prettier is a code format extension that enforces a consistent writing style such as setting a maximum line length, and wrapping code when necessary. Overall, Prettier is designed to make your code cleaner upon each save to a file.
Fast Arrow
Do you work with JavaScript ES6 arrow functions? If so, this extension will be very helpful for you. Fast Arrow provides a set of snippets that will create an arrow function automatically. Depending on the snippet you use, your cursor will appear in different areas of the arrow function.
Available Fast Arrow Snippets
fa — When using this snippet an arrow function will be created and your cursor will start in the body area of the function.
faa — An arrow function will be created. Your cursor will appear inside the parenthesis of the function so that you may specify any function arguments.
fai — An inline arrow function will be created. Your cursor will appear after the closing bracket of the function.
far — An arrow function with the predefined argument response . This snippet is very useful if you are working with Promises or fetching any data from an external API.
Rainbow Brackets
Dealing with larger JavaScript files can be very tricky. If you are working with functions that contain lots of opening and closing brackets (and parenthesis) you may become confused as to where a particular symbol (a function, if statement, etc.) begins and ends.
The Rainbow Brackets extension can alleviate the pressure of scouring through a function, looking for a matching bracket. As you go down a level of brackets in a particular function, sets of brackets will be a different color than the previous bracket set. This gives you a great visual indicator of the scope of a function or statement in your file.
Live Server
The Live Server extension allows developers to launch a local development server through Visual Studio Code. It is as easy as clicking the Go Live button that appears in the bottom-right corner of your editor after installation. Additionally, the server has a live reload functionality. This means that once you make a change to a file and save it, your webpage will reload automatically.
This extension is very useful to developers who may not want to set up a local server using Node.js, or Python and only want to work with static web files.
Path Intellisense
As web developers, when working with HTML files we know that there will be a lot of other files (JS, CSS) we will load into our current file. This includes CSS and JavaScript files that may be in other directories in your project.
As your project continues to increase in size, it will become even more of a hassle to specify the correct path name when loading an external file. This is where Path Intellisense saves the day! Path Intellisense autocompletes file paths when loading a file into HTML or requiring a file in JavaScript.
There may come a time when you forget where a certain file is located. Why spend time searching for this file in your source code when Path Intellisense can do this for you?
Polacode
Have you ever wanted to create beautiful screenshots of your code snippets? You can accomplish this in Visual Studio Code by using the Polacode extension.
Polacode is in fact, polaroid for your code. Capture high-quality images of your source code & format your code with pretty fonts.
Once installed, your can press command + shift + p on Mac or ctrl + shift + p on Windows to open the VS Code command palette. Type polacode into the text input that is prepended with >that appears in your editor. Select the first option. A second window will appear next to your source code. Next, go to your file and highlight the snippet that you would like to capture and paste into the Polacode window. Lastly, you can resize the image and save it to your computer.
GitLens
Native VS Code comes with Git version control functionality. However, GitLens is an extension that can enrich the version control experience. GitLens is perfect for larger projects with contributions from many developers.
At a glance, you are provided with some useful version control information on each line of your file. You can see who was the author of a particular line in a file. This gives all contributing developers knowledge of who added what. Developers receive a direct line of communication in the event of a conflict in the code.
One good recommendation is to add the line below to your VS Code settings. This will remove distracting annotations that appear on each line.
"gitlens.currentLine.enabled": falseConclusion
In this article, we reviewed 10 of the best Visual Studio Code extensions that increase your productivity while developing web applications. There are many more extensions that cover a great number of use cases. This shows the beauty of Visual Studio Code as a general-purpose code editor.
Thank you for reading my article!
If you enjoyed learning about tips and tricks to web development, please subscribe to my blog!
Also, follow my Instagram page where I teach others how to code!
