DEV Community

Datner
Datner

Posted on

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" } }
}
Enter fullscreen mode Exit fullscreen mode

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" },
  },
}
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

Top comments (5)

Collapse
 
yohendry_hurtado_a6f88045 profile image
yohendry hurtado • Edited

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" } }
}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
alcidesbsilvaneto profile image
Alcides Bezerra

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

Collapse
 
caseydean8 profile image
Casey Carroll

Thanks, very helpful

Collapse
 
shavlovskii profile image
Serjio

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

Collapse
 
datner profile image
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