Can we get a basic working eslint config into Helix by default? Discussion on what it should be...

[David-Else]

JS is probably the world's most used language now, and everyone that uses it will probably want to use ESlint. It is installed by default with the https://github.com/hrsh7th/vscode-langservers-extracted package that contains our defaults for CSS, HTML and JSON.

Now we have multiple language server support I propose we should have working defaults built in so users can easily add things like ESLint if they want.

The best source I have found for setting ESLint up is @Philipp-M 's excellent #2507 (comment) (@cd-a had some great input in the thread) which I have boiled down to:

[language-server.eslint]
args = ["--stdio"]
command = "vscode-eslint-language-server"

[language-server.eslint.config]
# format = true
nodePath = ""
# onIgnoredFiles = "off"
# packageManager = "yarn"
quiet = false
rulesCustomizations = []
run = "onType"
# useESLintClass = false
validate = "on"
codeAction = { disableRuleComment = { enable = true, location = "separateLine" }, showDocumentation = { enable = true } }
# codeActionsOnSave = { mode = "all" }
experimental = {}
problems = { shortenToSingleLine = false }
# workingDirectory = { mode = "auto" }

Then the user can add it easily:

[[language]]
name = "javascript"
language-servers = [ "typescript-language-server", "eslint" ]

The references to what these settings are doing is all at https://github.com/microsoft/vscode-eslint#settings-options. The lines I have commented out seem to be optional, but I could be mistaken. Can we agree on what is the bare most unopinionated settings to get it working and add it to Helix by default? It would save people from the config hell that Helix is trying to deliver them from :)

[cd-a]

I totally agree, great point. Should't we also include prettier here? Since Eslint + Prettier is pretty much the combo everyone uses?

[David-Else]

Prettier is a CLI app specifically for formatting so can be set easily by the user without any config:

[[language]]
name = "html"
formatter = { command = 'prettier', args = ["--parser", "html"] }

[[language]]
name = "json"
formatter = { command = 'prettier', args = ["--parser", "json"] }

[[language]]
name = "css"
formatter = { command = 'prettier', args = ["--parser", "css"] }

As it conflicts with the default language servers formatting it might need an additional Helix config setting like "use prettier as default formatter": true which activates it for all the languages available. That would be cool, but I am not sure if maintainers want that type of 3rd party integration?

[Rudxain]

If you've installed it locally only, it won't be in PATH, so replace all command = 'prettier' by command = 'npx' and add "prettier" as the 1st element of args.

[morlinbrot]

Thanks for opening this discussion, I would love for Helix to provide some web dev capabilities out of the box at some point.

I created an example NextJS project which is correctly configured for Typescript + ESLint + Prettier/dprint and a corresponding Helix config which you can find here: https://github.com/morlinbrot/helix-webdev-config (I never new if it was Helix or the project not being configured correctly).

I wanted to share it here as a reference for the discussion and would be happy to update it to eventually arrive at something that could be considered a default Helix web dev config. It is building on @Philipp-M's original config (but simplified) and @David-Else's minimal set of options for the ESLint langserver.

Unfortunately, I did not yet get ESLint auto-formatting to work. It's mostly fine for me because dprint is taking care of most auto-formatting but there are some things that ESLint will lint but not auto-format, for example:

const obj = {
  foo,
  bar
  baz,
}

The missing comma in the middle is being detected by ESLint but not auto-formatted and this also keeps dprint from adding a semicolon on the last line.

My config is slightly different from @David-Else's but both are not working for me. According to the docs, these options should make it work:

codeActionsOnSave = { mode = "all", "source.fixAll.eslint" = true }
format = { enable = true }

(Btw, @David-Else, you have a typo in your config, it's codeActionsOnSave, not codeActionOnSave.)

Does anybody have a working, auto-formatting vscode-eslint-language-server that they could share here? That is the last puzzle piece to complete my minimal web dev config.

[Rudxain]

FYI (and anyone reading this), ESL no longer supports formatting :( . It's sad, but reasonable

[dusty-phillips]

I also tried digging into this; it seems like codeActionsOnSave will not work without #6486

[Rudxain]

I thought this was already fixed in 24.7, because of this:

helix/languages.toml

Lines 202 to 222 in 35f1c2a

	[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"

So I added it to the Wiki, but I've noticed it doesn't work, so I simply linked back to this discussion

[Rudxain]

Rudxain/dotfiles#14 (comment)

[Rudxain]

https://github.com/helix-editor/helix/wiki/Language-Server-Configurations/38d848b68d4f8a5d7a7b9e8a6adf71bb2f6e0774#ESLint