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
- Visual Studio (Community)
- Visual Studio Code
- Angular IDE
- Cloud9 (Online only)
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!
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?)
Download and install VSCode
Open the editor and look at the left side for this icon
Or press Ctrl+Shift+X
Type in Shan.code-settings-sync
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?
Type Download Settings
It will open your browser, sign into github and create a personal token (save this somewhere)
copy the token
It will ask you for a gist ID
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?
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.
Open your project folder and make sure you have git enabled (if not git init)
Press F1 type git flow (you want to init git flow)
F1 -> Checkout Develop (Always make sure your on develop when you use git flow)
F1 -> Feature Start
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