Hello everyone, my name is Vansh and I'm a frontend developer. In this blog post, I would like to share 10 VS code extensions that every frontend developer should use. The purpose of using these extensions is to write faster, cleaner, and more consistent code. Let's Jump in!
1. Live server
It's irritating to save changes in the editor and then refresh the browser to see changes, right? thanks to live server , it enforces auto-reload and ensures that your changes are rendered immediately you save your work. It creates a local development server right in Visual Studio Code to serve your static and dynamic sites.
2. Mithril Emmet
Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow . Emmet allow us to generate HTML code much quicker and easier than writing them out ourselves. This can greatly increase your speed in development.
3. ESLint
It Integrates ESLint into VS Code. If you are new to ESLint check the documentation.
It allows you to stick to standard practices like indentation and positioning.
4. Prettier
When writing code, a lot of time goes into formatting. Thanks to Prettier, it automates the task for you, removes original styling and puts on the consistent code style which makes code much more readable. It automatically tidy up the code every time the changes are saved.
5. Bracket pair colorizer
It colourizes and gives same colors to your opening and closing brackets.
It sometimes happens that at the end of your file or function, you have more than one or two closing brackets, and it’s not so easy to find the correct one of them. Use Bracket pair colorizer to know where your bracket opens and closes.
6. CSS Peek
CSS Peek helps to quickly find and check styles applied for selected class or id. It’s beneficial for developers who don’t like to switch between different files or split the screen or like to jump between HTML and CSS Back-and-forth.
7. JavaScript ES6 Code snippets
It provides Code Snippets for your JavaScript code and uses ES6 syntax.
Snippets are handy and can help to prevent lots of spelling bugs and can make coding much faster. To speed up your Javascript coding, use Javascript code snippets. It also supports TypeScript and JSX files.
8. Simple React snippets
As mentioned above, Snippets are handy and make coding faster. This extension is a collection of day-to-day React snippets and commands.
9. ENV
It is a simple extension, it adds formatting and syntax highlighting support for env files.
10. Debugger for Chrome
The Debugger for Chrome extension adds the Google Chrome browser debugger into your editor. It allows you to launch an instance of Chrome navigated to your app, or it can attach to a running instance of Chrome.
It supports setting breakpoints, stepping, debugging scripts, and more. If you are tired of switching from files in the code editor to debugging console in the browser, it’s a great plugin for you.
Top comments (3)
Hey, awesome article. Can you make a serie about that ? It will be great !
agree 👍🏽
Hey , thank you so much, I use few more extensions as well. I can write about them in my next blog post or you can contact me through email , I'll send you.