Blog Blog
Home
Home/WebStorm/Using External Tools: ESLint autofix, React Native and Prettier

Using External Tools: ESLint autofix, React Native and Prettier

Ekaterina Prigara

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.

ESLint

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.

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.

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

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

find-action-eslint

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.

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:

run-react-native-ios

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!

find-action-react-native

Using prompt

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

Prettier

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.

prettier-external-tools

The WebStorm team

#eslint #react-native
Comments below can no longer be edited.

72 Responses to Using External Tools: ESLint autofix, React Native and Prettier

  1. Steve Daly says:

    August 11, 2016

    Thanks for the article. I get the following error when I try to run eslint –fix.

    ESLint is running within WebStorm and it works from the command line within the project.

    /usr/local/bin/eslint –fix server/index.js
    Cannot find module ‘babel-eslint’
    Error: Cannot find module ‘babel-eslint’
    at Object.ModuleResolver.resolve (/usr/local/lib/node_modules/eslint/lib/util/module-resolver.js:75:19)
    at Object.load (/usr/local/lib/node_modules/eslint/lib/config/config-file.js:518:42)
    at loadConfig (/usr/local/lib/node_modules/eslint/lib/config.js:64:33)
    at getLocalConfig (/usr/local/lib/node_modules/eslint/lib/config.js:136:23)
    at Config.getConfig (/usr/local/lib/node_modules/eslint/lib/config.js:263:22)
    at processText (/usr/local/lib/node_modules/eslint/lib/cli-engine.js:231:27)
    at processFile (/usr/local/lib/node_modules/eslint/lib/cli-engine.js:306:18)
    at executeOnFile (/usr/local/lib/node_modules/eslint/lib/cli-engine.js:679:23)
    at /usr/local/lib/node_modules/eslint/lib/cli-engine.js:716:13
    at Array.forEach (native)

    Process finished with exit code 1

    • Ekaterina Prigara says:

      August 11, 2016

      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.

  2. Mörre Noseshine says:

    August 16, 2016

    (OT)

    JetBrains on Hacker News:

    https://news.ycombinator.com/item?id=12292148

    • Ekaterina Prigara says:

      August 16, 2016

      Thanks for the link! And thank your reports. Sorry that we are not always able to address all the issues, especially those related to the performance, as quick as we wish we could.

  3. rethus says:

    October 18, 2016

    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:

    “`
    import React, { Component } from ‘react’;
    ^^^^^^
    SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.runMain (module.js:590:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

    Process finished with exit code 1“`

    Did you have any Idea, where the issue is?

    • Ekaterina Prigara says:

      October 18, 2016

      Sorry, not sure how it’s related to this post. But have you added a .babelrc file to your project?

      • rethus says:

        October 19, 2016

        Ok, sorry for this offtopic, But I’m new to react-native, the irc-channel at freenode.net is dead and I don’t know where to get the answer (specially for phpstorm and react-native).

        Maybe you could recommend me an IRC?

        BTW: Yes, there is an .babelrc, inside is this :

        {
        “presets”: [“es2015″,”react-native”]
        }

        Maybe you could make a short blog-theme with first steps with phpstorm and react-native. This would be awesome.

        • Ekaterina Prigara says:

          October 20, 2016

          I would recommend to use react-native init to generate a project template. It has all the required configuration files and you can just start writing the app.

  4. foo says:

    November 1, 2016

    every time i run this command i got env: node: No such file or directory
    but when i copy the command and paste it in terminal it works !

    • Ekaterina Prigara says:

      November 2, 2016

      Can you please provide a bit more details on what program you run and how. Thanks!

    • Fabio Masini says:

      November 4, 2016

      You are probably using node from your Ubuntu/Debian distro which use “nodejs” as command for execute node. Try something like ln -s /usr/bin/nodejs /usr/bin/node or, better, use nvm.

      • Alex says:

        March 4, 2017

        I’m using `nvm` but still have the same problem

        • Ekaterina Prigara says:

          March 6, 2017

          Can you run node via the OS terminal? What OS do you use?

          • Alex says:

            March 6, 2017

            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 `nvm`should do this by default.
            By the way thank you for fast response.

  5. Pierre says:

    November 4, 2016

    Hi,

    To make react-native work in windows the Program command had to point to the react-native.cmd.

    For me it was global:
    c:\Users\{user}\AppData\Roaming\npm\react-native.cmd

    In a Terminal window, react-native run-android works fine.

    Hope this helps

    Pierre

    • Ekaterina Prigara says:

      November 4, 2016

      Right, the same way it’s described in the part about ESLint.

  6. Phillip says:

    November 16, 2016

    In Windows, with a local npm install, I do not see an eslint.cmd in the bin folder (or anywhere). Globally it is there. Can you confirm local install?

    • Ekaterina Prigara says:

      November 16, 2016

      When running `npm install -g eslint`, the path should be project_folder\node_modules\.bin\eslint.cmd.

  7. Phillip says:

    November 16, 2016

    Right. Globally it is there. What about locally?

    • Ekaterina Prigara says:

      November 16, 2016

      Sorry, I’ve meant `npm install eslint` in the previous comment. The screenshot is captured in the project’s node_moduels folder after local installation.

  8. Phillip says:

    November 16, 2016

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

    Thanks for your help!

  9. Forrest Akin says:

    February 28, 2017

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

    • Ekaterina Prigara says:

      February 28, 2017

      Hi Forrest! Thanks for sharing your experience. Sorry it didn’t well so smoothly. We’ll try to reproduce your setup and fix the way WebStorm looks for ESLint plugins.

  10. Jose Manuel Garcia Romero says:

    March 9, 2017

    Hi,

    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:

    C:\PGM\IntelliJIdeaProjects\DGEMPAGORA\agora-parent\agora-web\node_modules\.bin\prettier.cmd –write app\components\MemberBasicDetails.js

    Process finished with exit code 0

    Do I need to add some configuration file for prettier or anything else not included in this post?

    Thanks!

    • Ekaterina Prigara says:

      March 9, 2017

      Please make sure that Synchronise files after execution checkbox is checked.
      Please also try to run the same command in the terminal and see whether the file changes.

      • Jose Manuel Garcia Romero says:

        March 9, 2017

        Synchronize files after execution is checked but still the editor content does not change.

        Running the command in the terminal works fine, the output is formatted, but the content of the file does not change either.

        • Ekaterina Prigara says:

          March 9, 2017

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

          • Jose Manuel Garcia Romero says:

            March 10, 2017

            Hi Ekaterina, it’s ok now, the problem was the working directory setting in the external tool dialog, the path to the file was not correct, it was missing a suffix

            Thanks for your help!

  11. Elad says:

    March 14, 2017

    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

    Process finished with exit code 0

  12. Mike Erickson says:

    April 17, 2017

    Hey Gang

    I am trying to get Prettier to work with file watcher (so it fixes on save) but I cant seem to figure out the settings. It works fine when invoked manually?

    Suggestions?

  13. felixl says:

    June 22, 2017

    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:

    Program: node
    Parameters: .\node_modules\eslint\bin\eslint.js –fix “$FilePathRelativeToProjectRoot$
    Working directory: $ProjectFileDir$

  14. Peter says:

    June 26, 2017

    “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 .”

    Was this removed? I can autofix individual errors/warnings using Alt+Enter, but I’ve searched extensively and cannot find any option for fixing an entire file.

    • Ekaterina Prigara says:

      June 27, 2017

      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?

      • Jun says:

        August 2, 2017

        the ‘fix current file’ option exists even before 2016.3, but in my current editor it does nothing, cannot configure why..

        • Jun says:

          August 2, 2017

          aha, mistake 2016.3 as 2017.3

        • Ekaterina Prigara says:

          August 2, 2017

          You mean WebStorm 2017.2? What ESLint version do you use?

          • Levi Thomason says:

            August 26, 2017

            I updated to 2017.2 today on Mac and when I press Alt + Enter, I no longer get the “Fix current file with ESLint” intent. I’ve looked through settings and cannot see anything to turn it on/off.

            I used this constantly before the update, any ideas?

            • Ekaterina Prigara says:

              August 28, 2017

              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!

          • Levi Thomason says:

            August 31, 2017

            Sometime after my comment, the intent has reappeared. I’m wondering if it had to do with the size of the file I was editing? I do not know.

            Also, I’ve since updated WS twice, both updates included command line tools updates. My current version is WS 2017.2.3 build 172.3968.27 Aug 29th.

            I do wish I didn’t have to press Alt + Enter, Enter after every file change though. It would be great to run ESLint fix on file save.

  15. Nick says:

    August 2, 2017

    Having the same issue Jun, ‘fix current file’ does nothing

    • Nick says:

      August 2, 2017

      ├── eslint@4.1.1
      ├── eslint-config-standard@10.2.1
      ├── eslint-plugin-import@2.7.0
      ├── eslint-plugin-node@5.1.1
      ├── eslint-plugin-promise@3.5.0
      ├── eslint-plugin-standard@3.0.1

      • Ekaterina Prigara says:

        August 3, 2017

        Haven’t reproduced so far. Can you please share your ESLint configuration file and the specific error that you was not able to fix (please note that not all ESLint errors are actually fixable).

  16. Sebastian says:

    August 30, 2017

    Is there a way to run prettier only on the selected code instead of formatting the entire file?

    Thanks.

    • Ekaterina Prigara says:

      August 30, 2017

      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.

  17. buenozer says:

    September 14, 2017

    Is it possible for prettier to use a .prettierrc file? If yes, how to do that? Thanks.

    • Ekaterina Prigara says:

      September 14, 2017

      You can add the command line options that are mentioned here: https://github.com/prettier/prettier#–find-config-path-and—config

      • buenozer says:

        September 14, 2017

        Thanks a lot! 🙂

        • Jan says:

          May 29, 2018

          Hey, did you figure out how to specify the .prettierrc? the posted link is not working anymore..

          • Ekaterina Prigara says:

            May 29, 2018

            Hey Jan! If you’re using prettier via a new Reformat with Prettier action in WebStorm, you don’t have to worry about that. If you use it via a File Watcher, please check this link: https://prettier.io/docs/en/cli.html#find-config-path-and-config

          • Jan says:

            May 30, 2018

            Hey Ekaterina,
            I am using IntelliJ..do you know, if the new Reformat will be available there too, or will it always be via prettier plugin?

            I managed to get it working, the problem was, that my .prettierrc was not at the root of the project.

            I am using filewatcher now, but of course it would be nicer, if it would be available via Reformat, as it is in WebStorm now..

            Thanks.

            • Ekaterina Prigara says:

              May 30, 2018

              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!

          • Jan says:

            May 31, 2018

            ok cool, here’s the issue: https://youtrack.jetbrains.com/issue/IDEA-193025

            • Ekaterina Prigara says:

              June 1, 2018

              Thank you! 🙂

  18. Kowalski says:

    December 4, 2017

    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 .

    the above mentioned built in eslint autofix feature doesn’t work on WS 2017.3 and OSX 10.12.6 (16G1036)

    • Ekaterina Prigara says:

      December 5, 2017

      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

      • kowalski says:

        December 5, 2017

        Are you running WS ont the same version of OSX ?
        I don’t have this issue on Ubuntu. Only on OSX.

        • lena_spb says:

          December 6, 2017

          We’ve tried it on 3 different OSX machines, to no avail. Please provide logs I asked you for in https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000741090/comments/115000619630

        • Ekaterina Prigara says:

          December 6, 2017

          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.

  19. wintersocram says:

    December 5, 2017

    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.

    Thanks

    • Ekaterina Prigara says:

      December 6, 2017

      Thanks for pointing out the problem. The path on Windows, if Prettier is installed globally, should be \prettier.cmd
      I’ve updated the blog post accordingly.

  20. Suther says:

    August 30, 2018

    How does build in “Reformat Code”, Prettier and ES-Lint work together?

    Example:
    I have an JS-File, and if I do “ALT+Shift+L” to reformat code…
    …it has other results than reformatting with prettier: “CTRL+ALT+SHIFT+P”.

    And after all, I still need to use the “Fix eslint Problems” “ALT+SHIFT+E”.

    So is there a recommended way to do a Fine-Tunning or combine those steps?

    • Ekaterina Prigara says:

      August 30, 2018

      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.

      • Suther says:

        August 30, 2018

        Thank you for the nice explanation.

  21. Pablo says:

    September 30, 2018

    It would be nice to be able to run this tool on file save. And not need a keyboard combination for this.
    I know I can add a file watcher, I tried, but Webstorm auto-save was was making me crazy

    • Ekaterina Prigara says:

      October 1, 2018

      It’s possible to configure how the IDE saves files in Preferences | Appearance and Behavior | System Settings – Synchronization.
      You can also try the Save Actions plugin: https://blog.jetbrains.com/webstorm/2014/08/live-edit-updates-in-webstorm-9/

      • Sam Blowes says:

        November 15, 2019

        Currently a beta version of this plugin will work with prettier, but not with eslint

  22. Sam Blowes says:

    November 15, 2019

    For me the watcher is not finding the plugins correctly.

    “`
    cmd.exe /D /C call C:\Projects\scratch\epay-frontend\node_modules\.bin\eslint.cmd –fix C:\Projects\scratch\epay-frontend\apps\epay-storybook\src\components\HelloWorld.vue

    Oops! Something went wrong! 🙁

    ESLint: 6.6.0.

    ESLint couldn’t find the plugin “eslint-plugin-vue”.

    (The package “eslint-plugin-vue” was not found when loaded as a Node module from the directory “C:\Users\sblowes\AppData\Local\JetBrains\Toolbox\apps\WebStorm\ch-0\192.7142.35\jbr\bin”.)

    It’s likely that the plugin isn’t installed correctly. Try reinstalling by running the following:

    npm install eslint-plugin-vue@latest –save-dev

    The plugin “eslint-plugin-vue” was referenced from the config file in “..\..\..\..\..\..\..\..\..\..\..\..\Projects\scratch\epay-frontend\.eslintrc.js”.

    If you still can’t figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.

    Process finished with exit code 2

    “`

    Using the Webstorm Built in ESLint via the context menu, works without errors. Any suggestions?

    • lena_spb says:

      November 18, 2019

      Hello!

      what working directory is configured in your file watcher settings? Looks as if it’s set to empty string. Please try changing it to $ProjectFileDir$ – does it help?

Latest Tweets

Related posts