How WebStorm Works: Completion for JavaScript Libraries

One of the essential features of WebStorm’s editor is code completion. The way it is implemented in WebStorm is that it takes all JavaScript files in the project and goes through them, adding functions and methods to an internal index used for code completion suggestions. The index is automatically updated whenever existing files are changed or new files are added.

completion

JSDoc, used for documenting code, also plays an important role in making your coding experience better. It powers WebStorm autocompletion with additional details about parameters and their types.

jsdoc

But what if you have only minified files included, or if all the libraries are loaded dynamically? In this case it would be impossible for the IDE to statically analyse them and provide the necessary level of code completion when you press Ctrl+Space, or to resolve functions and methods you use.

This is where we introduce the concept (or mechanism) of External libraries that we use in WebStorm.

External libraries

External libraries are files explicitly added to project’s index to be used only in enhancing coding assistance (i.e. code completion, syntax highlighting, navigation, and documentation lookup). They are not to be edited in the scope of this project.

To make this concept clearer, let’s see how it works on a real project. Here is a simple project using the Famous framework for UI (same as on the screenshots above).

Continue reading

Posted in Cool Feature, Tutorials | Tagged , | 11 Comments

The Brunch Build Tool

This is a guest post by Michael Schmatz, Lead Developer at CodeCombat

One of the most important parts of CodeCombat’s development workflow is Brunch. In this post I’ll tell you why CodeCombat chose Brunch, run through setting up a basic Brunch project, explain CodeCombat’s Brunch configuration, and compare Brunch to several popular alternative build systems.

CodeCombat loves Brunch

Why CodeCombat uses Brunch

In early 2013, CodeCombat was just getting started. One of the cofounders, Nick, wanted a workflow skeleton to kickstart development. After examining several different tools, including Brunch and Yeoman, he ended up choosing Brunch, mainly because of the awesome project skeletons available.

As time went on and the build times grew and grew, we appreciated one design choice of Brunch more and more: incremental rebuilding and caching. For small projects, the time difference between partial and complete rebuilds isn’t very significant. However, for large projects, long build times can be very detrimental to developer efficiency and happiness. Doing a complete rebuild of CodeCombat can take a few minutes on older computers, whereas partial rebuilds only take a few seconds, if that. Such responsiveness is integral to our development process.

Setting up a basic Brunch project

First, we need to install Brunch. Once you have npm installed, just run:

To get us started, we can use Brunch’s built in skeleton installer. There are many skeletons to choose from; I chose one of the more popular ones that includes AngularJS, CoffeeScript, LESS, and Jade.

All we have to do now is start Brunch. Move into the new directory, and then start the Brunch watcher/server.

Now any time we make a change to our app, Brunch will automatically recompile the files that changed, rebuild the app, and refresh the page. On my machine, this takes only about 70ms.

Let’s change the header on the front page. Open up your favorite IDE and start editing app/partials/todo.jade. In addition, open a web browser to the URL Brunch provided, in my case, http://localhost:3333.

brunch

Notice how, if you change something, for instance the <h2>, the app automatically is rebuilt and the page refreshes.

Continue reading

Posted in Cool Feature | Tagged , , | Leave a comment

WebStorm 8.0.4 Bug Fix Update Available

A bug fix update, WebStorm 8.0.4 (build 135.1063), is now available. It’s going to be the last bug fix update for WebStorm v8. By the end of July we are planning to start the Early Access Program for WebStorm 9.

In this update we’ve addressed the issue with AngularJS injections in Jade files, as well as the problem with JSHint configuration file paths. We also added support for AngularJS 1.3 one-time bindings. The full list of fixed issues is available in the release notes.

You’ll get an automatic update notification. If you are using WebStorm 8.0.3, you can use a patch-update. If you’re using earlier versions of WebStorm, you should download the WebStorm installation file for your OS on the product website and reinstall WebStorm.

Please report any bugs and submit feature requests in our issue tracker.

Develop with pleasure!
JetBrains WebStorm Team

Posted in Release Announcements | 7 Comments

MEAN Stack Walkthrough and Tips

MEAN is a full-stack web framework that consists of four very popular JavaScript-based projects: MongoDBexpressAngularJS and Node.js.

mongodb     express     angularjs    nodejs (1)

This screencast shows how  you can work with this development stack in WebStorm.

WebStorm supports each of the MEAN projects with a variety of tools (including some open-source plugins) providing you with a complete experience when developing an app . Here is a list of features that could help you and links to our previous posts on them:

Develop with pleasure!
JetBrains WebStorm Team

Posted in Cool Feature, Screencast | Tagged , , | 6 Comments

Grunt in WebStorm 8

Grunt is a very popular tool in the JavaScript community. It’s built on top of NodeJS, but it’s used even in most front-end only projects. So even if you don’t work with NodeJS, many JavaScript developers install NodeJS simply to use Grunt.

Grunt can achieve many common tasks such as minifying code, linting code, and transpiling code (e.g., changing CoffeeScript into JavaScript). The most common scenarios are achieved by using Grunt plugins which are installed through npm. In fact, developers often simply create GruntFile (a build file written using Grunt) that only uses common plugins and then they simply configure it with settings to match their own projects (e.g., writing a config.json file).

WebStorm 8 now helps you to run Grunt tasks.

Simply right-click on your GruntFile, select Open Grunt Console, and you’ll now be able to double-click a task in the Grunt tool window to run it.

 

In order to get started, you’ll want to install Grunt’s command line interface (CLI) globally. You may need to use sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to do this (you can find more on Getting started with Grunt on gruntjs.com.

Please watch the video below for more details:

Develop with pleasure!
JetBrains WebStorm Team

Posted in Cool Feature | Tagged | 11 Comments

WebStorm 8.0.3 Bug Fix Update is Available

WebStorm 8.0.3 bug fix update (build 135.937) is available now.

You’ll get an automatic update notification. If you are using WebStorm 8.0.2, you could use a patch-update. If you’re using earlier versions of WebStorm, you should download WebStorm installation file for your OS on the product website and reinstall WebStorm.

This update addresses an issue with AngularJS interpolation and some other bugs in various subsystems. The full list is available in the release notes.

Please report any bugs and submit feature requests on our issue tracker.

Develop with pleasure!
JetBrains WebStorm Team

Posted in Release Announcements | 6 Comments

Guide to Node.js Development with WebStorm

In this short blog post we would like to put together all the tutorials we have so far on Node.js development workflow with WebStorm and other JetBrains’ IDEs.
Hope that it would help you to get started with Node.js in WebStorm and master your workflow.

Getting started with Node.js

The following videos are available in this playlist.

Running and Debugging Node.js apps

Getting started with Express

Continue reading

Posted in Screencast, Tutorials | 12 Comments

WebStorm 8.0.2 Bug Fix Update is Available

WebStorm 8.0.2 bug fix update (build 135.831) is available now.

If you’re using WebStorm 8.0.1, you’ll be prompted  to install a patch-update (will be available within an hour). Otherwise, you can download a fresh installer for your OS on the WebStorm website.

This update contains quite a lot of fixes in various product subsystems. The full list of addressed issues is available in the release notes.

Please report any bugs and submit feature requests on our issue tracker.

Develop with pleasure!
JetBrains WebStorm Team

Posted in Release Announcements | Leave a comment

WebStorm 9 Development Roadmap Discussion

We on the WebStorm team have drafted a WebStorm 9 development roadmap that we would like to share with you and get your feedback.

Please note the developed roadmap is not a finalized list of features that you’ll see in WebStorm 9. It’s pretty flexible and may be subject to changes. Furthermore, we haven’t included improvements in the existing features that we are planning to work on.

WebStorm 9 is planned for release in late 2014. Our Early Access Program will start a couple of months before the release.

The major issue that we are going to address in the upcoming release is WebStorm’s performance when working with large JavaScript projects. While this issue may not be apparent at first, it is quite complex and very important, and we work on it to make WebStorm faster and much more stable.

The highlights of the roadmap include:

We are going to finish our work on Yo integration (WEB-6744) and improvements in CSS3 support that we weren’t able to finish for WebStorm 8 release.
You can see the full list of features on the roadmap draft.

There is one more thing that we are currently investigating and would like your opinion on: possible PhoneGap integration. If you’re using it, how WebStorm could improve your experience with building mobile apps with PhoneGap? Please share your thoughts.

We’ll be very happy to hear your comments, idea and suggestions here or on our issue tracker where you can vote for issues or submit new feature requests.

Develop with pleasure!
JetBrains WebStorm Team

Posted in Early Access Preview | Tagged | 98 Comments

[Webinar Recording] WebStorm 8: Mastering AngularJS, spy-js, Grunt, and Multi-Selection Workflows

The recording of our April 24th webinar with John Lindquist, WebStorm 8: Mastering AngularJS, spy-js, Grunt, and Multi-Selection Workflows, is now available on JetBrains YouTube channel.

In this webinar you will learn how to get the most out of the new WebStorm 8 features. John shows advanced AngularJS support in action and how integration of Grunt task runner and multi-selections in the editor helps optimize your workflow in WebStorm and speed up your daily development tasks. We also take a closer look at a brand new tool in WebStorm: spy-js, a powerful JavaScript tracer.

In this post we’d like to address the some of the most frequent questions we had during the webinar.
Continue reading

Posted in Tutorials, Webinar | Tagged , , | 7 Comments