Use eslint for typescript #10412
Unanswered
willparsons
asked this question in
General
Use eslint for typescript
#10412
Replies: 20 comments 18 replies
-
|
What does your |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
eslint isn't actually a language server but a linter? |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
@archseer there is also an eslint language server. It is quite common nowadays to use it along with It allows code actions to fix eslint issues. It even can act as a super fast code formatter by reading your It is available on npm: https://github.com/hrsh7th/vscode-langservers-extracted |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
At the time of writing, vscode-langservers-extracted version 4.10 is broken for Helix. Latest known working version is 4.8 for me. Hoping for a fix soon... |
Beta Was this translation helpful? Give feedback.
-
|
Health is all good it can find eslint. The logs however are showing |
Beta Was this translation helpful? Give feedback.
0 replies
-
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Neovim is using https://github.com/hrsh7th/vscode-langservers-extracted for their eslint language server. I'm going to try that same binary in helix |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
At the time of writing, vscode-langservers-extracted version 4.10 is broken for Helix. Latest known working version is 4.8 for me. Hoping for a fix soon... |
Beta Was this translation helpful? Give feedback.
-
|
Hey I tried this approach with the multiple language servers branch and one roadblock that I had faced was that the |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
@space-shell I think you may want to mention that as a new issue? |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Does anyone know if its possible to use eslint just as the linter? |
Beta Was this translation helpful? Give feedback.
0 replies
-
Hi @jacksonludwig, could you explain how to configure the |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
@RilDev I am not sure, I can see there is an issue about it #3520, I've not set it up myself with helix. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Not a useful comment, but this is the only one thats preventing me from using this editor. Somehow I could not get prettier also working, but thats may be my fault. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
same, are there any updates or a release date for this feature? Trying to have the same behavior as neovim and vscode for eslint |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
#2507 will make it happen. It's in the current milestone. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Now that #2507 has been merged, does anyone have an example config of how to setup eslint? |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Alright I found a working config, just waiting for code actions on save to have it work on save # Front-end
[[language]]
name = "typescript"
scope = "source.ts"
injection-regex = "(ts|typescript)"
language-servers = [{except-features = ["format"], name = "typescript-language-server"}, "tailwindcss-react", "eslint"]
roots = ["tailwind.config.js","tailwind.config.cjs", ".prettierrc.json", ""]
file-types = ["ts", "mts", "cts"]
formatter = { command = 'prettier', args = ["--stdin-filepath", "file.ts"] }
auto-format = true
[[language]]
language-servers = [{except-features = ["format"], name = "typescript-language-server"}, "tailwindcss-react", "eslint"]
roots = ["tailwind.config.js","tailwind.config.cjs", ".prettierrc.json"]
name = "javascript"
scope = "source.js"
injection-regex = "(js|javascript)"
file-types = ["js", "mjs", "cjs"]
formatter = { command = 'prettier', args = ["--stdin-filepath", "file.js"] }
auto-format = true
[[language]]
language-servers = [{except-features = ["format"], name = "typescript-language-server"}, "tailwindcss-react", "eslint"]
roots = ["tailwind.config.js","tailwind.config.cjs", ".prettierrc.json"]
name = "jsx"
scope = "source.jsx"
injection-regex = "jsx"
file-types = ["jsx"]
formatter = { command = 'prettier', args = ["--stdin-filepath", "file.jsx"] }
indent = { tab-width = 4, unit = "\t" }
auto-format = true
[[language]]
language-servers = [{except-features = ["format"], name = "typescript-language-server"}, "tailwindcss-react" , "eslint"]
roots = ["tailwind.config.js","tailwind.config.cjs", ".prettierrc.json"]
name = "tsx"
scope = "source.tsx"
injection-regex = "(tsx)" # |typescript
file-types = ["tsx"]
formatter = { command = 'prettier', args = ["--stdin-filepath", "file.tsx"] }
auto-format = true
[[language]]
name = "html"
scope = "text.html.basic"
injection-regex = "html"
file-types = ["html"]
language-servers = ["tailwindcss-react","vscode-html-language-server"]
roots = ["tailwind.config.js","tailwind.config.cjs", ".prettierrc.json"]
auto-format = true
[[language]]
name = "css"
scope = "source.css"
injection-regex = "css"
file-types = ["css"]
language-servers = ["tailwindcss-react", "vscode-css-language-server"]
roots = ["tailwind.config.js","tailwind.config.cjs", ".prettierrc.json"]
auto-format = true
[language-server.tailwindcss-react]
language-id = "javascriptreact"
command = "hx-tw"
config = { }
args = ["--stdio"]
timeout = 3
[language-server.eslint]
args = ["--stdio"]
command = "vscode-eslint-language-server"
[language-server.eslint.config]
validate = "on"
experimental = { useFlatConfig = false }
rulesCustomizations = []
run = "onType"
problems = { shortenToSingleLine = false }
nodePath = ""
[language-server.eslint.config.codeAction]
[language-server.eslint.config.codeAction.disableRuleComment]
enable = true
location = "separateLine"
[language-server.eslint.config.codeAction.showDocumentation]
enable = true
[language-server.eslint.config.codeActionOnSave]
enable = true
mode = "fixAll"
[language-server.eslint.config.workingDirectory]
mode = "location"
[language-server.typescript-language-server]
args = ["--stdio"]
command = "typescript-language-server"
[language-server.typescript-language-server.config]
documentFormatting = false |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
@amritk, helix has just been a splendid example of how to design a powerful editor like nvim but without nvim's notorious difficulty to configure, which lead to the creation of various nvim distributions (not that I don't like the configurability but only when I need to deviate from the OOB experience which should just work for any language supported that is installed). I just hope that helix won't have distributions created like this in the future. I think that in order to achieve this, stuff like that configuration you pasted above, should be included by default in helix. Thanks to your config, I got React/TS/ESLint+Prettier to work just as it does in VSCode. Here's my config. I think the number of deviations from the standard configs of these tools/LSPs should be kept to a minimum, so the standard behavior can become the baseline. For example even helix docs suggests we don't need to set any args for prettier: https://github.com/helix-editor/helix/wiki/External-formatter-configuration#prettier [language-server.eslint]
args = ["--stdio"] # should come by def with helix
command = "vscode-eslint-language-server"
[language-server.eslint.config]
validate = "on" # I assume this enabled eslit to validate the file, which now shows me counts for errors, warnings, etc in helix
experimental = { useFlatConfig = false } # not sure why this is here
rulesCustomizations = []
run = "onType"
problems = { shortenToSingleLine = false }
nodePath = "" # seems redundant, why do we need to override this, should get detected autom.
[language-server.eslint.config.codeAction]
[language-server.eslint.config.codeAction.disableRuleComment]
enable = true
location = "separateLine"
[language-server.eslint.config.codeAction.showDocumentation]
enable = true # why?
[language-server.eslint.config.codeActionOnSave]
enable = true
mode = "fixAll"
[language-server.eslint.config.workingDirectory]
mode = "location" # do we need to override this?
[language-server.typescript-language-server.config]
documentFormatting = false # use eslint instead, do we have to override this ourselves? I think if eslint LSP is detected and enabled, this should be done automatically for us as generally everyone lets eslint take over linting+prettying, which uses prettier by default if detected by it
[[language]]
name = "typescript"
language-servers = [{ except-features = ["format"], name = "typescript-language-server" }, "eslint"] # shouldn't need to override this
roots = ["package-lock.json", "tsconfig.json", ".prettierrc.json"] # shouldn't need to override this
formatter = { command = "prettier" }
auto-format = true
[[language]]
name = "tsx"
language-servers = [{ except-features = ["format"], name = "typescript-language-server" }, "eslint"] # shouldn't need to override this
roots = ["package-lock.json", "tsconfig.json", ".prettierrc.json"] # shouldn't need to override this!
formatter = { command = "prettier" } # works without any args, the modifications end up in the buffer, unsaved
auto-format = true |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
When i try to add eslint as language server it complains that it couldn't read the tsconfig.json file. It searched in the wrong folder. |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
If you're using typescript-eslint with the project setting or projectService setting, it might be related to typescript-eslint/typescript-eslint#9731 / microsoft/vscode-eslint#1911 (comment) With a bit of investigation, I was able to solve this by adding in my local [language-server.eslint.config]
workspaceFolder = { name = "<git repo folder name>", uri = "file://<absolute path to the git repo>" }
# also paste in all of my other eslint lsp configI think this is an issue to be raised to be added to helix's lsp |
Beta Was this translation helpful? Give feedback.
-
|
note that I've submitted an issue for this #14041, and an untested patch |
Beta Was this translation helpful? Give feedback.
-
|
I tried the last two configs, but none is working for me (helix 24.3). This is the log when I save a I have all those packages installed globally: Does someone have a working configuration to apply |
Beta Was this translation helpful? Give feedback.
6 replies
-
|
Thanks for the tip, I took bits from # vscode-eslint-language-server config from master
[language-server.vscode-eslint-language-server]
command = "vscode-eslint-language-server"
args = ["--stdio"]
[language-server.vscode-eslint-language-server.config]
validate = "on"
experimental = { useFlatConfig = false }
rulesCustomizations = []
run = "onType"
problems = { shortenToSingleLine = false }
nodePath = ""
[language-server.vscode-eslint-language-server.config.codeAction.disableRuleComment]
enable = true
location = "separateLine"
[language-server.vscode-eslint-language-server.config.codeAction.showDocumentation]
enable = true
[language-server.vscode-eslint-language-server.config.workingDirectory]
mode = "location"
# from master + language server from `gts` + auto-format
[[language]]
name = "typescript"
scope = "source.ts"
injection-regex = "(ts|typescript)"
language-id = "typescript"
file-types = ["ts", "mts", "cts"]
roots = ["package.json"]
shebangs = ["deno", "bun", "ts-node"]
comment-token = "//"
block-comment-tokens = { start = "/*", end = "*/" }
language-servers = [
{ except-features = [
"format", "diagnostics",
], name = "typescript-language-server" },
"vscode-eslint-language-server",
]
indent = { tab-width = 2, unit = " " }
auto-format = trueI got the deps installed fine: And health seems ok: But still not working:
For the formatting I also tried adding this but it still did not work: [language-server.vscode-eslint-language-server.config.codeActionOnSave]
enable = true
mode = "fixAll"
[[language]]
name = "typescript"
# [...]
auto-format = trueIt feels like it is getting close as I can see that the eslint LSP started correctly: |
Beta Was this translation helpful? Give feedback.
-
|
Afraid I can't help, but the latest Helix master should be compatible with https://biomejs.dev/guides/editors/third-party-plugins/#helix-2310 which has most of the ESLint lints by default. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks again, I'll give it a spin soon 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Works very nicely with biome. Too bad I gotta stick to eslint :/ |
Beta Was this translation helpful? Give feedback.
-
|
I followed this article and it helped me configure my ESlint properly - Configure Helix for Typescript + ESLint + Prettier/dprint |
Beta Was this translation helpful? Give feedback.
-
|
I remember reading somewhere that the version of eslint in PS Don't forget eslint settings are now in Helix by default https://github.com/helix-editor/helix/blob/master/languages.toml#L202-L222 |
Beta Was this translation helpful? Give feedback.
8 replies
-
|
That package is abandoned. There are 2 active forks: I wanted to add this to the wiki, but neither package is published. Not sure what to do about this |
Beta Was this translation helpful? Give feedback.
-
|
looks like Zed's fork is published at https://www.npmjs.com/package/@zed-industries/vscode-langservers-extracted, so i think that one is ideal. (the other one just adds nix flake configs) |
Beta Was this translation helpful? Give feedback.
-
|
Can anyone confirm that the Zed Industries fork works as a drop-in replacement? With the original They don't have issues enabled on their repo, so trying here. Otherwise this looks like a promising option. |
Beta Was this translation helpful? Give feedback.
-
|
I took a look and the published zed-industries one currently only includes the html language server, unfortunately (might have been a mistake? not sure). I created a fork and fiddled a bit, and while the eslint server starts up, it's not reporting errors (it is starting up, just returning nothing). We're probably missing something in the config, as recent versions have had some breaking config changes, and as i've mentioned, i had to twiddle a bit with the config to get things working with typescript-eslint. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for continuing to investigate, @forivall! I'll keep an eye on the various PRs to see if a fix gets merged, but will likely pin to 4.8.0 for now since that's still working reliably for me. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Is it possible to change the language server of typescript to eslint?
I tried making a user-level languages.toml to overwrite the typescript language to use eslint but it just acted as though no language server existed.
Beta Was this translation helpful? Give feedback.
All reactions