I’ve always known that there is a shortcut for almost everything in this life. No, that doesn’t make me a cheater, but I like to think of me as more of an open minded person.
Let me first state that I’m a time-management obsessed person. I come to work early so I can leave and go to the gym and still have some time to read a book or an interesting article.
I strive to be as productive as possible at work, especially as a web developer, so I choose to spend most of my time implementing awesome features for our project in Visual Studio Code.
Visual Studio Code is my favorite integrated development environment (IDE) for Web Development. It is open source and highly customizable with the support of a live community. The most amazing thing about Visual Studio Code is the abundant amount of extensions, all available to help you be more productive.
Here are a few that I personally recommend, and use them day-to-day as a front-end web developer with Angular.
IDE / UI Related
- Material Theme – If you need to change the default theme to an alternate theme
- Material Icon Theme – The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code. You can see few icons in the image below:
- angular2-switcher – You can easily navigate to typescript (.ts), template (.html), style (.scss/.sass/.less/.css) in your project.
Ex: Go to the definition of variables/functions when you press F12 within html.
I discovered this particular extension recently and it instantly has become one of the most used extensions not only internally within my company, but also within the entire Web Community.
- CSS Peek – This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs), which is found in strings within the source code.
Intellisense, Code Snippets and Linters
- TSLint – TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.
Within our internal team, it’s the first of multiple mandatory extensions to install. If it’s discovered you haven’t installed it, you have to buy cookies for the entire team! What a tasty reward for us rule-followers! 🙂
I’ve highlighted a few examples of TSLint hints below.
- Angular Files – This extension allows you to quickly scaffold angular 2 file templates in VS Code project.
Angular 7 Snippets – TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
This extension gathers TypeScript and Html snippets and code examples for Angular 2 ,4, 5, 6, 7 & 8 Beta. All code snippets are based on and follow the Angular style guide.
- Angular v7 Snippets – Adds snippets for Angular for TypeScript and HTML.
Bootstrap 3 Snippets – A set of Bootstrap 3 Snippets for Visual Studio Code. A very useful extension, especially when you’re using Bootstrap 3 grid system.
Path Intellisense – Visual Studio Code plugin that autocompletes filenames.
It’s just a life-saver. No more words needed.
- CSS Formatter – This extension adds formatting to CSS. (Good extension if you only need formatting for CSS).
SCSS Formatter – An extension for Visual Studio Code to format SCSS.
This extension focuses only on SCSS. Additionally it supports CSS.
- TypeScript Hero – For organize the imports.
- Better Comments – Helps you create more human-friendly comments within your code.
Note: The extension operates in two modes. It can launch an instance of Chrome navigated to your app, or it can attach to a running instance of Chrome. Both modes require you to be serving your web application from local web server, which is started from either a VS Code task or from your command-line.
- Live Server – Launch a local development server with live reload feature for static & dynamic pages.
- Turbo Console Log – This extension makes debugging much easier by automating the operation of writing meaningful log message.
- Numbered Bookmarks – This extension helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. All of this in in Delphi style.
For me, it was the first extension I was looking for. I was a Delphi developer at the beginning of my career and now, as a software developer I’ve been used to juming inside the same file to different code blocks. (ex: Declaration zone and the Implementation).
- Jasmine code snippets – This extension contains code snippets for Jasmine test framework. We use it on our projects internally as a mandatory extension, since it saves a lot of time.
- Code Spell Checker – A basic spell checker that works well with camelCase code. The goal of this spell checker helps with catching common spelling errors while keeping the number of false positives low. This is also another mandatory extension for our team – since English is not our native language.
How you can install these extensions
- In order to install extensions you need to have Visual Studio Code installed on your machine, if you don’t have it already, you can download it from here.
- Open the Extensions tab by clicking on Extensions in your left sidebar and use the search bar to search to get the extension you’re looking for.
I recently presented at a Web Community Share Knowledge session where I showcased these extensions and received very good feedback from industry colleagues. They’ve shared that these extensions are helping them to be more productive; allowing their work to be completed utilizing the latest industry best-practices.
While these extensions aren’t new, and have been utilized by many developers, I hope you’ll be able to benefit from the ease in quick coding and newly formed productivity these bring.
Latest posts by Andrei
- Visual Studio Code Extensions –Angular Web Development (and not only) - June 21, 2019
- Code Review – Are You Doing it Right? - December 18, 2018