JetBrains .NET Tools Blog

In case you haven’t already been introduced, AngularJS is a popular JavaScript framework for creating dynamic web applications. It provides many of the services required to build such applications, not the least of which is a declarative approach to updating the UI. It favours the use of data binding and templates over direct DOM manipulation, and it makes it possible to create complex sites with a minimum of code. For more information, check out the examples on their home page, or take a look at the video tutorials by our very own John Lindquist.

We’ve just released a plugin that adds ReSharper support for some of AngularJS’ features (here’s a direct download link). It’s an initial version, so doesn’t cover everything, but what it provides should give you a helping hand in creating your sites. Currently, the plugin provides code-completion for Angular’s custom HTML attributes, and a bundle of Live Templates to make building common constructs easier.

Code completion will include all of AngularJS’ “ng-” attributes when editing HTML files, and include a description tooltip:

It also supports the HTML5 “data-” prefixed versions of the same attributes.

And of course, since ReSharper has smart matching, you can type initials to quickly get to the start of the attribute you want. For example, you can type “dngbh” to get to the “data-ng-bind-html” attribute:

The plugin also ships with 26 Live Templates, based on the IntelliJ and WebStorm templates by Pawel Kozlowski and John Lindquist, respectively. They are split into functionality for directives, modules, scope, routing, html and global helpers. For example, you can use the “ngindex” template to create a simple HTML page to start your development,  or “ngb” to create a binding expression. These work in HTML or HTML-like files (Razor, ASPX, .html)

The JavaScript templates can create code for directives, for loops, modules, routing and scope. These are available in JavaScript files, and within script tags in HTML-like files:

Please check out the templates explorer to get a full list, or to edit, add or remove templates.

This is just an initial release. We’d love to expand the feature set, supporting custom HTML element directives, navigation to model properties, binding expressions, and more. If there are any features you’d like to see, or if you find any bugs, please add a feature request to the Issues page. And of course, it’s Open Source - if you’d like to see a new feature, how about taking a crack at it? We’ll help.

Now, go and download it, and make lovely dynamic JavaScript applications.

Тhе JаvаSсriрt рrоgrаmming lаnguаgе соntinuеs tо risе in рорulаrity, sо аt JеtВrаins wе wоrk tirеlеssly tо bring аbоut mоrе аnd bеttеr suрроrt fоr this lаnguаgе. Неrе is аn оvеrviеw оf thе nеw things wе’vе gоt in stоrе fоr thе 7.1 rеlеаsе.

Vаluе Аnаlysis

Unlikе С# оr VВ.NЕТ, thе sеmаntiсs оf JаvаSсriрt ореrаtоrs аrе а vеry соmрliсаtеd аffаir, аnd thеir inсоrrесt usе саn lеаd tо vеry subtlе bugs. Luсkily, RеShаrреr’s gоt yоur bасk оn this. Неrе аrе а fеw ехаmрlеs оf vаluе аnаlysis thаt RеShаrреr реrfоrms tо рrеvеnt еrrоrs in yоur соdе.

Соnsidеr thе fоllоwing blосk оf соdе:

In thе аbоvе, RеShаrреr is smаrt еnоugh tо infеr thаt if tаrgеt is of а bооlеаn type then thе ехрrеssiоn if (tаrgеt) is аlwаys truе. Аs а rеsult, соdе in thе еlsе blосk is grаyеd-оut аnd indiсаtеd аs bеing unrеасhаblе.

In а similаr fаshiоn, thе аbоvе соdе hаs а rереаtеd if blосk (роssibly duе tо а сорy-раstе еrrоr), аnd RеShаrреr рiсks uр оn this, highlighting thе соnditiоn аnd grаying оut thе hеuristiсаlly unrеасhаblе соdе.

Неrе is аnоthеr ехаmрlе оf аn if stаtеmеnt thаt’s nоt nееdеd:

Аnd аnоthеr оnе, bаsеd оn thе аnаlysis оf thе аrgumеnt tyре:

Аnd finаlly, hеrе’s аn illustrаtiоn оf а саsе whеrе а сhесk аgаinst undеfinеd mаy nоt bе еnоugh:

Соdе Соmрlеtiоn Imрrоvеmеnts

RеShаrреr соntinuеs tо аugmеnt its соdе соmрlеtiоn сараbilitiеs. Fоr ехаmрlе, if yоu stаrt сhесking thе tyре оf а раrtiсulаr vаluе, yоu wоuld gеt thе fоllоwing соmрlеtiоn list:

Соmрlеtiоn lists fоr JаvаSсriрt tyреs nоw shоw аll mеmbеrs, but thе mоst rеlеvаnt mеmbеrs fоr thе givеn tyре (аs infеrrеd by RеShаrреr) арреаr in bоld аnd nеаr thе tор оf thе list:

Аbbrеviаtiоns

Аnd оnе lаst thing… RеShаrреr nоw suрроrts аbbrеviаtiоns in JаvаSсriрt just аs it dоеs in оthеr lаnguаgеs:

Wе hоре yоu еnjоy thеsе fеаturеs. Stаy tunеd fоr mоrе!

ReSharper 7 greatly enhances JavaScript support by adding more analysis, quick fixes, code completion, as well as support for Jasmine and PhantomJS unit test runners.

Code Analysis and Context Actions

One of the biggest issues when writing JavaScript code, or any kind of dynamic code in general, is the potential mistakes that can lead to runtime errors. Not having a compiler as a safety net to detect some problems has it’s downside.

With ReSharper 7, we have placed a lot of effort in trying to analyze code and offer a series of context actions, be it quick fixes or refactoring. In fact, we added 30+ new context actions in ReSharper 7

Converting numbers to different formats

You can now convert back and forth from decimal to hexadecimal, to octal, all with a single Alt+Enter action.

Dealing with Conditionals

From simple if inversions of conditionals

to converting if conditionals to ternary and back

as well as the ability of merging multiple if statements or separating them out

All in all, we’ve added quite a lot of context actions to deal with conditionals.

Accessor Properties

ReSharper 7 also adds support for the new property accessors in EcmaScript 5

when selecting to wrap get-accessor gives way to

Alternatively, if selecting the first option, we’d get

defineProperty support

We also now support defineProperty in multiple ways

resulting in

Much more

These are just some of the context actions out of the 30+ that we have added, including tiny but small annoyances such as using double quotes when single is required

making JavaScript a bit easier to work with and help in learning.

Code Completion

In terms of Code Completion, we have added support for event handlers under WinJS/WinRT (see below), as well as some nice little additions available globally

Once again, we also provide support for new methods defined in ECMAScript 5

WinJS

With Visual Studio 2012 allows us to create Windows 8 Metro applications using C# and XAML, as well as JavaScript and HTML. ReSharper 7 also provides support for JavaScript for Metro applications. Once again, we have covered this previously.

Here is a sample of Code Completion with addEventListener/removeEventListener:

Unit Testing Enhancements

We’ve also added support for Jasmine and PhantomJS test driver in ReSharper 7, which we’ve already covered in this post.

Invisible but important features

Internally, Visual Studio 2011 provides 5 JavaScript files that are implicitly referenced in every JS file in a project. They contain DOM definitions, standard JS objects and other important information. It aids in producing code completion and tooltips. In Visual Studio 2012, Microsoft allows developers to configure these files via options and surfaces an API. ReSharper uses this API to get information from these files, making the code completion / navigation flexible.

We’ve also drastically improved performance of JavaScript. In general, now working with script files should be a much faster experience.

JSLint for ReSharper

Last but not last, for those of you that like JSLint, know that although we do not ship support for JSLint out of the box, there is already a plug-in available from the community. Lars-Erik has written JSLint for ReSharper and it’s already available for ReSharper 7.0.

As always, we appreciate the feedback.

Previous posts introducing ReSharper 6:

In ReShaper 6 we have taken the first step to make it easier for developers to work with JavaScript. By providing support for analysis, refactoring and code-navigation, we try and remove some of the difficulties developers might encounter when working with this language. Now we’re taking the next step!

Running QUnit from ReSharper

When it comes to Unit Testing, even some of the more experienced JavaScript developers tend to not pay too much attention to testing their code. Reasons for this include too much friction, lack of understanding on how to test, what framework to use, etc. Although we can’t solve all of the problems, we are going to try and remove a few of them by providing support for running JavaScript Unit Tests in an easier way with ReSharper. And we are starting this by providing support for QUnit, the unit testing framework used by jQuery. You will be able to run QUnit JavaScript tests using the same interfaces you know and love in ReSharper. And the best part of it all, is that it’s really easy! Let’s see how.

1. Define the code under test

First step is to have some code that we want to test. This code can be located in the same file where are tests are (not recommended) or in different files. In our case, we want to test some simple calculator operations:

We have placed this code in a file called CodeUnderTest.js but it can be named absolutely anything.

2. Write some tests

Writing Unit Tests in QUnit is pretty straightforward. Whereas with most test frameworks, you’d normally write a class that contains test methods, with QUnit, you call a function test which takes two parameters, a description of the test and the actual code to test, which is passed in as a function:

We place this code in a file called CalculatorTests.js (again, can be named anything). Our project structure now looks like this:

Since our tests are located in a file different to that of our tests, we do need to tell ReSharper which code we are referring to by using a specific reference notation at the top of the test file:

As soon as we add the tests, ReSharper will detect that these are QUnit tests and provide us with the ability to run them by placing the Test Runner menu in the left gutter:

providing us with the ability to run the tests:

We can now run individual tests and get the output displayed in the ReSharper test runner:

Notice how the tests are grouped under “Calculator tests”. This is done using the module function which allows grouping of tests:

When the tests are run, ReSharper launches the default system browser which runs the tests and reports the information back to ReSharper. Normally, to run QUnit tests, you would need to create an HTML file that runs the them. This is handled internally by ReSharper, so it’s one less step to perform.

If you prefer to use a specific browser to run the tests, you can do so by changing the browser under the ReSharper Options | Tools | Qunit

There is still more to come…

Currently, ReSharper is bundling the latest available version of QUnit (at the time of building). We will be adding support in upcoming releases which will allow you to use your own version of QUnit. Also, we will be looking at providing access to the HTML file that ReSharper generates, allowing better support for Continuous Integration environments, as well as the possibility of running the tests from the browser directly.

When can you play with it?

Right now! The public EAP build includes this functionality. Download it from here the ReSharper 6 Early Access page.

And as always, feedback welcome. Feel free to provide comments here or using our issue tracking system where you’ll not only be able to monitor the status of a feature but also get people to vote for it.

All ReSharper users, please kindly welcome ReSharper 6 Early Access Program that starts today.

Download ReSharper 6 EAP builds and watch that page for subsequent builds.

Why should you care? Here’s a couple of reasons why you should try ReSharper 6 EAP right now:

• You’ve been asking yourself, why oh why ReSharper doesn’t support JavaScript. Now it does.
• You’re working with a lot of CSS and you’re struggling to sort it out. Highlighting, navigation and search features for CSS are now available to you.
• You’re a VB.NET developer who’s looking enviously at ReSharper code analysis features previously available for C# only. ReSharper 6 introduces code inspections for VB.NET as well.

For those of you hesitating, here’s why may want to refrain from trying ReSharper 6 EAP at this point:

• EAP provides builds of that are not guaranteed to even run on your machine. They normally do run but certain features may not work as expected.
• You’re expecting ASP.NET MVC 3/Razor support that we had earlier committed to provide. It’s not there yet but we’ll add it in forthcoming builds.

As usual, please report bugs and feature requests to ReSharper bug tracker. Let us know what you think.

We’ll be covering the functionality available in ReSharper 6 in a blog post series, and we’ll start from JavaScript - right now!

JavaScript Support

JavaScript support spans most ReSharper feature groups including code inspections, navigation, refactorings, and coding assistance.

Coding Assistance

JavaScript code is enabled with highlighting for keywords, methods, properties, and matching delimiters:

ReSharper extends the scope of its code completion to JavaScript code, both in dedicated files and in inline script blocks within markup files. Smart Completion in jQuery code allows to narrow the myriad of applicable completion options to the limited set of jQuery properties:

Navigation and Search

Whenever you open a JavaScript file, you can make use of ReSharper’s File Structure window to quickly understand how it’s organized:

Go to File Member, which always goes hand in hand with File Structure, is available as well.

Find and Highlight Usages

You can find or highlight usages of a symbol inside a JavaScript file:

Of course, you can also find usages of a JavaScript function in other parts of your solution:

If you’re browsing your solution using the Solution Explorer, you can see where in your markup files a certain JavaScript file is referenced:

Code Formatting

ReSharper 6 provides JavaScript code formatting that is traditionally available through Code Cleanup and configurable through the ReSharper Options dialog box:

JavaScript To-Dos

What JavaScript support lacks at this point is a solid code analysis engine incorporating both code inspections and quick-fixes. We’re going to add more code inspections (some of them are already available) and provide quick-fixes against them where applicable.

Look for subsequent blog posts for more information on CSS support, VB.NET improvements, and other red-hot ReSharper 6 features.

Once again, if you’re hungry to try JavaScript support right now, download ReSharper 6 EAP builds.

UPDATE. For more details on JavaScript support in ReSharper 6, see subsequent posts tagged ReSharper 6, including ReSharper 6 Enhances the JavaScript Experience and ReSharper 6 Introduces Support for JavaScript Unit Testing with QUnit.

Tonight in London Hadi Hariri and Sergey Coox have unveiled the early bits of the upcoming ReSharper 6 in front of DevCon London and JetBrains Community Night attendees.

While you can be sure that more exciting announcements on the new ReSharper functionality is ahead, one thing is crystal clear: ReSharper 6 will provide first-class support for JavaScript and CSS.

While there are currently no public builds available incorporating JavaScript support, you can expect ReSharper 6 Early Access Program to open in November, and November is very soon!

Meanwhile, please bombard ReSharper issue tracker with your feature requests detailing how you would like the most intelligent Visual Studio extension to support JavaScript and CSS!

Cheers!

UPDATE. For more details on ReSharper 6, watch the ReSharper 6 tag here on the .NET tools blog.