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 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: --fix .

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

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).

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

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

Using $Prompt$ macro in the Parameters input, you can pass some additional options to the tools, for example, a port number.

Prettier

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.

Apparently you don’t have babel-eslint module installed globally (and you’re running globally installed eslint). Please try to either install it globally, or, if you have it and eslint locally, specify the local path to eslint in the External tool configuration.

I try to get react-native run on PHPStorm which is almost simlar to Webstorm.
I have add a Watcher for babel, but if it is triggerd, I got the following Error:

First I’ve run this commands successfully:
npm install babel-preset-react --save
npm install babel-preset-es2015 --save
, but if I change something in index.android.js the watcher is triggerd and throw this message:

I’m using Ubuntu 16.04, via terminal it worked well. I added ln -s /usr/bin/nodejs /usr bin node and resolved issue. But I thought that nvmshould do this by default.
By the way thank you for fast response.

I see. The folder structure globally is different. I was looking in the eslint folder not at the top level .bin. (I don’t understand Windows search. When I search for the name ‘eslint’ only the one in global comes up. Frustrating.)

I just want to share my painful experience trying to get WebStorm playing right with ESLint and what finally worked for me. My eslint config was originally split across multiple files, not necessarily in the same directory. I knew that whatever eslint plugins/parsers I used needed to be installed in the same directory as the eslint package I was using, so I made sure that everything was installed (my plugins are react and jsx-a11y, and parser babel-eslint). I tried installing everything locally and globally, but nothing was working. At this point, I hadn’t considered if the location of my eslintrc was the culprit because I was assuming that as long as all of my plugins were locally accessible in relationship to it, it wouldn’t matter. It turns out that when I put the eslintrc in my project directory, as well as all of my rule files it was extending and pointed to a local eslint package, it worked! Maybe eventually, WebStorm can add some troubleshooting instructions for ESLint integration to ease the pain for people experiencing similar issues as I did; I wasn’t able to find anything helpful online (even after several days of googling).

I’m trying to use Prettier as an external tool in IntelliJ Idea 2016.3.5 as it is described in this post but even though Prettier is being executed it does not format the file, it does nothing basically, the output is always:

–write option should update the file in-place and should not output the formatted code. The command should return something like:
app\components\MemberBasicDetails.js 40ms
Process finished with exit code 0
Please try updating the version of prettier you’re using.

I followed the instruction for prettier, and it works well, thanks :)
However, I get an exception immediately afterwards. It doesn’t happen when I run the command from the CLI.
Btw, everything is working as expected, it’s just annoying.

/Users/elad/.nvm/versions/node/v7.5.0/bin/prettier –trailing-comma es5 –tab-width 4 –write javascripts/angular/directives/authenticity/tabIndex.js
javascripts/angular/directives/authenticity/tabIndex.js 53ms
java.io.IOException: Cannot run program “bunyan”: error=2, No such file or directory
at java.lang.ProcessBuilder.start(ProcessBuilder.java:1048)
at java.lang.Runtime.exec(Runtime.java:620)
at java.lang.Runtime.exec(Runtime.java:528)
at cyue.idea.plugins.bunyan.PipeProcessing.convert(PipeProcessing.java:48)
at cyue.idea.plugins.bunyan.BunyanFilter.applyFilter(BunyanFilter.java:111)
at com.intellij.execution.filters.CompositeInputFilter$1.applyFilter(CompositeInputFilter.java:70)
at com.intellij.execution.filters.CompositeInputFilter.applyFilter(CompositeInputFilter.java:48)
at com.intellij.execution.impl.ConsoleViewImpl.print(ConsoleViewImpl.java:609)
at com.intellij.execution.impl.ConsoleViewRunningState$1.onTextAvailable(ConsoleViewRunningState.java:43)
at sun.reflect.GeneratedMethodAccessor54.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at com.intellij.execution.process.ProcessHandler$4.invoke(ProcessHandler.java:226)
at com.sun.proxy.$Proxy15.onTextAvailable(Unknown Source)
at com.intellij.execution.process.ProcessHandler.notifyTextAvailable(ProcessHandler.java:200)
at com.intellij.execution.process.ColoredProcessHandler.textAvailable(ColoredProcessHandler.java:96)
at com.intellij.execution.process.ColoredProcessHandler.coloredTextAvailable(ColoredProcessHandler.java:71)
at com.intellij.execution.process.AnsiEscapeDecoder.processTextChunk(AnsiEscapeDecoder.java:179)
at com.intellij.execution.process.AnsiEscapeDecoder.escapeText(AnsiEscapeDecoder.java:76)
at com.intellij.execution.process.ColoredProcessHandler.notifyTextAvailable(ColoredProcessHandler.java:60)
at com.intellij.execution.process.BaseOSProcessHandler$SimpleOutputReader.onTextAvailable(BaseOSProcessHandler.java:290)
at com.intellij.util.io.BaseOutputReader.sendText(BaseOutputReader.java:202)
at com.intellij.util.io.BaseOutputReader.processInput(BaseOutputReader.java:186)
at com.intellij.util.io.BaseOutputReader.readAvailableNonBlocking(BaseOutputReader.java:105)
at com.intellij.util.io.BaseDataReader.readAvailable(BaseDataReader.java:82)
at com.intellij.util.io.BaseDataReader.doRun(BaseDataReader.java:160)
at com.intellij.util.io.BaseDataReader$1.run(BaseDataReader.java:61)
at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at java.lang.Thread.run(Thread.java:745)
Caused by: java.io.IOException: error=2, No such file or directory
at java.lang.UNIXProcess.forkAndExec(Native Method)
at java.lang.UNIXProcess.(UNIXProcess.java:247)
at java.lang.ProcessImpl.start(ProcessImpl.java:134)
at java.lang.ProcessBuilder.start(ProcessBuilder.java:1029)
… 31 more

Sharing my ESLint Fix configuration for Windows 10, using local install of eslint.
ESLint is installed to /node_modules/eslint/bin/eslint.js
You have to use ‘node’ to interpret and execute the eslint.js file, so the Edit Tool dialog’s “Tool Settings” will look like this:

There should be an option to fix the current file with ESLint, we haven’t removed that. And there has never been an option to fix only one problem – ESLint doesn’t support that.
Can you please share a screenshot? What ESLint and WebStorm versions do you use?

ESLint is enabled in Preferences | Languages and Frameworks | JavaScript | Code Quality Tools | ESLint, right? Do you see any other intentions related to ESLint in this popup, e.g. ESLint settings or Edit .eslintrc? Can you please share a screenshot? Thanks!

No, sorry, I don’t think it’s possible now. Prettier allows specifying the range, but it requires setting an offset (number on symbols from the file start), but macro in WebStorm’s External Tools allows only passing the location of the selection as line and column numbers.

In IJ, you do need a plugin, but it’s actually the same plugin that is installed in WebStorm by default.
Can you please submit a feature request about adding a path to the prettier config to the UI: https://youtrack.jetbrains.com/issues/WEB
Thank you!

Can’t reproduce it. Please provide more details about the problem: what ESLint version do you use? Do you have ESLint enabled in the project? Do you see the quick-fix “Fix current file with ESLint” or not? You can contact our technical support using this form: https://intellij-support.jetbrains.com/hc/en-us/requests/new

Yes, we tried on the same OS version and it was fine. Please provide us with the additional information: the ESLint version you are using, the IDE logs (menu Help – Show logs) and the screenshots or screencast showing the problem. You can provide these details in any of the support requests you’ve created.

Hi. I dont know if is only in my system, but as I saw a few comments with the same problem in other sites, maybe is you could add a small complement:
On Windows run npm config get prefix to get the location of your global node modules and add to it node_modules\prettier => Here, on Webstorm, you need to point to the prettier.cmd file. Usually Windows put it on [npm config get prefix]\prettier.cmd, not [npm config get prefix]\node_modules\prettier.cmd. And for some reason, not put “.cmd” will give an error 193. This error not occurs on the prompt command.

The Reformat code action uses the IDE’s formatting tools that can be configured in Preferences | Editor | Code Style.
Please consider tools like lint-staged that can run ESLint and Prettier as a pre-commit hook. Another option would be not to use ESLint to control the code style and leave that to Prettier or the IDE.