One-stop shop for a modern web dev setup with Helix, using Typescript + ESLint + Prettier/dprint.
It took me some time to figure out how to set up Helix for webdev correctly after the merge of Multi-LSP support with #2507. While going through various configs that I found online, I was also never sure if things didn't work because of my Helix config or because of how the project was set up.
This particular setup uses dprint as its formatter but switching to Prettier is easily done, see below.
For completeness' sake and because it's never mentioned anywhere else, here are all the langservers you need to have installed.
Install the typescript-language-server. This is used by default by Helix.
npm install -g typescript-language-server typescript
The vscode-langservers-extracted package provides language servers for Html, CSS, Json and ESLint.
npm i -g vscode-langservers-extracted
I'm also using emmet-ls for convenience:
npm install -g emmet-ls
We all know that a tool being written in Rust is enough reason for any true Rustacean to immediately switch over to it so in my personal setup I'm using dprint as my formatter:
curl -fsSL https://dprint.dev/install.sh | sh
If you want to go for the canonical Typescript + ESLint + Prettier setup, install Prettier (globally or locally) and comment/uncomment a few lines in the .helix/languages.toml file.
npm i -g prettier
For my personal projects, I'm currently exploring simply using Deno for both linting and formatting as I like its defaults and the simplicity of using just one langserver.
curl -fsSL https://deno.land/x/install/install.sh | sh
Here's how the languages.toml looks like for that:
[language-server]
deno = { command = "deno", args = [ "lsp" ]}
[[language]]
name = "tsx"
language-servers = [ "deno", "emmet-ls" ]
auto-format = true
Have a look at the languages.toml for the full Helix config.
I'm using a NextJS starter project just to have something in hand and show off a correctly configured project.
Here's what I did to create the project.
npx create-next-app@latest helix-webdev-config
Add typescript-eslint to add full Typescript support.
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript
Exclude pure formatting lints from eslint. Formatting is a different concern than linting and should be handled separately.
npm i -D eslint-config-prettier
To quote directly from the above:
Note that even if you use a formatter other than prettier, you can use eslint-config-prettier as it exclusively turns off all formatting rules.
When you open a file and save it, you should now see the formatter in action. To format the whole project, run:
dprint fmt
I saw a few a few setups using efm-langserver for linting/formatting with ESLint + Prettier.
I think these can be regarded as deprecated and superseded by usage of an vscode-eslint-language-server and the newly added formatter option which appears to give better performance and a more straight-forward way of setting things up.