Using External tools: ESLint autofix, React Native and Prettier

Did you know that you can easily run many command line tools from WebStorm with just a shortcut? Well, now you do! No need to go to the Terminal, thanks to the feature called External tools.Let’s see how we can use External tools to run ESLint autofix and React Native.

Let’s see how we can use External tools to run ESLint autofix and React Native. The same way you can configure any other command-line tool.

ESLint

Update: in WebStorm 2016.3 you can use ESLint autofix in the editor without configuring External tools  – hit Alt-Enter on the ESLint warning and select Fix current file with ESLint .

ESLint is a popular linter for JavaScript that has a great number of built-in rules and can also be extended with plugins. WebStorm’s integration with ESLint allows you to see warnings and errors reported by ESLint right in the editor, as you type. (To enable that, go to Preferences | Languages & Frameworks | JavaScript | Code quality tools | ESLint.) Unfortunately, WebStorm does not yet support ESLint autofixing functionality. But we can enable that via External tools!

Assuming that you already have ESLint installed (globally or locally) and configured the rules in your project, that should be rather easy: go to Preferences | Tools | External tools and click + to add a new tool. Let’s name it ESLint Fix.

If ESLint is installed globally, we would normally run this in the command line from the project root to apply fixes (where app.js is the file we want to fix):
eslint app.js --fix

So in the External tools configuration, we need to set Program and Parameters accordingly, but using specific WebStorm macros that would add the filename of the opened file and project root path.

Please note that on Windows you need to specify the full path to the ESLint executable. If ESLint installed globally, run npm config get prefix to get the location of your global node modules and add to it node_modules\eslint.

run-eslint-fix

If on the other hand you have ESLint installed locally, replace the program with ./node_modules/.bin/eslint (on OS X) or .\node_modules\.bin\eslint.cmd (on Windows).

Continue reading

Posted in Cool Feature | Tagged , | 18 Comments

WebStorm 2016.2.1 is now available

WebStorm 2016.2.1, the first bug-fix update for the recently released WebStorm 2016.2, is now available! If you missed the WebStorm 2016.2 release, find out more about its new features and download WebStorm 2016.2.1 on the What’s new page. And if you are already using it, you’ll soon get a notification about available patch-update.

This update brings over 80 bug fixes in various subsystems, including fixes for debugging Karma tests from the IDE. You can look through them in the Release notes.

In addition to that WebStorm 2016.2.1 also brings some new features and improvements.

ui-router state diagram

With this new feature, you can see a diagram illustrating the relations between views, states and templates in AngularJS app that use ui-router. You can invoke Show AngularJS ui-router State Diagram from the Find action dialog (Shift-Cmd-A on OS X or Shift+Ctrl+A on Windows and Linux) or from the file context menu in the editor.

Continue reading

Posted in Release Announcements | Tagged | 30 Comments

WebStorm 2016.2.1 EAP, 162.1447: ui-router state diagram and bug fixes

We are rolling out a preview for the WebStorm 2016.2.1 (162.1447), a bug-fix update to the recently released major WebStorm update.

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

ui-router state diagram

With this new feature (that we were still finishing at the moment of the initial WebStorm 2016.2 release), you can see a diagram illustrating the relations between views, states and templates in AngularJS app that use ui-router. You can invoke Show AngularJS ui-router State Diagram from the Find action dialog (Shift-Cmd-A on OS X or Shift-Ctrl-A on Windows and Linux) or from the file context menu in the editor.

ui-router-852@2x

WebStorm 2016.2.1 EAP also brings lots of bug fixes and minor improvements. We’ve addressed the issue with debugging Karma tests from the IDE. The full list of addressed issues can be found in the Release notes.

Please report any issues to our tracker. Thanks!

Your WebStorm Team

 

Posted in Cool Feature | Tagged , , | 12 Comments

WebStorm 2016.2: Drag files into HTML and quotes style

Things that automate some small but really routine tasks are the best. That’s why we made possible to add links to JavaScript and CSS files and images by dragging them into the opened HTML file.

If you drag a JavaScript file, WebStorm will automatically create <script src="file_name.js"></script> tag inside the head tag in the HTML file. For CSS files it will add <link rel="stylesheet" href="file_name.css">:

drag-css-js-to-html-1600

Drag an image into a specific place inside the HTML body to add an img tag with width and height attributes:

drag-image-to-html-1600

You can configure whether you’d like to have double or single quotes in this generated code in Preferences | Editor | Code Style | HTML – Other – Generated quote marks.

That would actually also affect all quotes added, thanks to code completion, for example when you type <div class=""></div>. If you enable the Enforce on reformat option, the quotes will be replaced according to the selected style with the Reformat code action (Alt-Cmd-L on OS X, Ctrl+Alt+L on Windows and Linux).

Your WebStorm Team

Posted in Cool Feature | Tagged , | 15 Comments

WebStorm 2016.2 released: TypeScript 2.0, improved support for React, Angular CLI, and more

Please welcome the official release of WebStorm 2016.2, the second update for our JavaScript IDE this year. This update brings even better experience while editing and refactoring JavaScript and TypeScript code and steps up the IDE’s debugging capabilities.

Download WebStorm 2016.2 for your OS on the What’s new page on our website.

Here are the highlights of this update:

  • Support for the upcoming TypeScript 2.0 features.
  • Improvements in React support: coding assistance for component properties defined using PropTypes, support for non-DOM attributes and lifecycle methods.
  • Integration with Angular CLI for creating new projects and the collection of Angular 2 code snippets.
  • New intentions for upgrading to ECMAScript 6: Convert to arrow function and Convert to const or let.

In other updates, you can now take advantage of support for jspm imports, support for fonts with ligatures in the editor, improvements in working with VCS patches, and more.

For a more detailed overview please visit What’s new in WebStorm 2016.2.

Your WebStorm Team

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

WebStorm 2016.2 EAP, 162.844: convert to arrow function, custom background

Fresh WebStorm 2016.2 EAP build (162.844) is now ready! You can download it here or, if you have installed the previous WebStorm 2016.2 EAP build (162.646), you should soon get a notification in the IDE about a patch update.

Convert to arrow function

We’re now working on a set of intentions that will help you to convert your code to ES6. In WebStorm 2016.1 we’ve introduced Convert to ES6 template string action. And the new intention that is now available is for converting to arrow functions.

For example, you can convert a  callback function to arrow function by hitting Alt-Enter on the function keyword:

to-arrow-function

You can also convert arrow function to a shorthand arrow function:

to-shorthand-arrow-function

We’d be very happy to hear your feedback on that! In the next WebStorm 2016.2 EAP builds we’re planning to highlight the code which can be converted and allow bulk fixes across the project files.

Continue reading

Posted in Early Access Preview | Tagged , | 13 Comments

WebStorm 2016.2 EAP, 162.646: Angular CLI, ligatures, and debugging in Firefox

The new WebStorm 2016.2 EAP build (162.646) is now available! You can download it here or, if you have installed the previous WebStorm 2016.2 EAP build (162.426), you should soon get a notification in the IDE about a patch update.

Angular CLI and code snippets

Thanks to the integration with Angular CLI,  you can now create new Angular 2 projects with ease. Install angular-cli globally via npm, click Create new project on the IDE Welcome screen, select Angular CLI from the list of project templates, enter a project name, and click Create.

angular-cli

In addition to that, we’ve added a collection of Angular 2 code snippets developed by John Papa and adapted to WebStorm by Reto Ryter.

The list of templates is available in Preferences | Editor | Live templates. To use a template, type its abbreviation in the editor and then press Tab to expand it. Press Tab again to jump to the next edit location in the template.

ng2-snippet

Support for fonts with ligatures

The editor in WebStorm now supports fonts with programming ligatures, like Fira Code, Monoid or Hasklig.

ws-ligatures

Continue reading

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

WebStorm 2016.1.3 is now available

WebStorm 2016.1.3, a new bug fix update for WebStorm 2016.1, is now available!

This update brings Angular 2 RC compatibility (the IDE now understands variable declarations with let inside the structural directives such as *ngFor and provides proper auto imports with paths starting with @angular), support for the scoped npm packages, and improvements in the TypeScript support and integration with the build tools. You can find the full list of addressed issues in the release notes for the builds 145.1616 and 145.1503.

A patch-update from WebStorm 2016.1.2 and 2016.1.3 EAP should be available.

Your WebStorm Team

Posted in Release Announcements | Tagged , , | 19 Comments

WebStorm 2016.2 EAP, 162.232: apply VCS patches, drag into HTML

Meet the new WebStorm 2016.2 Early Access Preview build (162.232)! You can download it here or, if you have already installed the first WebStorm 2016.2 EAP build, you should soon get a notification in the IDE about a patch update.

Here are some of the new things you can try in WebStorm 2016.2 EAP.

Improved way of working with patches

Now it’s so much easier to apply patches to a project!

Just copy the patch to the clipboard, go to the IDE and it will immediately suggest applying it! For example, if you’re working with a Github pull request, type .patch at the end of the URL, copy the text, go to WebStorm and voilà! Alternatively, you can drag the patch file into the IDE, or use the Apply patch action in the VCS menu.

apply-patch

Continue reading

Posted in Early Access Preview | Tagged | 2 Comments

Getting started with Electron in WebStorm

Electron allows you to build cross platform applications using only JavaScript, HTML and CSS (or ECMAScript 6, TypeScript, CoffeeScript or any language that compiles to JavaScript). It provides lots of native OS APIs for things like OS notifications or automatic updates.

There are several well-known apps that use Electron, for example Slack and Atom, as well as a great number of open-source apps built on Electron that you can learn from.

Let’s have a look at how you can set up your workflow with the Electron app in WebStorm: how to enable the coding assistance and how to run and debug Electron application.

Configuring code completion

To enable coding assistance for the Electron APIs in you project, all you have to do is to add github-electron.d.ts as a JavaScript library. Go to Preferences | Languages and Frameworks | JavaScript | Libraries, click Download, search for github-electron and download it.

The downloaded TypeScript definition file contains the descriptions of all the Electron APIs. It is used by WebStorm to provide code completion, information about method parameters and documentation.

electron-doc

To get code completion for Node.js APIs, go to Preferences | Languages and Frameworks | Node.js and npm and click ‘Enable coding assistance’.

Running and debugging Electron app

In Electron, there are 2 types of processes: the main process, which manages the web pages of your application and handles system events, and the render process, which is related to every individual page of the app and hosts most of the application logic. Continue reading

Posted in Tutorials | Tagged , | 40 Comments