Configuring eslint and prettier in LunarVim 🌙. Bonus: Tailwindcss 🌊

Congratulations, you decided to move your web-dev activities to neovim. Specifically LunarVim. Great choice!

LunarVim does most of everything you would expect automatically 🤖 but it does not decide a formatter or linter for you.

lets keep it short and simple:

eslint

to add eslint as a linter for your project. Make sure it is installed as a devDependency or is installed globally if you're about that life.

next, while inside LunarVim, enter <leader> L c (<leader> is usually the spacebar unless you changed it) to reach the config.lua where you config, using lua, your editor 😃

now at the bottom, add the following lines

local linters = require "lvim.lsp.null-ls.linters"
linters.setup {
  { command = "eslint", filetypes = { "typescript", "typescriptreact" } }
}

just make sure that you didn't declare a local variable linters before, save, and voila! You're back in the abusive relationship that is working with eslint!

prettier

to add prettier as a formatter for your project, similar to eslint you need to have it installed somewhere reachable, and in the config.lua (<leader> L c), similar to the linters, add formatters as so:

local formatters = require "lvim.lsp.null-ls.formatters"
formatters.setup {
  {
    command = "prettier",
    filetypes = { "typescript", "typescriptreact" },
  },
}

for the keen-eyed, you can see that the config comes with an example for using prettier, so thats cool!

Bonus: TailwindCSS 🌊

Man I love me some tailwind. I love the intellisense of it and I don't like compromising. So if you're like me, and happened to use tailwind in your project. The setup is rather simple if undocumented.

first install the tailwind lsp using :LspInstall tailwindcss. Usually that is enough, but not in this case. lvim comes with configurations for tailwind, but you gotta tell him to actually set tailwind up!

the easiest way is to first install the tailwind language server globally like yarn global add @tailwindcss/language-server

then go back to your config.lua (using <leader> L c) and adding the line

require("lvim.lsp.manager").setup "tailwindcss"

Note: there is a way to use a local (read: devDeps) version of the language-server, but it's a tad convoluted and needs to be set up per-project. So Yeah 🤠

Hope that helps anybody

P.S Try to close and open your LunaVim if either of these don't immediately start up

Comments

[yohendry hurtado]

hey boss i got a question somehow related to this, cause if a active require("lvim.lsp.manager").setup "eslint"
it works as i spect, meaning it only activates when eslint config is present
but it did not provide me with the full warnings (skill issues)

if a active eslint via

local linters = require "lvim.lsp.null-ls.linters"
linters.setup {
  { command = "eslint", filetypes = { "typescript", "typescriptreact" } }
}

it gives me all the goods diagnostics but is active for every single ft regarding is configured or nor

the question is how do i manage to have all diagnostics but active just when configured?

i work with biome and eslint and i need to have just the configured linter active
to activate biome i just did require("lvim.lsp.manager").setup "biome" and it works out of the box with all diagnostics, actions and formatting

[Alcides Bezerra]

That was really helpful, the Lunar Vim documentation is quite poor on how to handle the plugins.

[Casey Carroll]

Thanks, very helpful

[Serjio]

No no no! No eslint! This will fill up all RAM. Use eslint_d instead.

[Datner]

What? This doesn't even make sense. If anything it's only possible the other way around.... With eslint you spawn a single instance, it lints, and done. eslint_d removes the overhead of spinning up nodejs by just staying alive for subsequent linting. Creating a server that spawns many eslint instances, which of course don't need to wait for the nodejs to warm up. Making it as fast as eslint can be. But it's still just firing eslint instances and unlike eslint it persists in your ram

I think you might have gotten something mixed up