Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extension not auto-fixing on Save #833

Closed
dracozombie19 opened this issue Dec 16, 2019 · 72 comments
Closed

Extension not auto-fixing on Save #833

dracozombie19 opened this issue Dec 16, 2019 · 72 comments
Labels
info-needed Issue requires more information from poster

Comments

@dracozombie19
Copy link

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
Copy link

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
Copy link

Jer-X commented Dec 17, 2019

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
Copy link

zinete commented Dec 17, 2019

Same thing

@takumiya081
Copy link

takumiya081 commented Dec 17, 2019

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
Copy link

AliasT commented Dec 17, 2019

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

  "editor.codeActionsOnSaveTimeout": 1200

@CurlyChen98
Copy link

me too.

@bobzurad
Copy link

Also experiencing this with .vue files.

@AliasT solution works, but it is not optimal.

@dbaeumer
Copy link
Member

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 dbaeumer added the info-needed Issue requires more information from poster label Dec 17, 2019
@pistou
Copy link

pistou commented Dec 17, 2019

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
Copy link

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".
image

@dbaeumer
Copy link
Member

@fhollste this dups #830 which will be fixed for the next release.

@dbaeumer
Copy link
Member

@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
Copy link

dugajean commented Dec 17, 2019

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
Copy link

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

@dbaeumer
Copy link
Member

@FaridSaleh which formatter are you using?

@dbaeumer
Copy link
Member

It does work for me:

cast

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

@bobzurad
Copy link

bobzurad commented Dec 17, 2019

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
Copy link
Author

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
Copy link

@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
Copy link
Author

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
Copy link
Member

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
Copy link

Alonski commented Dec 18, 2019

@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
Copy link

@FaridSaleh which formatter are you using?

I'm using only eslint formatter

@dbaeumer
Copy link
Member

@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
Copy link

tenadolanter commented Dec 19, 2019

{
  "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
Copy link
Contributor

joshunger commented Dec 19, 2019

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

image

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

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

@tohbansoon
Copy link

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

@joshunger
Copy link
Contributor

joshunger commented Dec 21, 2019

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

@rtbo
Copy link

rtbo commented Dec 23, 2019

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
Copy link
Member

Pls see #859 for the performance discussion.

@leonardorb
Copy link

This combination worked for me 🎉 :

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

Maybe it'll work for someone else.

@dbaeumer
Copy link
Member

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

@claylevering
Copy link

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
Copy link
Member

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

@dbaeumer
Copy link
Member

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

@vrufine
Copy link

vrufine commented Dec 25, 2019

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
Copy link

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
Copy link

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
Copy link

ShayDavidson commented Dec 30, 2019

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
Copy link

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

@dbaeumer
Copy link
Member

dbaeumer commented Jan 7, 2020

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
Copy link

rtmalone commented Jan 9, 2020

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
Copy link
Member

dbaeumer commented Jan 9, 2020

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

@lvidal1
Copy link

lvidal1 commented Jan 9, 2020

Please, I need support on this too.

@rtmalone
Copy link

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

@Rim4i4ok
Copy link

Same problem with version 2.0.13

@tenadolanter
Copy link

{
    "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.

koiketakayuki added a commit to koiketakayuki/profile that referenced this issue Jan 26, 2020
@jvilk-stripe
Copy link

@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
Copy link
Member

@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 microsoft/vscode#84602) which should be fixed with the next insider build. You could try to set source.fixAllto see if that helps.

@dbaeumer
Copy link
Member

and great analysis!

@jvilk-stripe
Copy link

jvilk-stripe commented Jan 29, 2020

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
Copy link
Member

@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
Copy link

Done:
microsoft/vscode#89745

@vscodebot vscodebot bot locked and limited conversation to collaborators Feb 2, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
info-needed Issue requires more information from poster
Projects
None yet
Development

No branches or pull requests