Visual Studio Code (VS Code) is arguably the best Code Editor to use in 2018. It has a whole bunch of extensions which can be downloaded and installed from the VS Code Market Place. There are extensions for debugging code, formatting code, keymaps, development technologies, IDE themes, code linters, code snippets, and many other categories. In this article we are going through some of the extensions you need to have in your arsenal if you are a Frontend Developer.
IntelliSense for CSS class names in HTML:
This extension does one simple Job, scan your current workspace looking for CSS Classes and then provide auto-completion for the same classes inside your HTML templates. Doesn’t matter whether the classes are library classes like Bootstrap or your own custom classes, this extension will find them and provide auto-completion for them under the class attribute of your HTML elements. It is simple, neat and works out of the box. You can learn more about this extension here.
Debuggers for Chrome, Firefox, and Edge:
If you are a web developer, you obviously need a browser to test your functionality. These are three extensions that basically do the same thing but on different browsers. They enable you to test your application functionality. The neat trick is that debug information is sent directly back to visual studio code console instead of the browser’s console. On top of that, you can add breakpoints to your code, and step through the execution of your code. These are important tools to allow you to test your app compatibility with multiple browsers.
You can find more details about the extensions in the links below:
TSLint Extension (Typescript Lint):
This extension integrates TSLint into VSCode. TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, functionality and syntax errors. This extension brings all this goodness to VSCode. For more information about TSLint, visit the official Github repo here.
The extension also provides some important VSCode commands such as Auto-Fixing of problems highlighted by TSLint among others. You can learn more about this extension here.
Prettier – Code Formatter:
Every developer wants their code to look clean, organized and be consistently formatted. Clean, organized and consistent code makes it easy to read and follow and even prettier to look at. That’s the goal of this extension.
Another very simple extension that I find extremely useful. In your package.json file, if you select or hover on a package version number, it will automatically pull the latest version of the package from NPM. This gives you an option to easily know whether you are using the latest version of an NPM package.
That’s what I use it for mainly, but it can do more than that. The extension will validate your package.json file for errors, quickly run NPM scripts and stop a running script. For those of you who use yarn, some of the features may be unavailable. You can learn more about this extension here.
GitLens — Git supercharged:
At the time of writing this article, this extension has close to 9 million downloads on VS Code marketplace. You get the idea! It’s a go-to extension when it comes for version control for most developers using VS Code.
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more. You can learn more about this plugin here.
This is a simple yet useful extension whose goal is to provide filename Intellisense inside your code. It relies on the TsConfig Base URL to map the root of your project. It enables you to navigate through your directories in your project until you get to the file you want. There isn’t much to say about this extension considering the name is quite self-explanatory. You can learn more about this plugin here.
This cool extension by Ritwick Dey creates a development local server for your static and dynamic pages. A go-live button appears on your taskbar so you can seamlessly run your code as a development server. It also comes with a shiny feature: Live Reload which reloads the page as soon as you save your work. Pretty awesome. Know more about this extension here.
Those are some of the VSCode extensions I use to improve my Web Development Workflow. If I missed any extension from this post, or you know of any awesome extension not covered in this article, please let me know in the comment below and I will be happy to add it to this list. Thank you for getting this far, don’t forget to share if you found this helpful.