JavaScript Annotated – January 2016

Keeping up with everything that’s going on in the web development community and the JavaScript ecosystem can be challenging. With lots of articles and blog posts that we on the WebStorm team go through on a regular basis, we thought we’d share some that we enjoyed and discussed the most over the past month.

We’re not going for the most comprehensive digest out there, but want to focus mainly on covering the technologies already supported in WebStorm as well as the industry’s best practices.

JavaScript, libraries and frameworks

Dr. Axel Rauschmayer, who’s well known for his blog 2ality and multiple books about JavaScript, has started a new weekly email newsletter, ES.next News.

Jake Archibald in his blog talks about web streams and how they will help us take even more control over network processes and improve the performance of web pages.

On January 14 jQuery celebrated its 10th birthday and is still one of the the most popular frameworks for web development. John Resig, the author of jQuery, shares his memories and jQuery milestones. On the same day jQuery 3.0 reaches beta… and it no longer supports IE6-8.

If you’ve missed this news, as of January 12, 2016, Microsoft has ended support for older versions of Internet Explorer (versions 6-8).

Continue reading

Posted in General Announcements | Tagged , , , , , | 6 Comments

WebStorm 12 EAP, 144.3357: SSH console, debugging with Webpack and fixes

A fresh WebStorm 12 EAP build (144.3357) is now available for download!

As always, you can download it here or, if you have a previous EAP build (144.3143) installed, you should soon get a notification in the IDE about a patch update.

The highlights of this update include:

  • SSH Console plugin is now bundled with WebStorm
  • Initial support for debugging arrow function expressions in ECMAScript 6
    arrow-functions-debug
  • Support for debugging Node.js apps built with Webpack
  • Simplified configuration for debugging client-side JavaScript code built with Webpack that doesn’t require path mappings (only when using a WebStorm built-in web server, otherwise please follow our tutorial)
  • Extract field refactoring in TypeScript
    extract-field
  • Support for comments in tsconfig.json (that’s a new feature in TypeScript 1.8)
  • Coding assistance in tsd.json, a configuration file for TypeScript Definition manager

The full list of issues addressed in this EAP build is available in the Release notes.

Read about the features and improvements added in other WebStorm 12 EAP builds:

  • WebStorm 12 EAP, 144.3600: Support for Git worktrees, updated look and feel of the Git Log, Missing import statement inspection for JavaScript.
  • WebStorm 12 EAP, 144.3143: Unused imports warning, code assistance in tsconfig.json.babelrc and .eslintrc, remote run and debug for Node.js apps, Vagrant integration, debugging Electron apps, and further improvement in Angular 2 support.
  • WebStorm 12 EAP, 144.2925: Inline rename, smarter auto-imports and Optimize imports action for TypeScript, debugging async client-side code, and improvements in Angular 2 support.

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.

– JetBrains WebStorm Team

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

Customizing the WebStorm layout

WebStorm layout has three types of major UI elements.

First of all, there’s the editor with the right and left gutters that show line numbers, status of VSC-modified lines, errors and warnings, and some other useful info.

Second, there are various tool windows such as the project view on the left with the project structure, the debugger tool window that displays when you start a debugging session, or the built-in terminal.

The third type of elements includes all the various bars like Navigation bar on the top or Status bar on the bottom. There’s also a Toolbar which is hidden by default, and a Tool buttons bar that shows icons corresponding to various tool windows.

Tip: You may notice numbers on the tool buttons; press Cmd+Number key / Alt-Number key to take you to the corresponding tool window.

You have a lot of flexibility in modifying the WebStorm layout. You can hide bars you don’t need via the View menu. You can also change the position of the tabs from the top to the left or right side of the editor, or hide them completely (see Preferences | Editor | General | Editor tabs).

ws-mininalistic-layout
Continue reading

Posted in Cool Feature | Tagged | 7 Comments

WebStorm Team going to Fluent 2016

March 9th-10th, the WebStorm team will attend O’Reilly’s Fluent conference in San Francisco, California. We are going to have an exhibitor booth at the event and are excited to meet you there! We’ll be happy to discuss the future of web development, modern frameworks and languages, as well as answer your questions and showcase WebStorm features.

Fluent is a big conference that covers major web technologies and tools including JavaScript, HTML, CSS, React, Angular, and more.

If you’re interested in attending, we’re happy to share a 25% discount for Fluent conference passes. Simply use the code: JetB25

We’ll be represented by Dennis Ushakov (team lead), Sergey Simonchik (software developer) and Ekaterina Prigara (product marketing manager), who will be glad to answer your questions about WebStorm and other JetBrains products. And of course we’ll have lots of new WebStorm and JetBrains stickers to give out.

See you there!

Posted in Conferences & Events | Tagged , | Leave a comment

WebStorm 12 EAP, 144.3143: remote debug for Node.js, unused imports warning, debugging Electron and more

A new WebStorm 12 EAP build is now available! The highlights of this update include: running and debugging Node.js apps remotely from the IDE, unused import warning for JavaScript and TypeScript, more improvements in Angular 2 support, and more.

As always, you can download it here or, if you have a previous EAP build (144.2925) installed, you should soon get a notification in the IDE about a patch update.

Read about the features and improvements added in other WebStorm 12 EAP builds:

  • WebStorm 12 EAP, 144.3600: Support for Git worktrees, updated look and feel of the Git Log, Missing import statement inspection for JavaScript.
  • WebStorm 12 EAP, 144.3357: SSH Console, Extract field refactoring in TypeScript, support for debugging Node.js apps built with Webpack, and more.
  • WebStorm 12 EAP, 144.2925: Inline rename, smarter auto-imports and Optimize imports action for TypeScript, debugging async client-side code, and improvements in Angular 2 support.

Unused imports warning

WebStorm will now highlight any unused ES6 imports in JavaScript and TypeScript files.

remove-unused-import

With Optimize imports (Ctrl-Alt-O) (which now also works in JavaScript files), you can get rid of any unused imports and merge multiple import statements for symbols from one module. Or you can remove each unused import individually using a quick-fix – just press Alt-Enter on the highlighted import. Continue reading

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

WebStorm 12 EAP, 144.2925: debugging async code, smarter auto imports and more

A fresh WebStorm 12 EAP build (144.2925) is now available!

You can download it here and install it side-by-side with your stable version of WebStorm. Or if you’re subscribed to the EAP update channel in the IDE and have already installed a previous EAP build, you should get a notification about a patch-update.

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

Inline rename for TypeScript

You can now use Rename refactoring in the TypeScript code inline. That means that you can just hit Shift-F6, change the name right in the editor and it will be instantly refactored across the whole project, no Rename dialog anymore.

inline-rename-for-ts

Smarter imports

Auto imports in TypeScript became smarter: now symbols from one module are automatically added into one import statement.

Before that, when you type, for example, @Injectable, the import would have generated the following way:

auto-imports

And now:

smarter-imports

This behaviour could be configured in Preferences | Editor | General | Auto imports.

And with a new Optimize imports actions (Ctrl-Alt-O) WebStorm can merge imports that are already typed in the similar way. This works now only for the TypeScript files, but we will extend it to ES6 files as well.

Debugging async code

WebStorm now allows you to debug asynchronous client-side code in Chrome: check the Async checkbox on the debugger pane and now once a breakpoint inside an asynchronous function is hit or you step into that code, you can see a full call stack, including a caller and all the way to the beginning of asynchronous actions.

async-debug Continue reading

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

Working with ReactJS in WebStorm: Linting, refactoring and compiling

We recently explored coding assistance that WebStorm provides for React and JSX. Now we would like to talk a bit about the tools in the React ecosystem. In this area it’s not easy to provide a complete overview as tools are developing at a crazy pace. So right now we’ll focus on linters (code quality tools), refactoring and tools that can help us compile code.

Code analysis

As you may know, WebStorm has a wide range of built-in inspections for JavaScript and HTML, and these inspections also work for JSX code.

For example, WebStorm alerts you in case of unused variables and functions, missing closing tags, missing statements and much more. For some inspections WebStorm provides quick-fixes, like add a missing semicolon:

react-inspection

You can customize the list of inspections in Preferences | Editor | Inspections. Disable those you don’t want to see, or change severity level from warning to error or vice versa.

On top of such inspections, you can also use linters like ESLint and JSCS for the JSX code. Let’s talk about these in more detail.

ESLint

ESLint is a linting utility that provides a wide range of linting rules, which can also be extended with plugins. WebStorm integrates with ESLint and allows you to see warnings as errors reported by ESLint right in the editor, as you type. Continue reading

Posted in Tutorials | Tagged , , | 8 Comments

WebStorm 12 roadmap and EAP

Time flies fast and we are already starting the Early Access Program for the next major WebStorm release. You can download WebStorm 12 EAP, build 144.2608, right now. You can install it side by side with WebStorm 11. No active subscription is required.

While we don’t have that many new features to show you right now, we hope you’ll try out some of the improvements (like support for the new Angular 1.5 Component helper and code insights for Angular 2 bindings), performance fixes for JavaScript and numerous fixes that have already landed in WebStorm 12 EAP.

Also, with this being a perfect time for New Year’s resolutions, we would like to share with you our plans for the next couple of months.

Better coding assistance for JavaScript, ECMAScript and TypeScript

We’re always working on improvements in language support, but this time we want to allocate some extra time to work on refactoring options available for JavaScript, ES6 and TypeScript. And of course, performance is always our top priority: we hope to deliver faster indexing for big JavaScript projects, faster code completion results, and more.

Your CPU snapshots showing any IDE performance issues are always very welcome and appreciated.

Keeping up with the frameworks: React, Angular 1.5 and 2

With so many great frameworks around and already supported in WebStorm, we want to make sure that WebStorm users can get the best coding assistance for them with support for all the latest features. As we see a big (and growing) interest in React in the community and the strong position of Angular, we want to further improve support for these frameworks in WebStorm with more smart features.

There are also some things on our list that had been planned for but unfortunately did not make it into WebStorm 11. We have revised some of the initial ideas and hope to start working on some of them in the nearest future:

Next steps in npm support improvements
WebStorm 11 included npm script integration and some npm-related inspections in code. Now it’s time to add coding assistance for packages and their versions in package.json, and to support various scenarios of managing project Node.js dependencies from the IDE.

Webpack support
While we’ve made WebStorm able to debug apps built with Webpack, we’re still thinking about the best way to support Webpack-specific require statements.

Running and debugging Node.js applications remotely
We’d like to add an option to run Node.js applications remotely from the IDE and debug them. We have already started working on a remote run via SSH on a remote machine and then we plan to enhance the feature with the integration with Docker and Vagrant.

Other things that we are considering and may work on include:

  • Options to run and debug Electron applications
  • support for CSS variables
  • further Flow integration (if it becomes available for Windows)
  • deeper integration with build tools (may be some new workflow that could replace the File watchers), and more.

We want to hear your opinion before deciding which of these features will be implemented in WebStorm. So, our issue tracker is always open for your feature requests (and bug reports). Let us know what you think!

Read about the features and improvements added in the recent WebStorm 12 EAP builds:

  • WebStorm 12 EAP, 144.3600: Support for Git worktrees, updated look and feel of the Git Log, Missing import statement inspection for JavaScript.
  • WebStorm 12 EAP, 144.3357: SSH Console, Extract field refactoring in TypeScript, support for debugging Node.js apps built with Webpack, and more.
  • WebStorm 12 EAP, 144.3143: Unused imports warning, code assistance in tsconfig.json, .babelrc and .eslintrc, remote run and debug for Node.js apps, Vagrant integration, debugging Electron apps, and further improvement in Angular 2 support.
  • WebStorm 12 EAP, 144.2925: Inline rename, smarter auto-imports and Optimize imports action for TypeScript, debugging async client-side code, and improvements in Angular 2 support.

– JetBrains WebStorm Team

Posted in Early Access Preview, General Announcements | 45 Comments

WebStorm 11.0.3 is now available

WebStorm 11.0.3 is now available!

This update brings various fixes and improvements, mostly in the core IntelliJ platform, the whole list of addressed issues is available in the Release notes. In addition to that WebStorm 11.0.3 adds support for a new unit testing package for Dart.

Click Configure – Check for update on the IDE Welcome screen to update. You can use a patch-update for WebStorm 11.0.2. Or, you can download WebStorm 11.0.3 from our website.

– JetBrains WebStorm Team

Posted in Release Announcements | 34 Comments

WebStorm 11.0.2 is now available

WebStorm 11.0.2 is now available! You can download it from our website or install a new version directly from WebStorm 11.0.1.
This update brings lots of bug fixes and various improvements. Here are some highlights.

Better support for npm 3

npm 3 brings a new flat structure of dependencies. Previously, to make indexing faster WebStorm indexed only top level folders in the node_modules directory, excluding module’s own dependencies. With the new flat structure the old approach doesn’t work. So in WebStorm 11.0.2 we now first check the list of the dependencies in the package.json file and then index only those modules.

npm3

Improved auto import for any TypeScript symbol

WebStorm can now automatically import any TypeScript symbol from other project files and modules right as you type.

angular-completion-imports

We have also updated our built-in TypeScript compiler to version 1.7.3 and improved support for multiple tsconfig.json files in one project. Continue reading

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