Node.js coding assistance in WebStorm 11

In WebStorm 11 it’s now easier to start working with Node.js projects.

Configuring coding assistance for Node.js

To enable code assistance for Node.js core APIs (and that means you’ll get smart code completion, parameter info and navigation to source code), the only thing you need to do is go to Preferences | Languages & Frameworks | Node.js and npm and click Enable under Code Assistance.

nodejs_enable

An even quicker way to do the same is to use the Enable Node.js Core library quick-fix. Press Alt+Enter on the highlighted usage of one of the Node.js core modules in the code and then press Enter.

nodejs-quickfix
Continue reading

Posted in Tutorials | Tagged | 10 Comments

WebStorm 11 released: better TypeScript support, Flow, Angular 2, and more

We are very excited to announce today the release of WebStorm 11! This major update is aligned with updates for other JetBrains products that comprise JetBrains Toolbox.

Download and install WebStorm 11 right now!

WebStorm 11 refines your web development experience by adding support for powerful cutting-edge technologies and thoroughly improving the core functionality of the IDE. New features in WebStorm 11 include:

  • Improved TypeScript support: WebStorm 11 now fully supports the latest TypeScript 1.6 features and brings coding assistance for JSX and ES2015 features to TypeScript code. WebStorm also adds integration with TSLint
  • Flow and React support improvements: We’ve added basic support for Flow type annotations, and improved code completion and navigation for React components.
  • Initial support for Angular 2: WebStorm 11 provides code completion for Angular 2 binding, components and new event attributes in TypeScript and ECMAScript 2015
  • npm scripts: A new tool window lists all tasks in package.json and allows you to run any of them with a simple double-click.
  • Yeoman integration: Hundreds of new project generators are available right from the IDE Welcome screen, thanks to the new integration with Yeoman.

Among other notable updates are improved support for ECMAScript 2015, the option to run a single Mocha test, a new Preview mode for Find in path, support for debugging projects built with Webpack, new Node.js configuration and inspections, improved Dart support powered by the Dart Analysis Server, and much more.

For a more detailed overview please visit What’s new in WebStorm 11, and download the IDE for your OS.

Posted in Release Announcements | Tagged , , , , , , | 35 Comments

WebStorm 11 Release Candidate

Welcome WebStorm 11 Release Candidate (build 143.380) from our website.

The full list of addressed issues is as usual available in the release notes. You can use a patch update from WebStorm 11 Beta (143.379). No valid license required.

We would really appreciate your feedback on this final stage of our Early access program. Please report any issues on our issue tracker.

Develop with pleasure!
– JetBrains WebStorm Team

Posted in Early Access Preview | 4 Comments

WebStorm 11 Beta

WebStorm 11 goes Beta now!

You can download WebStorm 11 Beta (build 143.379) from our website. In this build we mostly focused on fixes and improvements.

The full list of addressed issues is as usual available in the release notes. You can use a patch update from the previous EAP build (143.267). WebStorm 11 Beta doesn’t require a valid license.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

Develop with pleasure!
– JetBrains WebStorm Team

Posted in Early Access Preview | 19 Comments

WebStorm 11 Public preview, 143.267: fixes

A new WebStorm 11 Public preview build (143.267) is now available for download from our website. On the new Coming in WebStorm 11 page you can find the details about all the new features available in WebStorm 11.

In addition to that we’d like to introduce a simplified configuration for Node.js coding assistance: now you just need to hit Configure in Preferences | Languages and Frameworks | Node.js and npm and WebStorm will create and enable a Node.js Сore library using your Node.js installation.

The full list of fixed issues is as usual available in the release notes. You can use a patch update from the previous EAP build (143.88). WebStorm 11 Public preview doesn’t require a valid license and is available for free.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

Develop with pleasure!
– JetBrains WebStorm Team

Posted in Early Access Preview | 11 Comments

WebStorm 11 EAP, 143.88: bug fixes

A new WebStorm 11 EAP build (143.88) is now available for download.

This build addresses the issues with templates strings and unresolved paths in JavaScript that were found in the previous EAP build.

The full list of fixed issues is available in the release notes. You can use a patch update from the previous EAP build (142.5255).

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

Read about features and improvements added in WebStorm 11:

Develop with pleasure!
– JetBrains WebStorm Team

Posted in Early Access Preview | 16 Comments

Working with ReactJS in WebStorm: Coding Assistance

ReactJS is no doubt one of the trendiest JavaScript libraries released recently and as such is seeing wide adoption.

React support was introduced in WebStorm 10 and has undergone continuous improvement since then. In this blog post we’d like to show how WebStorm can help you write code with React. We are using WebStorm 11 that you can get here.

React introduces JSX, an XML-like syntax that you can use inside your JavaScript code, but you can also use React in pure JavaScript.

If you’re using JSX, WebStorm will suggest switching language version to JSX Harmony so that it may understand JSX syntax in .js files. That’s it, now you can write JSX code and enjoy code completion for JSX tags, navigation and code analysis.

jsx_language_level

You can also switch language version to JSX Harmony manually in Preferences | Languages & Frameworks | JavaScript.

NB: Once you have react.js library file somewhere in your project, WebStorm will provide you code completion for React methods and React-specific attributes. By default, the code completion popup displays automatically as you type. For example:

react_code_completion

Continue reading

Posted in Tutorials | Tagged , | 45 Comments

WebStorm 11 EAP, 142.5255: Flow support, npm scripts, JSX in TypeScript

A new WebStorm 11 EAP build (142.5255) is now available for download.

Read about features and improvements added in WebStorm 11:

  • WebStorm 11 Early Access Program: Improved TypeScript 1.5 support, TSLint integration, Yeoman integration, new Node.js inspections, support for debugging Webpack, option to run single Mocha test, flame charts in V8 CPU profiler and more.
  • WebStorm 11 EAP, 142.3805: Improved HiDPI support for Windows and Linux, clickable links in comments, breadcrumbs in Stylus files.
  • WebStorm 11 EAP, 142.4148: Encode HTML symbols, Meteor, TypeScript 1.6 features.
  • WebStorm 11 EAP, 142.4723: New formatting options for chained methods, React and TypeScript 1.6 support improvements.

Basic Flow support

We’re happy to introduce basic support for Flow in WebStorm. Flow is a type checker for JavaScript which includes a JavaScript language extension that supports static typing.

WebStorm now understands Flow syntax and provides you with typed parameter info for annotated code in code completion.

flow_param_info
Continue reading

Posted in Early Access Preview | Tagged , , , | 49 Comments

Debugging Webpack applications in WebStorm

Webpack is a module bundler. It allows you to build your modular application similarly to the way it is done with a combination of tools like Browserify and Gulp or Grunt.

In this blog post we actually won’t dive into how to get started with Webpack, as lots of great tutorials are available in the Webpack documentation. Instead we’d like to focus on debugging applications built with Webpack in WebStorm 11 EAP (that you can learn more about here).

https://webpack.github.io/assets/logo.png

Here’s our very simple app: it’s available on Github and is already fully configured.

We have a simple Webpack configuration file that describes how files in our app are compiled and bundled. To keep it simple we won’t use any additional Webpack loaders. Webpack would bundle all our JavaScript assets in a single file that we can use in our app:

Now let’s see how we can debug our app. Continue reading

Posted in Early Access Preview, Tutorials | Tagged , | 36 Comments

WebStorm 11 EAP, 142.4723: code style for chained methods, React and TypeScript 1.6 support improvements

A new WebStorm 11 EAP build (142.4723) is now available for download.

We are already half-way though our Early access program, here’s what was done so far:

  • WebStorm 11 Early Access Program: improved TypeScript 1.5 support, TSLint integration, Yeoman integration, new Node.js inspections, support for debugging Webpack, option to run single Mocha test, flame charts in V8 CPU profiler and more.
  • WebStorm 11 EAP, 142.3805: improved HiDPI support for Windows and Linux, clickable links in comments, breadcrumbs in Stylus files.
  • WebStorm 11 EAP, 142.4148: encode HTML symbols, Meteor, TypeScript 1.6 features.

Formatting for chained methods

WebStorm now helps your format chained methods.
In Preferences | Editor | Code Style you can configure whether to wrap chained method calls in your JavaScript code on reformatting or not:

wrap_chained_methods

code_style_chained_methods

And also whether to indent them:

indent_chained_methods

Improvements in ReactJS support: better navigation and coding assistance for React-specific attributes

Now you can very quickly jump from a component usage to its definition even if it’s in a different file. Cmd-click (Ctrl-click) or hit Cmd-B (Ctrl-B) on a component name to navigate to it or hit Cmd-Y (Ctrl-Shift-I on Windows and Linux) to see a quick definition in a popup.

navigate_to_react_component

In addition to that now you can get coding assistance for React-specific attributes in JSX code, like className. Continue reading

Posted in Early Access Preview | Tagged , | 13 Comments