Visual Studio Code Preferences for UI Developer covering theme and extensions

Abhishek Kumar
3 min readJul 21, 2018

--

Developing front end application for many developers is like the easiest code development (definitely not belonging to the front end community). The table is same for a Front End Developer if anyone tell him that the person code only in HTML. But, one thing is certain that front end is not the easiest code development with the growing technologies. And who thinks the opposite must not have encountered the JavaScript well. ES5 is here to mess up with your object-oriented knowledge obtained from other programming language. With the growing front-end, ECMAScript has released its version 6 which supports classes, helping developers from object oriented background to try and code in JavaScript with their same object oriented skills.

Let’s not divert from the topic.

I develop Angular Applications, and use the Visual Studio Code as my IDE. And it’s amazing because it’s the coolest IDE of time. You might be surprised
(i was), that visual code is created by the same person who created
Eclipse - another cool IDE for time.

So, while developing Angular application, i need -

  • IDE intellisense saves time while developing bigger projects.
  • Extensions some cool extensions for the IDE.

We all know which IDE to use now :)
So, i will talk about my extensions that i use on daily basis-

1.Beautify
to format your code with different extension files, mainly you will go for TypeScript, JavaScript, css, html extensions.

2. Guides
guide lines helps to keep track of open close parenthesis,etc and very helpful in case of markups.

3. Path Autocomplete
completes your file imports or any other file location.

4. Live Server
automatically reloads the URL, don’t have to do it manually as it is very irritating sometimes.

5. Material Icon Theme
provides a whole set of icons, that make your folder structure cool. You can set settings for material icons in visual code user-settings file. Its very cool, i keep my icons opacity 0.5, helping me while hover over the icons.

Lastly, you need a good theme to work as you will be devoting lot of your eyes to screen so it’s good to use a theme that is good for your eyes, I recommend the dark theme. Recently i studied that ‘Cobalt 2’ is the most recommended visual studio theme as its good for eyes.

Cobalt Theme

But everyone has favourites, mine is Monokai Pro.

Monokai Pro

My visual studio code, user-settings file

There are lot of extensions out there which can be used. For example, we can use linters for writing the correct code or according to the semantics of the language. You can argument over my choices here but at the end of the day it’s you who are going to use the stuff for writing the code.

Ps : please let me know about your extensions, and other cool stuffs regarding visual studio code.

--

--