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