6 VS Code Extensions To Boost Your Web Development
If you are into web development, chances are you have come across the most popular IDE, Visual Studio Code.
From the hundreds of VS Code extensions available, here are a few that will help you accelerate your web development process.
1. Code Snippets
Code Snippet extensions allow you to write an entire piece of code while using abbreviations.
For example, while working on React, a standard piece of code is creating a functional component. Instead of repeating the same lines of code repeatedly, an abbreviation like typing ‘rafce’ and pressing enter will inject the code snippet required to create a functional component.
The abbreviations are pre-configured with the extension you use. You can refer to those for whatever code snippet you need.
Some of the most commonly used code snippet extensions are:
2. Live Server
While working on bare JavaScript, HTML and CSS, reloading the page whenever you change your code becomes pretty annoying. So comes our lifesaver to the rescue — the Live Server.
To use it, install the extension, right-click on the HTML file you want to view and select ‘Open with Live Server.’
It will automatically spin up a live server in your default browser for the HTML file you want to view.
Now you can code at ease without refreshing the browser page every time you make some changes.
You are welcome.
3. CSS Peek
CSS Peek is an amazing extension that lets you go back and forth between your HTML and CSS files via class definitions or ids, just like JavaScript.
Press Ctrl and hover over the class string or id to view its definition. When you press Ctrl and click on the class string, it will take you directly to where the class definition is in your CSS file.
It saves a lot of time to find the classes manually in your CSS files while referring to them from your HTML files.
4. ESLint
ESLint is one of the most wildly popular extensions among web developers, and rightly so.
It highlights linting errors, gives you linting suggestions and also fixes the linting errors while you code. It eliminates the need for running any additional commands from the terminal.
You can also customize the linting rules as per your project, ensuring that you write functioning and quality codes.
5. Prettier
Prettier is an opinionated code formatter, i.e., it has few options to customize the styling of code. It enforces a consistent set of rules across the project, leading to uniform code styles.
You can configure Prettier to format your code on save, saving you from viewing unformatted code.
6. GitLens
GitLens gives you complete control over Git capabilities from VS Code. It comes with many features like viewing revision history, blames, annotations and code authors.
The Source Control Options allow you to do almost everything you would typically use Git for. You can view your changes, commit them, stash them, switch branches, etc., without typing Git commands in the terminal.
That’s the roundup of VS Code extensions for your next project.
Do you know of other VS Code extensions that have struck you as excellent? Please comment below and let us know. It might help someone else in their journey of web development.
Till then, happy coding!
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.
