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, React Native and Prettier. The same way you can configure any other command-line tool.
Update: In WebStorm 2016.3 onwards 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.
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 eslint.cmd.
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).
When passing paths, we recommend quoting them.
You can also run
eslint --fix for the whole project (but then you would probably need .eslintignore file to exclude node_modules). To do that, tweak the parameters like this:
Once it’s configured, you can run the tool from menu Tools > External tools. Or, you can search for it by name from the Find action dialog (Cmd-Shift-A on OS X or Ctrl+Shift+A on Windows and Linux):
Alternatively, you can bind a keyboard shortcut to run this external tool. To do this, navigate to Preferences/Settings | Keymap, and then find ESLint Fix (or whatever you named your external tool configuration) under External Tools. Now you can bind a key to run ESLint fix just like you would with any of the built-in features.
Update: WebStorm 2016.3 adds support for React Native. You can now run and debug React Native apps in the IDE using a new React Native Run/Debug configurations (you can find out more about it in this blog post).
We can configure External tools to run
react-native run-ios and
react-native run-android, the two most used commands. That’s very easy, here’s an example for run-ios on macOS:
Please note that on Windows you need to specify the full path to the executable!
Now type React Native in the Find action dialog to see and run the configurations. That’s it!
Using $Prompt$ macro in the Parameters input, you can pass some additional options to the tools, for example, a port number.
Update: In the latest WebStorm versions, there’s no need to configure Prettier using External tools. See our documentation for the most up-to-date information.
Prettier allows you to format your code. Here’s how you can configure it using External tools.
On macOS, if Prettier is installed globally, the path to the program should be: prettier; if installed locally – ./node_modules/.bin/prettier.
On Windows run
npm config get prefix to get the location of your global node modules and add to it prettier.cmd. And for local installation on Windows – .\node_modules\.bin\prettier.cmd.
The WebStorm team