With over 136k stars on GitHub, Visual Studio Code is one of the most popular source code editors available. Its popularity stems from its lightweight nature, flexibility, open-source nature, simplicity, and extensibility.
Speaking of extensibility, VSCode has thousands of extensions you can install to boost your developer productivity and save you time on repetitive tasks.
They're all free and available in the Visual Studio Code marketplace. This article examines ten powerful Visual Studio Code extensions that greatly enhance the web development experience. Each one comes with an example usage and installation link.
1. Prettier
Prettier is a useful tool that formats your code automatically using opinionated and customizable rules. It ensures that all of your code is formatted consistently and can aid in enforcing a specific styling convention in a collaborative project involving multiple developers.
The Prettier extension for Visual Studio Code brings about a seamless integration between the code editor and Prettier, allowing you to easily format code using a keyboard shortcut, or immediately after saving the file.
Watch Prettier in action:
Install: Prettier — Code formatter — Visual Studio Marketplace
2. JavaScript Booster
This extension upgrades Visual Studio Code with code actions to perform common refactoring tasks that occur when programming with JavaScript.
They are dozens of code actions that it can carry out, including: replacing an if...else statement with a ternary operator:
splitting a declaration and initialization into multiple statements:
and converting a function to an arrow function:
Install: JavaScript Booster — Visual Studio Marketplace
3. ESLint
ESLint is a tool for detecting and correcting errors in JavaScript code. It addresses both code quality and coding style issues, assisting in the identification of programming patterns that are prone to producing tricky bugs.
We can view details on the error by hovering over the red line:
We can also use the Problems tab to view all errors in every file in the current VSCode workspace.
Install: ESLint — Visual Studio Marketplace
4. GitLens
GitLens is another powerful extension that helps you take full advantage of Git source control in Visual Studio Code.
GitLens displays views containing essential repository data and information on the current file, such as file history, commits, branches and remotes.
Place the cursor on any line in the editor and GitLens will display info on the latest commit where the line was changed:
Install: GitLens — Git supercharged — Visual Studio Marketplace
5. Live Server
The VSCode Live Server extension launches a local server that serves pages based on the contents of files in the workspace. When an associated file is changed, the server will automatically reload.
In the demonstration below, a new server is quickly launched to display the contents of the index.html file. Modifying index.html and saving the file immediately reloads the server. This eliminates the need to manually reload the page in the browser whenever you make a change.
As you saw in the demo, you can easily launch a new server using the Open with Live Server item in the right-click context menu for a file in the VSCode Explorer.
Install: Live Server — Visual Studio Marketplace
6. CSS Peek
The CSS Peek Extension lets you quickly view the CSS style definitions for various class names and IDs assigned in HTML.
There are three ways to use CSS Peek:
- You can hold down the
Ctrlkey and hover over a class name or ID to peek at its definition. - You can use a keyboard shortcut to open a persistent definition window that displays the CSS definition of a class name or ID.
- You can use a keyboard shortcut to navigate to where the definition is located in its CSS file.
Here is a demonstration of all these methods:
Install: CSS Peek — Visual Studio Marketplace
7. Intellisense for CSS Class Names in HTML
This extension can work hand in hand with CSS Peek, it provides code completion for the HTML class attribute from existing CSS definitions found in the current Visual Studio Code workspace.
You’ll appreciate the benefits of this extension when using third-party CSS libraries containing hundreds of classes.
Install: IntelliSense for CSS class names in HTML — Visual Studio Marketplace
8. JavaScript (ES6) Code Snippets
As the name suggests, this is an extension that comes fully loaded with heaps of time-saving code snippets for JavaScript, in ES6 syntax.
Here’s a demo where the imp and imd snippets from this extension are used to quickly import two modules with ES6 syntax.
Install: JavaScript (ES6) code snippets — Visual Studio Marketplace
9. Visual Studio Intellicode
Artificial intelligence is increasing worker productivity in a variety of jobs, including developers. IntelliCode is a tool that generates intelligent code completion recommendations based on the current code context. This is accomplished through the use of an AI model that has been trained on thousands of popular open-source projects on GitHub.
When you type the . character to access an object method or fields, IntelliCode will suggest a list of members that are likely to be used in the present scenario. The items in the list are denoted using a star symbol, as shown in the following demo.
IntelliCode is available for JavaScript, TypeScript, Python, and a number of other languages.
Install: IntelliCode — Visual Studio Marketplace
10. VSCode Icons
In Visual Studio Code, icon packs are available to customize the appearance of various file types. They improve the application's appearance and make it easier to identify and distinguish between different types of files. VSCode Icons is one of the most popular icon pack extensions, with over 11 million downloads and a large collection of icons.
It goes beyond file extension differentiation, to provide distinct icons for files and folders with specific names, including package.json, node_modules and .prettierrc.
Install: vscode-icons — Visual Studio Marketplace
Conclusion
So far, we've covered 10 essential extensions for web development in Visual Studio Code. Install them right away to increase your developer productivity and improve your quality of life as a web developer.
Post a Comment
Post a Comment