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 | 14 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 , | 34 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 , , , | 48 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 , | 24 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

Maintaining Consistent Code Style

Code style matters. Having a consistent code style in your project should not be underestimated, as by making code more readable for all project contributors, it can save everyone’s time and even help you avoid some errors. Our goal is to make sure the code we write follows the agreed code style and that we can easily reformat the code if and when we want.

code_styles_main

When using WebStorm, there are several ways to manage code style in your project.

  • First, the IDE can help you automatically apply configured code style settings to the code you write and reformat the existing code based on those.
  • Second, you can use EditorConfig file format for describing code style that WebStorm and your other editor understand and enforce in the project.
  • And third, you can use JSCS, a JavaScript code style checker, to ensure proper code style. WebStorm provides integration with JSCS, allowing you to see the reported code style warnings right in the editor.

Let’s have a closer look at these ways in which WebStorm can help you maintain a consistent code style.
Continue reading

Posted in Tutorials | Tagged , , | 8 Comments

WebStorm 11 EAP, 142.4148: encode HTML symbols, Meteor, TypeScript 1.6 features

A new Early Access build for WebStorm 11 (142.4148) is now available for download.

You can learn about the new features and improvements already available in WebStorm 11 EAP in our previous blog posts:

  • WebStorm 11 Early Access Program: TypeScript 1.5, support for tsconfig.json, 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.4723: code style for chained methods, React and TypeScript 1.6 support improvements.

Encode HTML special symbols

WebStorm can now help you encode (or escape) special symbols in your HTML code replacing them with HTML entities that start with &. Quick and easy!

Select a symbol or a block of code and call Encode XML/HTML Special Characters from the menu Edit or from the Find action menu (invoked with Cmd-Shift-A on OS X or Ctrl-Shift-A on Win and Linux).

encode_html_symbols
Continue reading

Posted in Early Access Preview | Tagged , | 30 Comments

WebStorm 11 EAP, 142.3805: fixes and improvements

The second Early Access build for WebStorm 11 (142.3805) is now available for download.

If you missed the announcement of WebStorm 11 EAP, you can catch up on it in this blog post.

The new build brings lots of fixes and improvements, with the whole list of addressed issues available in the release notes. The patch-update from the previous EAP build is available . You can also install WebStorm 11 EAP side-by-side with your stable version of WebStorm.

Improved HiDPI support for Windows and Linux

In WebStorm 10 we shipped initial HiDPI support which can be enabled via the -Dhidpi=true key in the .vmoptions file. It was quite limited and had some known issues. Now we’re happy to offer you improved HiDPI support that supports fractional scaling of both fonts and icons according to your system DPI settings. It’s enabled by default.

Continue reading

Posted in Early Access Preview | 8 Comments