New WebStorm 9: Simply Better. Support for Meteor, React and JSX, integration with Gulp, PhoneGap and much more

    2 weeks ago, we completely updated WebStorm - our IDE for front-end development and Node.js. We have already announced some improvements in WebStorm 9, including support for new frameworks and tools. Since then, a lot of work has been done, the results of which can be seen in WebStorm 9. In this post we will talk in detail about this new functionality and briefly recall everything else.


    React and JSX Support

    In less than 6 months since the release of WebStorm 8 and our planning of improvements for WebStorm 9, the JSX syntax support request has become the most popular in our tracker, gathering more than 200 user votes. On blogs and twitter, everyone vied with each other to praise the new library, front-end developers started using React, and we realized that we needed to urgently begin work on its support.

    This is how WebStorm 9 introduced highlighting and auto-completion for JSX tags and JavaScript expressions inside JSX, as well as navigation to the React component declaration and Rename refactoringfor them. WebStorm's built-in inspections work for JSX code, but we look forward to JSX support in JSHint and ESLint.

    We recommend that you watch a webinar entry in which John Lindquist talks about developing with React in WebStorm.
    We continue to work on improvements, so we are pleased to pekvestam YouTrack .

    New features of spy-js: support for Node.js and ES6, code addition and Magnifier

    In the last WebStorm release, we added spy-js , a tool for tracing and profiling JavaScript code. With the WebStorm update, spy-js now allows you to profile not only client-side code, but also Node.js (which can be found on our blog ), and also supports EcmaScript 6.
    Now you can save trace results to a file and reopen using points Save / Load trace in the spy-js menu.

    When the spy-js session is started, the tool not only collects all available information about the code execution, but also creates a kind of feedback from the IDE in each function executed. Artyom Govorov , spy-js developer, came up with this link for code completionand execution of arbitrary code in the context of functions performed. This was what he implemented in WebStorm 9!

    So, first you need to make sure that the spy-js menu has a checkmark next to Enable spy-js autocomplete and magnifier . After that, run spy-js, open our application in a browser (or just run it if we work with Node.js) and start editing its code in WebStorm. For an already executed code fragment, when editing it in the auto-completion list, we can see the spy-js and browser icons. This means that this option was suggested by spy-js based on the results of its actual implementation.

    Unlike the static code analysis that WebStorm runs for regular auto-completion, spy-js knows exactly what methods and properties are currently available.

    Using functionMagnifier from spy-js you can see information about the values ​​of objects according to the results of code execution, similar to Evaluate expression when debugging, but without breakpoints. Information appears when you hover over any object, and not just the parameters and return values, on the client-side and Node.js code executed when spy-js is running.

    You can read more about this in our blog (in English).

    ESLint and JSCS

    The list of WebStorm-supported tools for checking the quality and style of code (in addition to the built-in inspections of the IDE itself) has been supplemented by integration with ESLint .

    ESLint is a lot like JSHint, the main difference is that the set of checks can be extended with plug-in rules. WebStorm checks code using ESLint on the fly. Unfortunately, this does not work as fast as JSHint, but this is already a feature of the tool itself. ESLint must be pre-installed via npm.

    We also added integration with JSCS , a tool for checking the code style (more about which you can read on the Habr) In WebStorm settings, you can enable verification using JSCS and select a configuration file or one of the existing presets. Formatting errors will be displayed in the editor. We hope that the code styles inside WebStorm are configured in accordance with your team style, and you will not see warnings from JSCS.

    Code formatting

    Let's continue on code formatting. In the last post about WebStorm 9 EAP, we talked about the editorConfig plugin added to WebStorm , which allows you to share code style settings in a project in different editors. All rules are described in the project .editorconfig file. Note that formatting rules in .editorconfig by default take precedence over settings in the IDE. You can turn off EditorConfig in the Editor | Code Style .

    Another innovation in formatting settings is called Detect and use existing file indents for editing ( Editor | Code Style) As you might guess, with this option, the editor will now determine and reuse the current formatting settings in the file associated with indentation.

    Scratch files

    WebStorm 9 allows you to create temporary files in a project, they are also Scratch files . According to the Shift-Cmd-N shortcut on Mac / Ctrl + Alt + Shift + Insert on Windows or Linux, you can create a temporary file by selecting the desired file type. All editor features, such as code completion and inspection, are available in Scratch files.

    Briefly about other updates

    To complete the picture, we’ll go through other new features in the 9th version, which we wrote about in more detail in the last post :

    • Support for the Meteor framework : WebStorm defines Meteor projects,
      provides autocompletion of the Meteor API code, allows you to debug both the server and client parts of the Meteor application;
    • Integration with PhoneGap, Cordova and Ionic : added the ability to create new projects, as well as run and emulate commands using Run configuration in WebStorm;
    • Updated Live Edit allows you to automatically restart Node.js applications when changing code;
    • Gulp Build System Integration ;
    • Postfix templates for JavaScript;
    • Improved support for the Polymer library ;

    And finally, a few more updates that we would like to talk about.

    Integration with pub serve for Dart projects

    WebStorm 9 has added integration with pub serve for Dart projects. Now, when working with Dart, when opening an application in a browser or debugging, WebStorm will automatically start pub serve. Any messages during pub serve will be displayed in the appropriate window in the IDE. In addition, there have been many improvements to Dart support, such as the addition of Dart isolates debugging and the ability to quickly open the Dart Observatory .

    Improved CSS3 Support

    We've redesigned CSS support in WebStorm, adding support for all the latest CSS3 specifications. As a result, auto-completion for properties and values ​​from CSS3 has improved, as well as new inspections for CSS.

    Indexing node_modules in a new way

    Modern projects use more and more diverse tools and dependencies on Node.js. For example, the Web Starter Kit project template (which, incidentally, was added to the list of new project templates) has 25 direct dependencies from npm only.
    We made it so that WebStorm now indexes only these dependencies themselves, excluding their internal node modules from the index. You can return to full indexing in the Languages ​​& Frameworks | Node.js and npm .

    Values ​​when debugging directly in the editor

    A new debugger feature was added to WebStorm 9: now, when debugging, the values ​​of objects are displayed directly in the editor next to the code.

    What's next?

    To learn more about WebStorm 9, as well as download a free 30-day trial version of the IDE, visit the product page .
    Upgrading to version 9 is free for anyone who has acquired a license after October 22, 2013. We also remind you that all JetBrains IDEs are now free for students .

    We will be happy to answer your questions in the comments.
    We are waiting for comments and suggestions on the new version in our bug tracker .

    Develop with Pleasure!

    Also popular now: