DEV Community

My Neovim setup for React, TypeScript, Tailwind CSS, etc

Takuya Matsuyama on August 09, 2022

Hi, it's Takuya here. As you may know, I mainly use Neovim to code my app called Inkdrop, a cross-platform Markdown note-taking app. It's built wit...

Read full post

Cristian Estarlich • Aug 10 '22

Hi Takuya, nice to see you here! when I saw the first screenshot I thought in you immediately, thanks for share all of your config!

Denis • Aug 10 '22

Hello Takuya, I love your coding videos, they're so satisfying and relaxing! Great setup by the way. Do you feel any inconveniences while working in neovim? I've been writing in neovim for a while, but eventually jumped to vscode because there were some little bugs that didn't make me completely happy with the whole process. Is your setup fully convenient for you?

Joshua Navarro • Aug 14 '22 • Edited

Hi Takyuta, nice blog and video I liked it so much.

I'm new in Vim world and I don't know how to make the lspconfig and cmp show autocompletation for my eslint config (eslintrc.json), for example in vscode if I write "no-con" the IDE shows me suggestion for "no-console" but in vim I can't replicate that feature. If someone with more knowledge in this world can help me I will really appreciate.

Thanks everyone!!

Joshua Navarro • Nov 8 '22 • Edited

Resolve, that happened because lspconfig doesn't have suggestions for JSON files, you have to specify the JSON Schema for each classic JSON file like package.json eslintrc.json etc.

There is a plugin which contains almost all the JSON schemas called squemastore so you can add the next line in your plugins.lua

use "b0o/schemastore.nvim" -- json schemas to use with lspconfig

and in your lspconfig.rc.lua add the JSON configuration

-- JSON
capabilities.textDocument.completion.completionItem.snippetSupport = true

local schemas = require 'schemastore'.json.schemas()

nvim_lsp.jsonls.setup {
  -- on_attach = on_attach,
  capabilities = capabilities,
  settings = {
    json = {
      schemas = schemas,
      validate = { enable = true }
    }
  }
}

Samuel Benson • Aug 9 '22

A fantastic read Takuya! Thanks for the update :)

Menard Maranan • Aug 11 '22

Definitely gonna bookmark this. I'm a fan of your YouTube channel and man how I envy your Neovim setup, lol.
Thanks a lot for this one!

Takunda Madechangu • Aug 9 '22

I don't want to see that thing in my life

CheatModes4 • Oct 25 '22 • Edited

hello, i tried to modify these formatting parameters, but it has been impossible to find where and in what file to put them, nor can I find documentation. someone knows ?

Modifying it in vscode is easy, just put, for example, in settings.json a property like
"typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true

but in neovim ?

Jesús CR • Sep 18 '22

Greetings, I wrote and did all the configuration steps as you put it in the video but not in macos but I did it with ubuntu, but the autotag for the html tags does not work for me, everything else turned out very well for me, I must be missing something in the configuration

MedLabs • Aug 10 '22

why using many LSP plugins ?

Samir Alibabic • Feb 6

Great article! Although, I assume you use solarized-osaka now 🤣

HummingBird24 • Sep 5 '22

Is the tailwind lsp server causing lag for you. It's been causing a lot of problems for me as of late?

azmy60 • Sep 17 '22 • Edited

Yeah. It's been discussed here btw github.com/neovim/neovim/issues/19...

Muhammad Ahsan Izhar • Jun 19 '23

Thanks,

Mehdi Baneshi • Sep 4 '22

Great . Thanks for Sharing

David Rio Deiros • Aug 15 '22

Does anyone know what laptop stand he is using in the video?

Nguyen Huu Anh Tuan • Aug 11 '22

I know you're Japanese, I've been watching you on youtube for a long time ago , thanks for the knowlege ❤️

Vlad Anisov • Apr 3

Takuya, please make a new config blog or video in 2024!

AllefDouglasDev • Aug 23 '22

Are you able to use Tailwind autocomplete with twin.macro?

HummingBird24 • Sep 5 '22

That can be done by passing settings when setting up tailwind

local nvim_lsp = require "lspconfig"
nvim_lsp.tailwindcss.setup {
settings = {
tailwindCSS = {
experimental = {
classRegex = {
'tw([^])',
'tw="([^"])',
'tw={"([^"}])',
'tw\.\w+([^])',
'tw\(.?\)([^])',
},
},
},
},

})