ESLint not working on .vue files

[joshkent94]

Check for existing issues

• Completed

Describe the bug / provide steps to reproduce it

I have a Vue2 project and ESLint does not provide error warnings for those files despite it providing them for other files e.g .js.

Environment

Zed: v0.128.3 (Zed)
OS: macOS 14.3.1
Memory: 8 GiB
Architecture: aarch64

If applicable, add mockups / screenshots to help explain present your vision of the feature

ESLint and Vue LSP logs are both empty

If applicable, attach your ~/Library/Logs/Zed/Zed.log file to this issue.

N/A

[shahzod-davlatov]

Same on Zed 0.129.1 (Preview)

Vue3 project

[fazulk]

Same thing .. last hurdle before i can really use this editor i think

[joshkent94]

@mrnugget I know you’ve done a lot of work on ESLint, any chance of getting this in as it seems to be in high demand?

[mrnugget]

PR is here: #10983

I tested it on a brand-new Vue.js project with ESLint in it and it works. Will go out next week Wednesday in the preview release.

[e6voe9]

PR is here: #10983

I tested it on a brand-new Vue.js project with ESLint in it and it works. Will go out next week Wednesday in the preview release.

@mrnugget Just tested it. ESLint works perfectly fine, but just as a linter. It doesn't format the code like it does in .ts and .js files having this configured

"languages": {
  "JavaScript": {
    "formatter": {
      "code_actions": {
        "source.fixAll.eslint": true
      }
    }
  },
  "TypeScript": {
    "formatter": {
      "code_actions": {
        "source.fixAll.eslint": true
      }
    }
  },
  "Vue.js": {
    "formatter": {
      "code_actions": {
        "source.fixAll.eslint": true
      }
    }
  }
}

[mrnugget]

It does work for me as a formatter. It also works in code_actions_on_format.

screenshot-2024-05-03-13.12.17.mp4

Do you have anything in the logs? ~/Library/Logs/Zed/Zed.log or the language server logs?

[e6voe9]

Update

Formatting doesn't work for me in .vue files which have ts errors.

[e6voe9]

2024-05-03T13:29:15+02:00 [INFO] starting language servers for TypeScript: typescript-language-server, eslint
2024-05-03T13:29:15+02:00 [WARN] Generic lsp request to node failed: Request textDocument/codeAction failed with message: Cannot read properties of undefined (reading 'disableRuleComment')
2024-05-03T13:29:15+02:00 [ERROR] crates/project/src/project.rs:7009: Request textDocument/codeAction failed with message: Cannot read properties of undefined (reading 'disableRuleComment')
2024-05-03T13:29:15+02:00 [INFO] Language server with id 2 sent unhandled notification eslint/status:
{
  "uri": "*******/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts",
  "state": 1,
  "validationTime": 7
}
2024-05-03T13:29:16+02:00 [INFO] Language server with id 2 sent unhandled notification eslint/status:
{
  "uri": "*******/pages/Cart.vue",
  "state": 1,
  "validationTime": 973
}
2024-05-03T13:29:17+02:00 [INFO] Language server with id 2 sent unhandled notification eslint/status:
{
  "uri": "*******/pages/Cart.vue",
  "state": 1,
  "validationTime": 916
}
2024-05-03T13:29:19+02:00 [INFO] starting language servers for TypeScript: typescript-language-server, eslint
2024-05-03T13:29:19+02:00 [INFO] Language server with id 2 sent unhandled notification eslint/status:
{
  "uri": "*******/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts",
  "state": 1,
  "validationTime": 11
}
2024-05-03T13:29:21+02:00 [WARN] timed out waiting for formatting

This was the moment I saved the file.

[mrnugget]

Formatting doesn't work for me in .vue files which have ts errors.

Not sure what the exact problem is: should we format when there are errors? (we have other users who want us to disable formatting if there are errors, for example) should eslint format?

[e6voe9]

In my opinion code styling rules (eslint lsp) and types (typescript lsp) should work independently. They’re used for different purposes.

For example I want to add new functionality and I don’t wanna waste time writing types if I don’t even know if something is gonna work. In this case I have the situation when I have type errors, but I still would like for my formatter to work properly.

Answering your question: yes, I think eslint should format the file even if there are typescript errors.

[mrnugget]

Yeah, I'm not even sure whether that's the problem here. In your logs there's this:

2024-05-03T13:29:15+02:00 [WARN] Generic lsp request to node failed: Request textDocument/codeAction failed with message: Cannot read properties of undefined (reading 'disableRuleComment')
2024-05-03T13:29:15+02:00 [ERROR] crates/project/src/project.rs:7009: Request textDocument/codeAction failed with message: Cannot read properties of undefined (reading 'disableRuleComment')

I don't know whether this showed up when you hit save, but if it did, it seems like the code action doesn't work.

Can you reproduce the issue with a fresh Vue.js project?