Recently I have been playing with Golang and I found that there few packages that do not work with windows. So for that most of people are using VirtualBox and then installing Linux on that But Actually, you don’t need to do that as now you already have windows Linux subsystem which provides you a complete Linux Environment in your windows environment itself.

To educate, this I have created a video for the same. You can find that video below.

Here in this video, You can see that I have installed Ubuntu Linux subsystem.

What is Linux Subsystem:

Windows Linux Subsystem is a compatibility layer developed by Microsoft and Linux distributions for running Linux Environment natively on Windows 10. It was introduced with the Anniversary update.

I love Angular as Framework and I used it for many applications so I always look forward to how I can make my life easy as a developer and How I am more productive. So Angular Language Service Extension help do that.

In this Video, I have demonstrated Angular Language Service Extension with Visual Studio Code. It analyzes your property and methods from Angular Component and provides Great Intellisense in App component HTML pages in Visual Studio Code. So you don’t have to worry about your spelling mistakes and other stuff.

Recently, I have been enjoying creating videos, So I have created a video related debugging of the Angular app in Visual Studio Code. In this video, I have shown how we can debug Angular 5 application in Visual Studio Code with Chrome Debugger Plugin and what configuration we need to make. And It always has a great feeling when you debug your application in the code editor itself instead of the browser.

Hello Friends, Recently I have been having fun creating Video. So Here I have created one more. In this Video, I have explained how we can debug the C# Code with Visual Studio Code.

For those, you don’t know Visual Studio Code is a brand new open source Editor from Microsoft. It provides lots of cool features and debugging is one of them. It has got built-in debug support and intellisense with languages like CSharp and Node.js.

Subscribe to Youtube Channel:

If you are really like my videos then don’t forget to subscribe to my youtube channel.I really need your help giving my youtube channel a custom URL so I need to have 500 subscribers to my channel. So Please do subscribe if you like this kind of videos that I produced.

Recently I am having fun creating videos and I have created another one.

In this video, I have explained how we can use GIT Source Control with Visual Studio Code. You will get any idea how it is very easy to to use GIT with Visual Studio Code. You can see that video at following.

Also, don’t forget to subscribe to my channel for more videos, There is a lot more coming!. Following is my youtube subscription link.

Recently I presented a Webinar on ASP.NET Core on Linux. Here I have displayed how we can use Visual Studio Code a Free Open Source Editor from Microsoft to develop application. One of frequently ask question was How I can install Visual Studio Code on Linux. Since lots of People are using Ubuntu as Development Machine I thought it will be a good idea to write a blog post about how to install Visual Studio code on Linux(Ubuntu Machine).

So first thing we need to do it open a terminal in Ubuntu and then we need to type following command one by one.

Visual Studio Code is a Great Editor by Microsoft being Developed Open Source on Github and It is gaining lots of popularity and lots of Developers are using for creating applications in various languages. Their lots of features that are there for Developers and Still lots of features is not been explored or lots of useful extensions are not being explored. So I am creating few videos for explaining it’s feature and this video is one of that features.

IIS Express is a built-in web server for C# applications with Visual Studio and lots of Developers are using this. This video explains how we can use IIS Express with Visual Studio code. Please have a look at it and let me know how it was.

Visual Studio Code is an open source, free, Cross-platform editor and I have been using it now more than the year. I just simply loved this editor. It’s a got lot of feature and there are some cool navigation features there. In this blog post, we are going to explore those navigation features.

Quick Open File Navigation Features(Ctrl+Tab):

If you press Ctrl + Tab then it will show all the open files in Visual Studio Code.

Go To Definition(F12):

If Language is supported in Visual Studio Code then you have that feature available just like have it in full Visual Studio IDE. You can press F12 to go to definition and the same way you can also right click and select Go To Definition.

Peek Definition(Alt + F12):

Peek Definition is working same as Go To Definition the only difference is it will load a windows inline and show. It is quite useful when you want to quickly see something. You can use this feature via pressing Alt+F12.

Open Symbol(Ctrl+T):

It also contains some Resharper like features you can go to any symbol via pressing Ctrl + T. Just type the first letter of a type you want to navigate to, regardless of which file.

Go To File(Ctrl + P):

You can also go to any file with Go To File feature of Visual Studio code via pressing Ctrl + P. This quite useful when you have large code base.

There tons of other features available with Visual Studio code. So if you have not tried this editor I would highly recommend to try it. I’m sure you fall love in it. You can download Visual Studio code from the following location.

TL;DR;

In this blog post, We are going to learn how to upload a file with Express, Pug, and Multer in Node.js. In this blog post, we will learn how we can upload file with multer middleware in express framework with node.js

Creating Express App, Multer and other common code:

So here in for the demo purpose, we are going to use express application. So here is our package.json for express framework node.js application. It is created via the express generator. I have added Multer and PUG NPM instead of Jade.

Here in the above code, You can see that there are pug npm and multer npm. Once you do “NPM Install” it will install all the required NPM for the same. Now we are our standard express app ready and here’s how our structure looks in visual studio code.

What is Multer:

For those who don’t know what is Multer,

Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.

It is a middleware that will help you handle multipart/form-data requests and you can upload the file with that middleware with some configuration code.You can find more information about Multer at - https://github.com/expressjs/multer

Common code for Multer:

Now once we are done with Installing node module, It’s time to write some common code for Multer middleware. Here in the above code, we are going to use the index.js router which is a default router for the express app. The index.js code looks like following.

Here in the above code, you can see that first I’m creating a multer object with require syntax and then I have put some configuration with multer.diskstorage. Basically, It's said that we are going to store the uploaded files into public/uploads folder and the name of a file will be same which we uploaded. Then in post request, you can see that I have put “upload.single” which handle file upload with post request. And if it uploaded successfully, I’m sending a response back that file is upload successfully.

TL;DR;

I have been using Visual Studio Code for quite a good amount time and I am loving it as a code editor. Recently I have started using it as my development editor for Angular 2 as it has recommended by the Angular 2 development team also. There are quite a few good extensions available in market place for the same. In this blog post, we are going to talk about my favorite extensions of Visual Studio Code for Angular 2 development.

With this extension, you will get TypeScript extension as well as some of HTML snippets for binding of Angular 2 as well as some of the ngform and other snippets.

Path Intellisense from Christian Kohler:

It is the plugin that autocompletes the path and provides Intellisense for the paths and it is a great extension and comes quite handy when you put different JavaScript and CSS files. You can find more about it at the following location.

Auto Import by Steoates:

It is an auto import extension for everything. It finds, parses and provide code actions and code completion for all available imports. It works great with TypeScript and even for TSX which used for react.js with TypeScript. You can find more information about that extension at the following link.

That’s it. This all extensions are my favorite extension for Angular2.What are your favorite extensions that make your life easy? Please put your favorites in this blog post comments. Hope you like it. Stay tuned for more!!

Visual studio code is a Great editor for the web development. I have started using it and I’m loving it more and more. For any editor shortcut keys are important you can do lots more without moving to mouse with a shortcut. In this blog post, we are going to learn about shortcuts for Visual Studio Code.

Ctrl + P: Goto File, You can move to any file of open solution/folder in Visual Studio code.Ctrl + Shift + O : Goto Symbol, You can move to any function, variable or symbol of the current file.F12 : Goto Definition – You can move to the definition of symbol or function with this commandCtrl + G : Goto line, You can move to particular line numberAlt + Left: Navigate between files goes to the left side of filesAlt+ Right: Navigate between files goes to the right side of filesAlt + F12: Peek definition, You can see preview of code for a functionCtrl + Shift + D: Debug folder or file.Ctrl + Shift + F: Search in all files.Ctrl + Shift + H: Replace in all the filesCtrl + T: Go to symbol in all filesCtrl + B : Toggle Slider BarCtrl + 1: Focus Left EditorCtrl+ 2: Focus Right EditorF2: Rename symbol and functionCtrl + Shift + X : Goto Extension WindowCtrl + J: Toggle PanelsCtrl + ` : Open terminal in VSCodeCtrl + Shift + U: Show output WindowCtrl + Shift + M : Show problems, Where you can see all the problems related to code and warnings.

In this blog post, We are going to see how we can open an ASP.NET Core solution in visual studio code. So what we are waiting for. First, we are going to create an ASP.NET Core web application like below.

Then select web application like below.

Now once you created Ok it will create an ASP.NET Core Web Application like below.

Now let’s run that application to make sure that its work fine.

Open ASP.NET Core Solution in Visual Studio Code:

For those who don’t know What is Visual Studio code is here is the definition from the Wikipedia.

Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring

It is a cross-platform open source editor for writing code from Microsoft. You can find more information about that from the following links.

Now we are going to see how we can open the same application with Visual Studio code. But before doing that we need to make sure that the computer have .NET Core installed on your machine and Also make sure that Visual Studio Code C# support is there in Visual Studio code. You can find more about that from the following link.

Since Visual Studio Code is not a full fledge IDE(Integrated Development Environment) like Visual Studio. We need to open the folder which contains the solution and source code. You can do that from Visual Studio Code.

Then select the src folder of your application like below.

Once you click on “Select Folder” it will open source code like below.

Now when you open any CSharp file on the right bottom you will see a text like installing OmniSharp. OmniSharp is a set of tooling and editor integrations and Libraries that together creates great IntelliSense and other tooling support for popular editors like Code, Sublime Text, Brackets, Atom,Emacs and Vim etc. You can find more information about that on the following link.

Once you click on that text you can also see the progress of installation of Omnisharp libraries in output windows like below.

Once it installed it will automatically select the project which you have in solution. If you have multiple projects then you can click on that and it will ask you to select the project for which you need all IntelliSense .

That’s it. Now you have most of the experience that you got in Full Visual Studio and full fledge IntelliSense to all the .NET Features.

Disclaimer: I have tested it on the windows machine and its works perfectly fine. For macOS and Linux I would expect the same. For further information, you can follow a GitHub Issue which is already created by the community. You can find that GitHub issue at the following link.

Microsoft has released visual studio code on 1.0 version 14th April 2016. Those who have not used Visual Studio code, Visual studio code a is cross platform open source editor from Microsoft. It supports the variety of languages and you can do almost everything that you can do in an IDE. It also provides support for the debugging few languages.

In blog of Visual Studio Code, Microsoft says

Since our initial launch one year ago, 2 million developers have installed VS Code,” the Visual Studio Code team revealed. “Today, we’re excited to report that more than 500,000 developers actively use VS Code each month.

Before sometime I have blogged about - Why It's the right time to learn Typescript and It does get lot of buzz. Typescript getting every day more popular due to reason I have mentioned in above blog post. So now in this blog we are going to learn how we can use TypeScript with new Visual Studio Code editor.

TypeScript support in Visual Studio Code:

As you know Visual Studio Code is in beta now and provide great support for typescript. Here you can operate TypeScript in two modes.

1) File Scope:
In this mode Visual Studio Code will treat each typescript file as separate unit. So if you don't reference the typescript files manually with reference or external modules it will not provide intellisense as well as there will not common project context for this.

2) Explicit Scope:
In this scope we are going to create a tsconfig.json which will indicate that folder in which this file exist is a root of TypeScript project. Now you will get full intellisense as well as other common configurations on tsconfig.json file.

You can create a new file via File->New file from Visual Studio Code and add following code about TypeScript configuration under compiler operations.

Now as we all know that TypeScript is a super set of JavaScript and this files we can not directly put into html page. As browser will not understand the typescript itself. So we have to convert it into JavaScript. So to convert TypeScript file into JavaScript file we need to configure a in built task runner which will automatically convert all the TypeScript files into JavaScript.

To configure Task Runner you can either press F1 or Ctrl+Shift+P and type task runner. Configure Task runner will popup.

Once you press enter it will create a .vscode folder and create file called task.json which will have following code.

{
"version": "0.1.0",
// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
"command": "tsc",
// The command is a shell script
"isShellCommand": true,
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
// args is the HelloWorld program to compile.
"args": ["HelloWorld.ts"],
// use the standard tsc problem matcher to find compile problems
// in the output.
"problemMatcher": "$tsc"
}

Now when you build your project it will create a JavaScript file automatically. Now Let's create a TypeScript file like following.

Hiding JavaScript File from explore area in Visual Studio Code:

I don't like my JavaScript file to show in explore area as we already have TypeScript file. So we don't have to worry about JavaScript file. There is a way to hide JavaScript file and I have to add following code in my user settings file. Which you can get it via File->Preferences->UserSetting