Use ESLint fix for a marked area in WebStorm

Question

We use ESLint in our project so I want to format my code with the ESLint rules during the development process. I am using WebStorm and currently always use the "fix ESLint problems" function out of the context menu. Unfortunately, this formats the whole file which I don't want.

Has anybody an idea how I can format my code like the integrated "reformat code" function integrated in WebStorm (where only the selected area gets formatted) but comply with the ESLint rules?

Here is my eslintrc configuration

{
    "extends": "eslint-config-airbnb-base",
    "rules": {
        "no-console": ["error"],
        "import/no-extraneous-dependencies": {
          "optionalDependencies": true
        },
        "indent": [ "error", 4] ,
        "arrow-parens": ["error", "as-needed"],
        "max-len": [ "error", 120, 4, { "ignoreComments": true, "ignoreUrls": true} ],
        "no-underscore-dangle": [2, { "allowAfterThis": true }]
    },
    "env": {
        "jest": true,
        "es6": true,
        "node": true
    },
    "parserOptions": { "ecmaVersion": 9 }
}

Answer 1

There is no way to apply ESLint fix to selection in WebStorm, and I doubt that ESLint has an API for this. But you can import your code style preferences from .eslintrc and then use the built-in formatter ( Code | Reformat Code ) to format the selection

Answer 2

Unfortunately, WebStorm (Really the ESLint plugin for WebStorm) doesn't have support for an "inline ESLint fix" action, the option about Reformat Code will reformat all the code of the file also (And that's not what you're looking for). For now, you're stuck with the "Fix ESLint problem" option in WebStorm.