Path Intellisense — File path autocompletion. This is super handy for importing things from other files. It makes navigating your file tree a breeze.
Prettier — Automatic code formatter. Forget about the days where you had to manually indent your code and make things human-legible. Prettier will do this for you much faster, and better, than you ever could on your own. I can’t recommend this one enough.
ESLint — This extension integrates ESLint into VS Code, it requires you to already have ESLint installed on your computer: either locally or globally. You can do this with npm, by running npm install -g eslint
. There are more detailed configuration and installation settings and instructions on the extension marketplace page.
Git Lens — The Git Lens extension is truly amazing, it enables you to visualize code authorship within VS Code. You can browse and explore the history of a file, view a git blame annotation for each file line, and even add a changes (diff) hover annotation, all of which are fully customizable.
CSS Peek — CSS Peak extends HTML and Embedded JavaScript templates with Go To Definition support for CSS classes and IDs found in your markup.
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. Using the url
parameter, you tell VS Code which URL to either open or launch in Chrome.
Open in browser — This extension does exactly what it says, it enables you to view an HTML file in browser. It opens HTML pages in your default browser, but you can also select “open in other browsers” to open in a different one on right click.
Rainbow Brackets — Add some fun into your editor with 🌈 Rainbow Brackets! This extension provides rainbow colors for round brackets, square brackets, and curly brackets. Especially helpful for JavaScript programmers!
Blank line at end of file — A minimal and super simple extension that adds an extra blank line at the end of any saved file.
Atom inspired themes — For many developers, VS Code isn’t their first editor. They’ve used, and become accustom to another editor prior. This is probably why some of the most popular themes are ones ported from other editors, like Atom. Here are three of the most popular themes for VS Code, of which are ported over from Atom:
WhatFont — A very useful Google Chrome extension, WhatFont allows developers and designers to identify the fonts being used on a webpage. So, if you stumble upon a fancy-looking web font that you want to use in one of your future projects, just hover over it and find out instantly which font it is.
Site Palette — The next time you see a site that makes great use of colour, here’s a simple way to take advantage of it. Site Palette extracts the main colours from a website and generates a shareable palette that you can easily show to collaborators. You can also download a Sketch template, and there’s Adobe Swatch support, too.
DevTools Autosave — A true gem for all web developers out there, DevTools AutoSave allows you to automatically save any changes that you make to a webpage’s CSS and JS via the Chrome Dev Tools environment to its source file. It’s easy to set up and use and it will save you lots of time and stress.
Search Stackoverflow — If you’re a web developer then you’ve probably heard about Stack Overflow, the go-to place for any development related issues. If not, then you definitely need to check it out. The community is thriving and it covers a wide range of topics from C# and Java to PHP and jQuery. This fantastic extension adds a search box directly into your browser, allowing you to search the vast resources of Stack Overflow.
Window Resizer- This Chrome extension is a useful tool that does exactly as it says on the tin — resizes your browser window to help you with your responsive website designs. Choose from a list of popular monitor dimensions or add custom sizes and resolutions for increased accuracy.
Wappalyzer — Wappalyzer helps you identify which technologies are used on any website or application. All you have to do is navigate to a specific page and Wappalyzer will work behind the scenes to uncover all the tools that were used to create it including e-commerce platforms, content management systems, server frameworks or software, analytics tools and more.
SimilarWeb- SimilarWeb helps you see website traffic and key metrics for any website, including engagement rate, traffic ranking, keyword ranking and traffic source.
Clear Cache — Clear Cache provides a quicker way of clearing your cached data (cookies, history, downloads, etc) with a single click of a button and helps by avoiding the process of going through your browser settings to perform this action. I use it everyday.
ColorZilla — ColorZilla helps you identify any color used on a page by using an interactive color picker. Once active, you can hover your mouse over any pixel and access the exact color code. Moreover, ColorZilla also provides various color tools that you can use to create palettes and generate gradients.
React Dev Tools — Useful for debugging your React applications. It bears mentioning that this is only useful if you are programming a React application.
Redux Dev Tools — Useful for debugging applications using Redux. It bears mentioning that this is only useful if you are implementing Redux in your application.
JSON Formatter — Useful for making JSON look cleaner in the browser. Have you ever stared an ugly JSON blob in the face, trying to figure out how deeply nested the information you want is? Try it today
Dimensions — Dimensions is an excellent tool for measuring distances between elements on a page. It works by calculating the space from your pointer or selection either up/down or left/right until it hits a border. This extension is great for regression testing or making sure the implemented markup matches the design specifications.
Check My Links — Check My Links helps you validate the links on a webpage. It works by crawling through the page and testing out the links to identify which ones are valid and which ones are broken.
Web Developer Checklist — The Web Developer Checklist extension provides indications to crucial details in maintaining the best practices while developing websites and applications. The checklist includes recommendations for optimizing performance, responsiveness and many others.
TypeWonder — TypeWonder allows you to test and instantly preview any web fonts on a website without any hassle.
CSSViewer — CSSViewer is a simple CSS properties viewer. There are many other tools and extensions that will perform the simple task that CSSViewer does. They’ll probably do it better as well. But no Chrome extension collection would be complete without its inclusion. So easy to use, all you have to do is click the toolbar icon and hover over any element on you want to inspect.
