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.
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, run this in the command line from the project root (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:
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: --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).
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 | 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.
React Native
With React Native you can build modern mobile apps using JavaScript. WebStorm offers advanced support for React and JSX, and can provide you with core coding assistance for React Native apps. React Native comes with the CLI (and we assume you have already installed it and configured your development environment), which allows you to build and run apps for iOS or Android. 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:
Now type React Native in the Find action dialog to see and run the configurations. That’s it!
Using prompt
Using $Prompt$ macro in the Parameters input, you can pass some additional options to the tools, for example, a port number.
Your WebStorm Team