A Quick Lap Around Visual Studio Code

image.png

Visual Studio Code, a lightweight cross-platform code editor for develop and debug modern web and cloud applications. This cross-platform development tool can run on your preferred platform – Windows, Linux and OS X. Developers now have a new code editor that can run across three different platform and allow easy .NET and other multiple language development.

Getting Started

This is a free tool and you can download the preview version from here . Installation and setup is very fast and the Visual Studio Code would be ready within a few minutes.

Here I have downloaded for Windows Version, and this is how the welcome screens looks like. Sweet and Simple!  This give real feel on how much light weight it is!

Welcome To Visual Studio Code

Welcome to Visual Studio Code

 Personalized It

Before you start building anything, just take a look around how you can personalized it for a better experience. Visual Studio Code comes with below three themes.

  • Light Theme
  • Dark Theme
  • High Contrast Theme

Dark Theme” is set as default. you can change it your favorite one.

Personalized VSCode - Change Theme

Personalized VSCode – Change Theme

This is how the VS Code looks in different theme. Choose your favorite one! I will continue with the default theme.

VSCode With Different Theme

VSCode With Different Themes

 Getting Started with VSCode

To start with the development, you can just open any of your existing project and open it by navigating through File –> Open Folder main menu. You will find all the files listed under your project folder and you can easily navigate through them.

Open Existing Solution In VSCode

Open Existing Solution In VSCode

Use the Explorer window as your Solution Explorer in Visual Studio. Navigate through and select the files on which you want to work.

Exploring the Code

Exploring the Code

 Exploring the Explorer

While Explore Side Bar looks like just a file explorer, actually it is not. It does lots of stuff and you can consider it like your own Visual Studio Solution Explorer. Here is couple of  important things.

Identifying the Working Files

If you are familiar with TFS pending changes, you can catch this very quickly. The File Explorer of Visual Studio Code categorized all working files under a group and you can take a common action together like Save All, Close All etc. This helps us to keep track of changed files easily.

Working Files in VSCode

Working Files in VSCode

 New Files & Folders

You can add / delete file/ folder from the Explore side bar. For an example, if you want add a new controller, you can just Right Click –> New File, from the context menu.

Adding a New File

Adding a New File

Then the tool will ask for the name of the controller. Once file name is provided, it will create the file and open the same in the editor windows.

Adding Specific Types of File

Adding Specific Types of File

You can create any type of files that are supported by your application and the Visual Studio Code. Based on the extension, Visual Studio Code will understand the file types and the intellisense needs to be applied on the file. In our case, it was a C# file, and you can find it in the bottom left corner.

Connecting With GIT

Visual Studio Code has integrated  GIT support. What else a developer can expect to manage the code in a version control.

Connecting With GIT

Connecting With GIT

 

Code Compare in GIT  - VSCode

Code Compare in GIT – VSCode

 Command Palette

Command Palette is similar “Command Window” in Visual Studio. You can quickly bring the Command Palette by pressing “Ctrl+ Shift+P”.

VSCode Command Palette

VSCode Command Palette

Using Command Palette, you can access all most every single functionalities of VS Code.

For an example, By just typing change theme, and selecting any of the option, you can apply the theme as we have seen earlier form menu.

Change Theme Using Command Palette

Change Theme Using Command Palette

 P.S : I found some minor issues while changing the theme from command palette, and would submit the same as feedback. It seems that,  Changing the theme from Command Palette and from menu are not in sync.

Moving the Side Bar

Generally I keep my Solution Explorer in the right side of my Visual Studio IDE, I was looking for the same here. Though default position of main side bar is left, you can move it right as well. Navigate to View –> Move Side Bar.

image

There are many more….

I just covered few things which I came across while exploring the Visual Studio Code. There are many more features like debugging, search, settings, and running it on other platforms.… and you can explore them by your own. I will spend more time for deep dive.

Please refer the below link for more details understanding

Getting Started Documentation

Follow Visual Studio Code Blog

Follow @Code in Twitter

Now Code any where and any time ! Happy Coding !!!

6 thoughts on “A Quick Lap Around Visual Studio Code

  1. […] Visual Studio Code, supports File Compare of Working Files and let you compare the changes in different modes.  You can leverage this feature either from File Explorer Side Bar  or by using “Files:Compare Opened File With” command. VS Code Compare tool works in a very similar way like other compare tool and you can change the setting to view the changes in “In Line Mode” or “Merged Mode” within the code compare window. […]

    Like

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s