Vscode the Editor of My Choice

illustrations illustrations illustrations illustrations illustrations illustrations illustrations

VSCode the editor of my choice.

So after I started Code Institute I was researching a lot of editors there are loads of choices some are free and some are not.

As a full stack developer mainly working with Typescript I was in need an IDE that would do it all.

There are some great editors out there and I tested the following

  • Atom
  • Visual Studio (Community)
  • Visual Studio Code
  • Angular IDE
  • Webstorm
  • IntelliJ
  • Cloud9 (Online only)
  • Sublime

So after testing a lot of these I found that Atom & Visual Studio Code

An honourable mention in this list was Sublime, but sadly it was a lot of hassle these days to get extensions and plugins.

I selected VSCode and the reason was it has everything I need, its fast as Atom. But I like the look and feel more. And it’s better when it comes to typescript support!

So the setup I have looks like this

Simple minimalistic and has everything I need.

Now with any editor, it’s setting up for different languages, the environment (if it’s JS, Python, HTML, SCSS, CSS, Typescript) Yeah it was a lot.

Now on top of that, i also use a work laptop and we all hate setup two different things and all I want is to have things in sync!

So after more research, i came across an amazing plugin Settings Sync so huge credit to Shan Khan for making this.

A simple term is it syncs everything to your GitHub gist and you can then upload and download as you please on any device as long as you have the gist code.

Try it yourself

So for those that wanted to try visual studio code and some of the amazing plugins I use to make my life simple, this is what you need to do to get started (remember I said 1,2,3?)

  1. Download and install VSCode

  2. Open the editor and look at the left side for this icon  
    Or press Ctrl+Shift+X 
    Type in  Shan.code-settings-sync

  3. Click install and reload

Alright that was simple, now there is 1 button on the keyboard that will be your amazing friend using visual studio code and that is F1

It’s your command palette, you can do ANYTHING, find anything by just typing?
Need to use git. Type git.
Want to push your code with git? and tired of using command line sure git push ENTER.

Once you have this plugin installed I will share my gist code with you.
This is a collection of all my add-ons, and themes I use, to support the following.

To give an overview of things I have installed.

  • Angular - all this is for highlighting and making things with angular simpler, don’t use angular you can simply just click the cogwheel on it and uninstall and disable it.

  • Git History, Git Lens, Gitflow, Git ignore
    History makes you able to Press F1 Type `log` and see your commits even revert them
    Lens shows when your coding different things with git when ti was committed and more info with it.
    Gitflow - More about it further down
    Git ignore - I hate finding a file and remember the path, now I can simply right-click a file to ignore it unignore it, even ignore the whole folder or extension (so ignore all .dll files as an example)

  • Live Server - you have your own life reload the server. In an HTML page bottom right click go live and look at your page, you do a code edit it’s automatically reloaded.

There are a few others as well, but those are the mentions.

How do I do this then?

  1. Press F1

  2. Type Download Settings

  3. It will open your browser, sign into github and create a personal token (save this somewhere)

  4. copy the token

  5. It will ask you for a gist ID

GISTID: B18a80bfb46ce84b68a087f6a08a6d79

That’s it bottom left corner it should start the download, once it’s done it will give an output.
Press F1 again type Reload

Your editor is ready.

What about Git?

One of the big reasons I use VScode is the integrated terminal and integrated support for NPM and Git.

So how do you do this?

  1. Make sure you have git installed you can install it from here (Just keep press next until installed) want NPM too here you go

  2. Watch this video for all the features. https://www.youtube.com/watch?v=6n1G45kpU2o of git.

What about Git Flow?

Git flow is an workflow i discoverd at work and a colleague told me about.

Rule of thumb.

Master Branch -> Finished product do not do anything with it unless product is finished
Develop Branch -> your main branch where all your developers merge their stuff into once a feature is finished.
X Y Z Feature Branch -> A certain feature, lets say you are making a navbar well name it navbar. Once this is completed your merge it into develop, less bugs and it makes you focus on the task, you can have multiple features.

Well it has it’s benefits, you focus on making that feature, and once it’s done you can make a new one.

It has less clutter and it looks better, if you want to start something else, you can always just merge this feature into develop without close the feature and make a new one.

Now how does this come in with this extension?

One thing i wanted was the easy flow of things, making branches merging, pulling all those takes time so with the git flow extention it makes it a breeze and here is how.

  1. Open your project folder and make sure you have git enabled (if not git init)

  2. Press F1 type git flow (you want to init git flow)

  3. F1 -> Checkout Develop (Always make sure your on develop when you use git flow)

  4. F1 -> Feature Start

  5. Do your code and everything once finished F1 -> Feature Finish

Gitflow will warn you if develop and things are not commited so then it’s just to checkout commit go back and finish it.

Any problems please comment below.

Video is here 

Published on Dec 09, 2017 by Simen Daehlin