Dummies guide to open source development with Visual Studio Code

People do love opensource development, and get some reputations. Its not all about developing an awesome software and get a lot of money from it, but you should share the knowledge and your ideas on a particular context and importantly let people to review your code, so that you will get a recognition and that will certainly help you to get recruited to a big company like Microsoft, Google even I say IFS.

Microsoft has released a Sublime text like, or I say Atom text editor like editor on Build 2015. They name it as Visual Studio Code, its absolutely free and how it differs from Visual Studio Community (which is also a free Visual Studio edition) is all you can do with a mouse is now can be done with keyboard and particularly the editor is available not only for Windows but also for Linux and Mac as well.

old pc

OK, let me assume you have a PC where you didn’t install any development tools in your PC and your OS is Windows. First download Visual studio Code from here. Install it. Though this is much enough, we are going to do OPEN SOURCE DEVELOPMENT right? so we need some good tools..

1) Install Git

Industry is shifting very quickly towards Git because of its distributed ability, wait, what is Git.. Git is a source code management system, using that you can easily manage your source code, track changes, make a test branch of your on going project to test new features, if they went wrong, you can easily rollback and its very useful when you code with a team. You might have heard of Github, that is a kind of a remote server to manage your source code and Git is installed in the local machine. Visual Studio Code has a built in Git functionality, so you need to install it and put its Bin to the PATH.

2) Install Nodejs

Nodejs itself a very popular tool used by non enterprise level developers to make quick and neat web apps (here neat means, loosely coupled and very low amount of boilerplate code) and more importently it comes with npm (node package manager). NPM’s main task is to manage the dependency in nodejs applications but people use it as a software center where they can download packages and tools necessary to develop, maintain and test the webapps. You can download Nodejs from here.

3) Install Yeoman

Yeoman gives the template for the apps we need. Developers call those templates as “Generators” they are files and folders with a maintainable folder structure. There are 1500+ generators available including the generators for Angular, Backbone, WordPress, Grunt and even for the ASP.NET. You can install Yeoman from your cmd.exe

npm install -g yo

This commands install Yeoman in your PC. If you need the description of the command, “npm” denotes, we are invoking the npm we installed previously and “install -g yo” are some arguments the npm gets. “install” says, make the system ready to install (or make a local copy of) a node package “-g” is a shorthand for npm that is equalant to “--global” that advises npm to global install the package. Global install means, the package will be installed in a common directory, something like user/local and non global installation means, you are installing the package on the working directory, finally “yo" denoted the yeoman package.

4) Install a generator you want to work

Now we are going to install the template with Yeoman. for that using cmd.exe go to your webapp workspace, you can get the list of generators from here. Say I want to make a Google Chrome extenstion so I can install this generator-chrome-extension by executing

npm install -g generator-chrome-extension

and the below

yo chrome-extension [enter your extension name here without square brackets]

When you execute the second command, you will be asked several questions related to the generator so please interact with the cmd.exe to make it successful.
Now go to the workspace you have being executing all the above commands, you will see some files.

5) Open the workspace folder in Visual Studio Code

6) Open GitBash from start menu and execute

git config --global user.email "you@example.com"

7) Click on the Git button in VS Code and click on “Initialize Git repository”


Now you will get something like this

Let me explain this one, what we are doing now is trying to feed our workspace to the source code management system (Git) and thats the job what the “Initialize Git repository” does. The green boxed one shows the number of changes in our code, here it is 14. Orange boxed one is a user given message as the identifier of commit. Purple box is the command executed (no user interaction needed here) and the light blue box button has the ✓, user need to click to commit changes.

Thats all, you have just made your first step toward opensource development with Git, Node and Yeoman on Windows. Happy coding.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s