Setup Visual Studio for Ext JS Development

You can also use Visual Studio if you are coming from Microsoft world. Download Visual Studio from visualstudio.com.

Setup Visual Studio 2013:

Sencha provides plugin for Visual Studio 2013 and 2015 Enterprise, Professional, Ultimate, Premium, or Community editions. It is available to Ext JS Pro and Premium customers at no extra charge. If you use EXT JS SDK GPL license then it will be available for 30 days trail.

Install Sencha Plugin:

Here, we will install Sencha plugin in Visual Studio 2013 Community Edition.

Open Visual Studio 2013 and go to Tools -> Extensions and Updates.. to open following popup. Select Online section in the left pane.

setup visual studio for extjs

Now, search for sencha at top right corner. This will list Sencha Visual Studio Extension plugin as shown below.

setup visual studio for extjs

As you can see above, click on Download button to download it. After downloading completes it will ask for installation as shown below. Click on Install to install this plugin into Visual Studio.

setup visual studio for extjs

After successful installation it will ask for Sencha userid and password. Enter it to activate trial version of the plugin. If you have valid license code then you can enter it to activate it.

Restart Visual Studio after activation.

Now, you can create Ext JS project, Ext JS controller, model, store etc. using templates.

Let's create Ext JS project in Visual Studio 2013.

Open Visual Studio 2013 and click on File -> New -> Project.. to open popup as below. Select Sencha under Templates -> Visual C# as below.

setup visual studio for extjs

As you can see in the above figure, there are two templates for Sencha: 1) Ext JS Application and Web API 2) Ext JS Workspace and Web API. Here, we want to create an Ext JS application, so select Ext JS Application and Web API, enter name and the location of the application and click OK.

This will ask for CMD and SDK location, toolkit and theme. Provide necessary info and click OK as shown below.

setup visual studio for extjs

It will create Ext JS project as shown below.

setup visual studio for extjs

As you can see in the above figure, Sencha folder is hidden. Unload the project and reload to make it visible as shown below.

setup visual studio for extjs

Now, you can achieve auto code completion and other features.

setup visual studio for extjs

Visit Sencha Docs for more information.

Setup Visual Studio 2010/2012:

Sencha plugin is not supported in Visual Studio 2010/2012. So, you need to install following plugins manually in Visual Studio for better JavaScript coding experience:

Jscript editor extension:

Install Javascript editor extension for VS2010. It is useful for brace matching, outlining etc. for easy JavaScript development. VS2012 includes it by default.

JSLint:

Download and install JSLint for VS2010 from codeplex VS 2012 from VisualStudiogallery.

JSLint analyzes JavaScript code and gives warnings and errors in JavaScript code based on the configuration. JSLint is useful to identify missing semicolon, comma and other basic syntax errors in the JavaScript code.

PrettyJs:

Install PrettyJs to format JavaScript code and make it readable in Visual Studio 2010.