Wednesday, July 20, 2016

Microsoft VScode, new beast in town

Javascript has emerged as a non serious language, a client side language that was meant for just validating the client side and showing the errors as and when required. But from past few years it is emerging more of a serious language and also is getting more and more advanced as well as more matured.

While competing with already available, settled and matured languages like Java, Php and .Net the requirement for an IDE is must. Also its becoming a prominent factor for the success of any language that how good the support of it is available via IDE.

I still remember my old college days when people say that coding in .Net is so much fun then in Java since in my college using any IDE for Java is strictly prohibited. In a way or the other it was pretty good since using the text editor to code gives you more insight view of the language. But yeah when the language roars over newbie, IDE is the only saviour.

Some of the things that I feel for an IDE to provide includes better RAM management, ease of use and one of the most important being light in nature both in case of speed and weight, :D.

If you have worked on the IDE's like Eclipse, Netbeans, Webstorm and .Net Visual Studio you might have faced the issue where your whole PC gets slows down and not able to even play a simple song in VLC.

For all those guys who don't need hell lot of features rather just needs an editor that gives you features of an advanced editor with very few but important features like plugin, github and last but not the least lint support. For all those Microsoft VsCode editor is like a blessing.

It has almost everything that you thinks of.

Some of the most promising features are:
  1. It is very small in size, just 30-35 mb
  2. It is light in nature
  3. It supports github by default
  4. Supports plugins
  5. It supports linting, tested javascript linting via a plugin called jshint, can be found here
  6. Last but not the least, and most imoprtant it is FREE, yes you heard it right it is free.
I have been using this IDE and really found it quite fascinating to work with.

Here is the view that you get when you first open the VsCode after installation.

The support to github comes by default.

One more feature which I really liked is the ability to create snippets, that means you can create short hands that on being used expands itself and saves your lot of time. 

Let me tell you how a basic snippet in case of Javascript can be created. Lets think you want to create a snippet for :
  • console.log(""); with the shorthand of cl
that means when you type cl and press enter, it will be expanded in to console.log("|"); and your cursor is being blinking at |

For this you have to follow: 
  1. open File->Preferences->User Snippets->Select Javascript
  2. It will open a file named javascript.json. Add the following into that file.
       "Print to console" : {
          "prefix" : "cl",
          "body" : [
          "description" : "Logs output to console"
       //more snippets can be added here
  3. In the above Json, 
    • Print to console -> name of the snippet
    • prefix -> shortcut
    • body -> by what prefix is going to be replaced with
    • $1 is the first position of the cursor after the snippet is expanded, you can keep as many pointers and the cursor will follow them via ENTER or TAB
  4. One more feature is that code snippet in VsCode supports the placeholders as well like in case of:
       "Print to console" : {
          "prefix" : "hello",
          "body" : [
              "Hello ${name:Enter your name}.",
              "Goodbye ${name}!"
          "description" : "Logs output to console"
       //more snippets can be added here
    when we type hello and press enter it gets changed to:
  5. As soon as you start typing a string the place holder in line number 3 starts updating, these helps a lot while you have to do the same stuff again and again as in case of loop this might be useful like:
       "For Loop": {
             "prefix": "for",
             "body": [
                 "for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
                   "\tvar ${element} = ${array}[${index}];",
             "description": "For Loop"
I hope you all liked this post do share comment like and subscribe, happy coding and keep smiling, thank you.

No comments:

Post a Comment