Vscode-eslint: Extension not auto-fixing on Save

[dracozombie19]

I got the upgrade to 2.0.4 (and subsequently to 2.0.5 a little bit ago) and I'm having trouble configuring ESLint to auto-fix issues on Save. Previously we had the "eslint.autoFixOnSave" setting, but it looks like this was replaced by the "editor.codeActionsOnSave" setting. I'm trying this configuration, but nothing is happening on Save:

{
    "eslint.alwaysShowStatus": true,
    "eslint.format.enable": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.formatOnSave": true
}

I've tried different combinations of "editor.formatOnSave" and "editor.codeActionsOnSave," but none of them seem to work for me.

[VitorLuizC]

Same happening here.

```{
// Format settings
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": false
},

// Prettier settings
"prettier.semi": true,
"prettier.endOfLine": "lf",
"prettier.singleQuote": true,

// ESLint settings
"eslint.packageManager": "yarn",
"eslint.format.enable": true,
"eslint.alwaysShowStatus": true,
}
```

[Jer-X]

Same happening here.
Other Eslint settings is default

`` "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": true,

If this extension should use Eslint v6.x?

[zinete]

Same thing

[takumiya081]

same issue in react project

before(worked these days)

{
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
}

now(not work)

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
}

[AliasT]

Not working with vue files.
After add this config, it works but slowly, try to adjust for your situation.

```json
"editor.codeActionsOnSaveTimeout": 1200

[chenbigcur]

me too.

[bobzurad]

Also experiencing this with .vue files.

@AliasT solution works, but it is not optimal.

[dbaeumer]

The correct settings are:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

to enable autofix on save. "editor.formatOnSave": true is not necessary.

To compute all possible fixes (see the lengthy discussion in https://github.com/microsoft/vscode-eslint/issues/154 why this is complicated in ESLint) I needed to change the way how these fixes are computed resulting in a more complex algorithm. Hence it takes more time and might run out of the given time budget for large files. So you might need to adjust the time budget using the "editor.codeActionsOnSaveTimeout" setting. I added that to the documentation.

If this doesn't work for all of you can the once still seeing problem provide me with a GitHub repository I can clone that demos this?

[pistou]

I feel this issue is due to format order: codeActionOnSave seems to trigger before formatOnSave.

This results in a wrong format if the defaultFormatter or/and the options are differents. The old setting use to work the other way.

---

This is a real issue.

I have two kinds of projects: ones with ESLint, others without ESLint.
In both case, I use Prettier as a formatter.

_With ESLint:_
Prettier options comes from my .eslintrc file stored in the project directory, as such:

{
    "extends": ["airbnb", "prettier", "prettier/react", "@react-native-community"],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "rules": {
        // ...
        "prettier/prettier": [
            "error",
            {
                "printWidth": 80,
                "tabWidth": 4,
                "singleQuote": true,
                "trailingComma": "es5"
            }
        ]
    },
    "plugins": ["babel", "react", "import", "prettier"]
}

_Without ESLint:_
Prettier options comes from a .prettierrc file, specified in my settings as prettier.configPath:

{
    "printWidth": 100,
    "tabWidth": 4,
    "singleQuote": false,
    "trailingComma": "es5"
}

Theses format settings are differents and needs to be. It used to work well, yet, from the new codeActionOnSave, projects with ESLint are formatted the second way, resulting in a whole mess of ESLint errors.

Here is a part of my settings.json file:

{
    "editor.formatOnSave": true,
    "prettier.configPath": "D:\\Users\\Pierre\\Documents\\DEVELOPMENT\\.prettierrc",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
}

[fhollste]

Automatic fixing on save not working for me either after update. I realized that the issue might be that eslint is unable to fix automatically. When hovering a simple error (which used to be autofixable), it says "no quickfixes available".

[dbaeumer]

@fhollste this dups https://github.com/microsoft/vscode-eslint/issues/830 which will be fixed for the next release.

[dbaeumer]

@pistou I see the issue but this is unfortunately not under my control. I have no influence on the order of the requests sent by VS Code itself. And converting to the code action on save infrastructure was necessary since otherwise there is no control over the time budget causing another set of problems.

All I can recommend for now is the following: in the case where you use ESLint to fix on save adding "editor.formatOnSave": false to the workspace specific setting disables the format on save request and should result in the expected result.

[dugajean]

Can confirm that it isn't working with Vue files. My relevant settings look as follows:

    "editor.formatOnSave": false,
    "vetur.useWorkspaceDependencies": true,
    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "html"],
    "editor.codeActionsOnSaveTimeout": 500,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true,
      "source.fixAll.eslint": true
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },

Solution would be highly appreciated.

[FaridSaleh]

I found the solution for react users.
just set "editor.formatOnSave": false and keep "source.fixAll.eslint": true
It worked for me.

[dbaeumer]

@FaridSaleh which formatter are you using?

[dbaeumer]

It does work for me:

Can someone post a GitHub repository I can clone that demos the failure. Then I can have a look.

[bobzurad]

Can confirm adding "editor.formatOnSave": false fixed this issue for me. I also removed "editor.codeActionsOnSaveTimeout": 1200

I also created a new vue project with the Vue CLI, selected "ESLint + Prettier" linter / formatter and "Lint on save" options, and auto-fix works without having to change any settings or configuration. But for some reason I had to add "editor.formatOnSave" : false to my other Vue project.

Here is my project configuration that is now working:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll": true
  },
  "editor.formatOnSave": false
}

Thanks for the fast responses!

[dracozombie19]

The correct settings are:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

to enable autofix on save. "editor.formatOnSave": true is not necessary.

To compute all possible fixes (see the lengthy discussion in #154 why this is complicated in ESLint) I needed to change the way how these fixes are computed resulting in a more complex algorithm. Hence it takes more time and might run out of the given time budget for large files. So you might need to adjust the time budget using the "editor.codeActionsOnSaveTimeout" setting. I added that to the documentation.

If this doesn't work for all of you can the once still seeing problem provide me with a GitHub repository I can clone that demos this?

@dbaeumer I tried out that "editor.codeActionsOnSaveTimeout" setting and that fixed the issue for me. I bumped it up to 1500 ms (default is 750 ms) and now my files are auto-fixing on save. I also tried the "editor.formatOnSave" : false option, but that didn't make any difference for me.

[dugajean]

@dracozombie19 As you can see, this issue is occurring to many people, so just because you got it fixed, doesn't mean that everyone else had it fixed. Closing this issue was a mistake.

[dracozombie19]

I guess I'll leave it to @dbaeumer and how he wants to manage this. I was the one who opened the issue and my problem has been resolved. If the resolution that worked for me doesn't work for you, it may be worth opening a new issue since it may have a different root cause.

[dbaeumer]

In general I am in line with @dracozombie19 opinion that separate issues are better. However if someone can provide me with a GitHub repository I can clone that demos the issue they are seeing here then I am happy to reopen the issue.

[Alonski]

@dbaeumer Thanks for the replies. I think that in general the community is used to formatting happening immediately onSave. I bumped up the timeout to 1500ms and sometimes it still wasn't triggered.

When I was formatting with Prettier before these changes the formatting happened instantly from what I can tell.

I am pretty sure it will depend on the developer machine as well. So I could give you a project and on your machine it might run fine :)

[FaridSaleh]

@FaridSaleh which formatter are you using?

I'm using only eslint formatter

[dbaeumer]

@Alonski the problem with the old fix code was that it didn't fix all fixable problems due to the nature how ESLint computes them. So I change the way which made it more complex and hence more expensive. Positive is that now all fixable problems will be addressed.

[tenadolanter]

{
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      { "language": "vue", "autoFix": true },
      { "language": "typescript", "autoFix": true },
      { "language": "typescriptreact", "autoFix": true }
  ],
  "editor.formatOnSave": false
}

my setting worked fine before, but now visual studio code tips The setting is deprecated. Use editor.codeActionsOnSave instead with a source.fixAll.eslint member, then i updated as tips, but it does not work !
so, what should i do to fix it?

[joshunger]

@dbaeumer on a 279 line file (is that large?) I had to bump "editor.codeActionsOnSaveTimeout": 6000 to get the formatting in a single save. At 1000 it fixes all auto-fixable Problems (from what I can see) but doesn't format. This is on a MacBook Pro 3.1 GHz Intel Core i5, 16 GB laptop. If you need any tracing, please let me know what I can provide to help improve the performance. ESLint 2.0.6.

Here is an example of a format that is not fixed:

It looks like the formatting takes around 50 - 80 ms.

["INFO" - 9:33:24 PM] Formatting completed in 57.094665ms.

[tohbansoon]

why close the issues??? how to resolve it??

[BensonLiao]

On my vscode environment (use only eslint as linter / formatter),
none of these solutions above works.
And finally figure it out myself,
I changed my "eslint.workingDirectories" to the following value and it worked!

    "eslint.workingDirectories": [
        { 
            "pattern": "./webserver*/"
        }
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false

p.s. my working directory structure:

andro-projects/
  webserver/
  webserver-frontend/
  webserver-prototype/
  ...

p.s.2 also tried other value like default: "mode": "location" but still don't work.

[heylying]

it works for me.

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.autoFixOnSave": false,
  "editor.codeActionsOnSaveTimeout": 5000,

[Alonski]

Setting a timeout works... But waiting 5 seconds to formatOnSave is bad UX with what we are used to from before :)

Thanks for all the great work being done on this!

[dbaeumer]

@joshunger can you provide me with a GitHub repository that contains the file so that I can try to reproduce. I ran with the new version for quite some time and I never saw such huge spikes. I would like to understand what causes this.

The formatting code runs exactly through the same path as the code action on save. So there seems to be something else wrong that causes that huge delay in save.

[dugajean]

Can confirm that increasing the timeout to 5000 fixes the problem for me too, but that's a very poor solution. Before this update the fixes were instant on save. My laptop is fairly performant, so I don't understand the problem.

[dbaeumer]

@dugajean can you provide me with a GitHub repository I can clone that demos this. As said here https://github.com/microsoft/vscode-eslint/issues/833#issuecomment-567462712 I ran with the new version for quite some time and never saw those huge spikes

[Alonski]

@dbaeumer Maybe one of my other extensions is the culprit?

code --install-extension alefragnani.Bookmarks
code --install-extension alefragnani.project-manager
code --install-extension Alonski.camilyo-vscode-extensions
code --install-extension Alonski.ember-related-files-windows
code --install-extension alonski.prettier-for-handlebars-vscode
code --install-extension andrejunges.Handlebars
code --install-extension atlassian.atlascode
code --install-extension bierner.markdown-mermaid
code --install-extension candidmetrics.ember-module-snippets
code --install-extension chiragpat.tomorrow-and-tomorrow-night-operator-mono-theme
code --install-extension christian-kohler.npm-intellisense
code --install-extension christian-kohler.path-intellisense
code --install-extension ciena-blueplanet.vsc-ember-frost
code --install-extension CoenraadS.bracket-pair-colorizer
code --install-extension cssho.vscode-svgviewer
code --install-extension DavidAnson.vscode-markdownlint
code --install-extension dbaeumer.jshint
code --install-extension dbaeumer.vscode-eslint
code --install-extension dbankier.vscode-gist
code --install-extension drKnoxy.eslint-disable-snippets
code --install-extension eamodio.gitlens
code --install-extension eg2.vscode-npm-script
code --install-extension emberjs.vscode-ember
code --install-extension esbenp.prettier-vscode
code --install-extension GitHub.vscode-pull-request-github
code --install-extension heaths.vscode-guid
code --install-extension jakob101.RelativePath
code --install-extension joelday.docthis
code --install-extension JuanBlanco.solidity
code --install-extension lifeart.vscode-ember-unstable
code --install-extension lifeart.vscode-glimmer-syntax
code --install-extension mariusschulz.yarn-lock-syntax
code --install-extension mrmlnc.vscode-remark
code --install-extension ms-azuretools.vscode-azureappservice
code --install-extension ms-azuretools.vscode-azurestorage
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-vscode-remote.remote-wsl
code --install-extension ms-vscode.azure-account
code --install-extension ms-vscode.vscode-typescript-tslint-plugin
code --install-extension ms-vsliveshare.vsliveshare
code --install-extension naumovs.color-highlight
code --install-extension phanitejakomaravolu.EmberES6Snippets
code --install-extension rbbit.typescript-hero
code --install-extension redhat.vscode-yaml
code --install-extension rexebin.classlens
code --install-extension sburg.vscode-javascript-booster
code --install-extension sfodje.perltidy
code --install-extension Shan.code-settings-sync
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension syler.sass-indented
code --install-extension Tyriar.sort-lines
code --install-extension vscode-icons-team.vscode-icons
code --install-extension WakaTime.vscode-wakatime
code --install-extension YnotDraw.ember-concurrency-vscode-snippets
code --install-extension yzhang.markdown-all-in-one
code --install-extension ziyasal.vscode-open-in-github

[joshunger]

@dbaeumer I'm sorry I don't have a GitHub repository that contains the file but I'm happy to install a new build and run tracing for you.

[EstebanDworak]

Increasing Timeout to 1500 worked fine for me 😀
It isn't the most elegant solution but it works. 🤷‍♂️

[dbaeumer]

@joshunger will look into adding some tracing capabilities.

[guillaumeslash]

Hello everyone,

A solution I found is to install this fork of eslint : https://marketplace.visualstudio.com/items?itemName=evolution-gaming.evolution-gaming--vscode-eslint

It works for me with these settings :
"eslint.autoFixOnSave": true,

[dbaeumer]

@joshunger I released a new version which contains some traces of the time spent to compute the fixes when "eslint.trace.server": "messages" or "eslint.trace.server": "verbose" is set.

Please let me know what the outcome is.

[joshunger]

@dbaeumer using 2.0.11

[Trace - 9:12:31 AM] Sending request 'workspace/executeCommand - (1)'.
Params: {
    "command": "eslint.applyAllFixes",
    "arguments": [
        {
            "uri": "file:///hidden",
            "version": 1
        }
    ]
}


[Trace - 9:12:34 AM] Computing all fixes took: 2778 ms.
[Trace - 9:12:34 AM] Computing minimal edits took: 4 ms.
[Trace - 9:12:34 AM] Received request 'workspace/applyEdit - (4)'.
Params: {
    "edit": {
        "documentChanges": [
            {
                "textDocument": {
                    "uri": "file:///hidden",
                    "version": 1
                },
                "edits": [
                    {
                        "range": {
                            "start": {
                                "line": 127,
                                "character": 25
                            },
                            "end": {
                                "line": 127,
                                "character": 25
                            }
                        },
                        "newText": "\n          "
                    },
                    {
                        "range": {
                            "start": {
                                "line": 204,
                                "character": 17
                            },
                            "end": {
                                "line": 204,
                                "character": 17
                            }
                        },
                        "newText": "} \n            {' '"
                    },
                    {
                        "range": {
                            "start": {
                                "line": 204,
                                "character": 18
                            },
                            "end": {
                                "line": 204,
                                "character": 18
                            }
                        },
                        "newText": "\n           "
                    }
                ]
            }
        ]
    }
}


[Trace - 9:12:34 AM] Sending notification 'textDocument/didChange'.
Params: {
    "textDocument": {
        "uri": "file:///hidden",
        "version": 2
    },
    "contentChanges": [
        {
            "range": {
                "start": {
                    "line": 204,
                    "character": 18
                },
                "end": {
                    "line": 204,
                    "character": 18
                }
            },
            "rangeLength": 0,
            "text": "\n           "
        },
        {
            "range": {
                "start": {
                    "line": 204,
                    "character": 17
                },
                "end": {
                    "line": 204,
                    "character": 17
                }
            },
            "rangeLength": 0,
            "text": "} \n            {' '"
        },
        {
            "range": {
                "start": {
                    "line": 127,
                    "character": 25
                },
                "end": {
                    "line": 127,
                    "character": 25
                }
            },
            "rangeLength": 0,
            "text": "\n          "
        }
    ]
}


[Trace - 9:12:34 AM] Sending response 'workspace/applyEdit - (4)'. Processing request took 17ms
Result: {
    "applied": true
}


[Trace - 9:12:34 AM] Received response 'workspace/executeCommand - (1)' in 2830ms.
Result: {}


[Trace - 9:12:35 AM] Sending notification 'textDocument/didSave'.
Params: {
    "textDocument": {
        "uri": "file:///hidden",
        "version": 2
    }
}


[Trace - 9:12:36 AM] Received notification 'textDocument/publishDiagnostics'.
Params: {
    "uri": "file:///hidden",
    "diagnostics": [
        {
            "message": "Component definition is missing display name",
            "severity": 1,
            "source": "eslint",
            "range": {
                "start": {
                    "line": 109,
                    "character": 13
                },
                "end": {
                    "line": 112,
                    "character": 7
                }
            },
            "code": "react/display-name"
        },
        {
            "message": "Component definition is missing display name",
            "severity": 1,
            "source": "eslint",
            "range": {
                "start": {
                    "line": 118,
                    "character": 13
                },
                "end": {
                    "line": 133,
                    "character": 9
                }
            },
            "code": "react/display-name"
        },
        {
            "message": "Component definition is missing display name",
            "severity": 1,
            "source": "eslint",
            "range": {
                "start": {
                    "line": 158,
                    "character": 13
                },
                "end": {
                    "line": 163,
                    "character": 9
                }
            },
            "code": "react/display-name"
        },
        {
            "message": "Component definition is missing display name",
            "severity": 1,
            "source": "eslint",
            "range": {
                "start": {
                    "line": 173,
                    "character": 13
                },
                "end": {
                    "line": 173,
                    "character": 55
                }
            },
            "code": "react/display-name"
        }
    ]
}


[Trace - 9:12:36 AM] Received notification 'eslint/status'.
Params: {
    "state": 1
}

[dbaeumer]

@joshunger thanks for the trace. The interesting part is this:

Computing all fixes took: 2778 ms

which is basically measuring

            let start = Date.now();
            const report = cli.executeOnText(content, filePath);
            connection.tracer.log(`Computing all fixes took: ${Date.now() - start} ms.`);

I actually have no idea how to speed this up unless I go back to the old approach which didn't fix all fixable problems :-(

How big is the file. Is there anything interesting in it? If you execute eslint from the terminal on that file with --fix is that a lot faster ?

[dbaeumer]

The only ting I can try is to cache the CLI instance. But from my current understanding of ESLint I don't think that this will result in a big win.

[dbaeumer]

Looks like this will not bring anything. Executing it twice results in

[Trace - 6:14:22 PM] Computing all fixes took: 533 ms.
[Trace - 6:14:22 PM] Computing all fixes 2nd time took: 576 ms.

Interestingly this seems to depend highly on what kind of errors need to be fixed. Fixing this line (extra semi)

        return this._currentDocumentData;;

in a file with ~2200 lines takes ~520ms. Fixing two extra semi on the same line takes 1126ms :-(

[dbaeumer]

I will investigate a little more but I am not very hopeful considering we want all possible problems being fixed.

[dbaeumer]

Any tip is welcome as well.

[Alonski]

Do we know which fixes weren't being fixed? I use Prettier mostly for formatting on save. That is mainly what I want. The rest is a nice to have I think. Maybe we can whitelist and blacklist rules to fix on save?

[joshunger]

@dbaeumer running eslint --fix takes about 1.8s. My eslint config also extends airbnb which I bet adds some time.

[rtbo]

I had a similar issue, but found out that organize import conflicts with the fix-all. It seems that organizeImports kicks-in a few ms later than fixAll.
These settings:

    "editor.codeActionsOnSave": {
        "source.organizeImports": true,
        "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false,

Will format to the following line:

export { Id, Project, ProjectEx, ProjectInput, ProjectMember, ProjectRole, Role, User, UserEx, UserInput } from './schema';

And setting "source.organizeImports" to false will format it like so:

export {
    Id,
    Project,
    ProjectEx,
    ProjectInput,
    ProjectMember,
    ProjectRole,
    Role,
    User,
    UserEx,
    UserInput,
} from './schema';

I don't have any timeout set.

[dbaeumer]

Pls see https://github.com/microsoft/vscode-eslint/issues/859 for the performance discussion.

[leonardorb]

This combination worked for me 🎉 :

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"editor.formatOnSave": false,

Maybe it'll work for someone else.

[dbaeumer]

@leonardorb thanks. I added that to the readme today (e.g. to not enable both formatOnSave and code action on save.

[claylevering]

Still not getting auto save even with that combo, here's my config:

{
    "sync.gist": "",
    "sync.autoDownload": true,
    "sync.autoUpload": true,
    "sync.quietSync": true,
    "terminal.external.osxExec": "iTerm.app",
    "window.zoomLevel": 0,
    "git.enableSmartCommit": true,
    "explorer.confirmDelete": false,
    "workbench.iconTheme": "vscode-icons",
    "editor.fontSize": 14,
    "vsicons.dontShowNewVersionMessage": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "explorer.confirmDragAndDrop": false,
    "aws.profile": "",
    "sync.forceUpload": true,
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.renderControlCharacters": false,
    "phpcs.standard": "psr2",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "workbench.colorTheme": "One Dark Pro",
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "sql-formatter.linesBetweenQueries": 1,
    "sql-formatter.uppercase": true,
    "extensions.ignoreRecommendations": false,
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.printWidth": 160,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.trace.server": "messages",
    "editor.formatOnSave": false,
    "debug.inlineValues": true,
    "debug.openExplorerOnEnd": true,
    "debug.toolBarLocation": "docked"
}

Output on save:

[Trace - 10:09:33 AM] Sending request 'textDocument/codeAction - (37)'.
[Trace - 10:09:34 AM] Sending notification '$/cancelRequest'.
[Trace - 10:09:34 AM] Sending notification 'textDocument/didSave'.
[Trace - 10:09:34 AM] Computing all fixes took: 973 ms.
[Trace - 10:09:34 AM] Computing minimal edits took: 0 ms.
[Trace - 10:09:34 AM] Received response 'textDocument/codeAction - (37)' in 975ms.

Output on fix (which works):

[Trace - 10:10:09 AM] Sending request 'workspace/executeCommand - (38)'.
[Trace - 10:10:10 AM] Computing all fixes took: 912 ms.
[Trace - 10:10:10 AM] Computing minimal edits took: 1 ms.
[Trace - 10:10:10 AM] Received request 'workspace/applyEdit - (22)'.
[Trace - 10:10:10 AM] Sending notification 'textDocument/didChange'.
[Trace - 10:10:10 AM] Sending response 'workspace/applyEdit - (22)'. Processing request took 56ms
[Trace - 10:10:10 AM] Received notification 'textDocument/publishDiagnostics'.
[Trace - 10:10:10 AM] Received notification 'eslint/status'.
[Trace - 10:10:10 AM] Received response 'workspace/executeCommand - (38)' in 1328ms.

[dbaeumer]

@claylevering looking at your trace you need to increase the timeout using the setting editor.codeActionsOnSaveTimeout

[dbaeumer]

The timeout is by default 750ms but it took 973ms to comupte the fixes.

[vrufine]

did someone find the proper fix for this issue? :-(
I had use the _workaround_ and increase "codeActionsOnSaveTimeout" to make it work and auto-fix :/

[ShayDavidson]

This is crippling prettier and autoformat for us across all projects. I tried various solutions as proposed here but without success.

It either:

• Doesn't format (even with increased timeout).
• Or formats everything, ignoring .eslintignore, which is bad.

[lancerace]

This is my current configuration and i think it's working well. hope it helps.

{
    //"editor.formatOnSave": true, //set as false and allow scoping of setting per-language basis
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    //"prettier.eslintIntegration": true,
    "css.lint.unknownProperties": "ignore", //ignore composes error unknown property for css composition   
    "[javascript]": {
        "editor.formatOnSave": true
    },
    "[javascriptreact]": {
        "editor.formatOnSave": true
    }
}

[ShayDavidson]

Fixed it via this config (had another problem where the settings API change also caused files with CSS-in-JS to not autofix):

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.codeActionsOnSaveTimeout": 1500,
}

Problem is, like people said, that it's a terrible dev experience compared to what we had (almost instant autofix in some cases). Now I have to wait 1.5 seconds regardless of the file.

[maple-leaf]

same here. I have to add "editor.codeActionsOnSaveTimeout": 1200 to make auto fixing works.
"editor.formatOnSave": false, doesn't make difference.

[dbaeumer]

Some updates:

• I changed the code so that if problems exists I will first take those and then call eslint again. This cuts off one pass from the eslint fixer but on larger files with quite some fixes the save will still take quite some time due to the nature how the ESLint npm module computes the fixes.
• for those that want to get the old fast behavior back they can set eslint.codeActionsOnSave.mode to problems which will be fast but very likely not fix all issues.

Both will be in the next version 2.0.12.

[rtmalone]

I'm still having this issue - eslint not auto fixing problems - on 2.0.13. I've tried the above solutions which worked for others. Here are my pertinent editor and eslint settings:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.codeActionsOnSaveTimeout": 20000,
  "editor.formatOnSave": false,
  "eslint.enable": true,
  "eslint.format.enable": true,
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "eslint.run": "onSave",
  "eslint.codeActionsOnSave.mode": "problems",

[dbaeumer]

@rtmalone can you provide me with a GitHub repository I can clone that demos what you are seeing.

[lvidal1]

Please, I need support on this too.

[rtmalone]

@dbaeumer further investigating seems like my issue is limited to a specific workspace. So probably not the extension's problem.

[Rim4i4ok]

Same problem with version 2.0.13

[tenadolanter]

{
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.alwaysShowStatus": true
}

it works for me well !

if you change the vsc settings.json, please restart your vsc.

if your eslint cannot work , please click eslint at vsc status bar to find the reason.

[jvilk-stripe]

@dbaeumer Do you know if setting "source.fixAll.eslint": true causes other extensions' code action requests in the same file to block saving?

I noticed 1-2 second pauses before prettier finished formatting (in a company repository; sorry :( ), and the performance of eslint didn't seem to be the cause:

[Trace - 1:57:03 PM] Computing all fixes took: 271 ms.
[Trace - 1:57:03 PM] Computing minimal edits took: 1 ms.

(Prettier also wasn't an issue; it ran in <50ms.)

However, it did look like VS Code took some time to actually send requests to ESLint's LSP server, which I found curious. I say "look like" because the timestamp advanced by a second, but I can't confirm if that's because it took a second to send or because the request was sent at 900 ms past the second. If the timestamps had a finer granularity, I'd be more certain. :)

I discovered that Flow also responds to code actions in that same file for those same edits, and was quite slow:

[Trace - 2:24:11 PM] Received response 'textDocument/codeAction - (108)' in 1383ms.
Result: []

Whenever saving felt slow, I noticed that VS Code canceled some code actions sent to Flow's language server:

[Trace - 2:50:26 PM] Received response 'textDocument/codeAction - (196)' in 1708ms. Request failed: cancelled (-32800).
[Trace - 2:50:26 PM] Received response 'textDocument/codeAction - (198)' in 1228ms. Request failed: cancelled (-32800).
[Trace - 2:50:26 PM] Received response 'textDocument/codeAction - (200)' in 1062ms.

I found that I could fix the performance issue by either:

• Disabling the flow extension, OR
• Setting "source.fixAll.eslint": false

That is, with Flow enabled and ESLint fixups disabled, Prettier auto-formats on save with acceptable performance. Flow is still slow at sending code action requests, but they don't seem to be blocking saving.

Now, this is all informed speculation based on logs, and I don't think I can confirm further unless I understand how VS Code code actions work. I think this code is responsible for determining what code actions block saving, but there's a lot going on with few comments.

So, to come back to my earlier point: Is it possible that setting "source.fixAll.eslint": true causes other code actions from other extensions to block saving, or am I just going crazy in these logs? :)

[dbaeumer]

@jvilk-stripe actually there is a bug in VS Code that request to many code actions and drops them later on if not needed (see https://github.com/microsoft/vscode/issues/84602) which should be fixed with the next insider build. You could try to set source.fixAllto see if that helps.

[dbaeumer]

and great analysis!

[jvilk-stripe]

I just tried the latest insiders build:

Version: 1.42.0-insider
Commit: be9c72410acc677070685a616773b122f4c5e141
Date: 2020-01-29T05:35:51.712Z

Unfortunately, the problem still exists. It takes ~1-2 seconds commonly for the document to finish saving/formatting with ESLint + Prettier.

Disabling "source.fixAll.eslint" or the Flow extension fixes the problem.

(Explicitly setting source.fixAll to false and source.fixAll.eslint to true also does not change anything.)

[dbaeumer]

@jvilk-stripe thanks for getting back. Can you please open a new issue in the VS Code repository since this from your great analysis is not related to the eslint extension. Looks more like a problem in VS Code itself and needs to be addressed there. I thought it will be addressed by microsoft/vscode#84602

[jvilk-stripe]

Done:
https://github.com/microsoft/vscode/issues/89745