Effective NeoVim Setup for Full-Stack Web Development in 2024

Today we're setting up NeoVim for effective Full-Stack Web Development, going into 2024!
NeoVim has recently been growing in popularity rapidly, so I thought what better time than now to make a video explaining how to setup NeoVim for Web Development! We'll be using LazyVim, and showcasing many cool NeoVim plugins that make development work a breeze. NeoVim LSP Support, Inlay Hints, Git Integration, File Navigation, HTTP Requests, Database Querying, and Intuitive Testing Integrations are all part of this setup 🔥
Hope you like the video, feel free to shoot me an email with your thoughts!
📖 Free Vim E-Book
You can find the free e-book for this video with additional tips and plugin recommendations here:
→ bit.ly/sindo-vim
💻 GitHub Repository w/ Dotfiles
→ bit.ly/sindo-dotfiles
🎬 Chapters
00:00 - Intro
01:33 - LazyVim Setup
02:09 - Configuring LazyVim
02:34 - Configuring Vim Options
05:09 - Configuring Keybinds
05:10 - Installing Colorscheme
06:14 - Setting LazyVim Colorscheme
06:38 - Adding Mason.nvim
07:05 - Setting up LSP Configs
07:51 - Autocompletion with nvim-cmp
08:27 - Configuring Treesitter
08:57 - Configuring Mini-hipatterns for color highlights
09:37 - Setting up Telescope
11:03 - Disabling Dashboard & Statusline
11:27 - Configuring Noice.nvim
11:49 - Configuring nvim-notify
12:13 - Configuring Bufferline
12:37 - Configuring Incline.nvim
13:05 - Setting up LazyGit
13:30 - Configuring Nvim Tree
14:49 - Configuring Vim Dadbod
15:43 - Setting up Incremental Rename
16:28 - Setting up refactoring.nvim
16:59 - Configuring rest.nvim
17:52 - Setting up NeoTest
19:03 - Outro
🎥 My Filming Setup
📸 Camera - FujiFilm X-T3 - bit.ly/3sTdXqD
🔭 Lens - Sigma 56mm F1.4 - bit.ly/3EKyfVP
🎙️ Microphone - Rode Videomic NTG - bit.ly/3Pk5LHn
👾 Small Pixelated Display - Divoom Ditoo Pro - bit.ly/3sYT2lU
💻 Large Pixelated Display - Divoom Pixoo64 - bit.ly/4698U3Q
👤 About Me
Hi! My name is Mateo, but I usually go by Sindo. I'm a Software Engineer who likes to learn and make videos about productivity, self-help, and anything tech-related. Throughout my life, I found that I love sharing valuable lessons that I've learned over the years with others, so that's what I'm doing on this channel!
Anyway, make sure to subscribe, I hear that's what all the cool kids are doing nowadays.

[@fouadzouraibi5407]

The best setup i've ever used, i''ve been looking for this kind of setups for so long

[@sindo_dev]

Happy to hear it!

[@andrewiglinski148]

I've been using vim for a couple years, but this was a great video. Detailed, but also to the point. 10/10 👍

[@bihanbanerjee]

Thanks man. Loved it. This setup is very light-weight and gives smooth experience.

[@Robert-cc3wr]

Stumbled upon this video for a more concise neovim setup. Thanks for the gem!

[@sindo_dev]

Thank you for watching!

[@codingmohit8480]

love your setup dude

[@Dedseq]

love your setup!!!

[@sindo_dev]

Thank you and thanks for watching!

[@fryingpanm6977]

Love the content and presentation..❤❤❤❤

[@VinitKhandagle]

amazing!!! I am following your setup and also downloaded the free ebook. Amazing work

[@sindo_dev]

I'm really happy that you found it useful!

[@5mintoheaven871]

bro can you help me also to make my nvim setup exact like his in this video . unable to do it . need help

[@tryanderrorworld7421]

Great work.

[@adrianooo3658]

High quality video editing

[@sindo_dev]

🙏

[@jancekosunceko2934]

Love your videos, i like the style of editing. Keep going!

[@sindo_dev]

Thank you Jan!

[@geralddd.g]

Drop more often bro. Love the channel

[@sindo_dev]

Videos should drop bi-weekly now, trying to get it to weekly as well, thanks for watching man!

[@geralddd.g]

@@sindo_dev Its been a month Sindo

[@WeekendMakediy]

The video really wanted me switch to Neovim (although dampting) and ditch the mouse as much as I can - Looking how easy you are navigating through it it seems so simple, thank to your setup and dotfile, the shortcut does make most sence, but would still need to learn a bunch (find myself looking for 1h on how to open file in TAB so I could use the vertical split (vs) shortcut) not yet there but one day I might be a power neovim user! :)

[@sindo_dev]

I hope in this past month you've gotten faster at using Vim! This is awesome, thank you so much for sharing your experience, I promise you it gets easier with time, but it's a never-ending loop of trying to become faster ;)

[@_acky]

great neovim setup !

[@sindo_dev]

Thanks for watching! :D

[@prashlovessamosa]

thanks buddy

[@hyper-stack]

Hi, I have a problem is, when I type: ";f" to open the telescope, I find a file and open it, sometimes, it does not show the file content, just a blank screen. But when I navigate in the folder tree and open it or using space f f, it shows the content.

[@metromaple]

can you make a video on how you navigate? like how you open projects, recent files, how you open terminal and start npm scripts, just normal usage so people like me new to vim can have an idea on how to use all of this

[@user-cl5ik2wz3r]

Im using ur dotfiles, thanks

[@PandaXpress668]

I could watch your videos for the cozy factor alone.

[@mathijswy]

Nice video! What capture card are you using for your fujifilm to capture the input as background stream so nicely?

[@huibosa2780]

I like your video! But would you please tell me how do you make the application window borderless, i mean without the title bar

[@BlackvZ23]

I find it hard to find the root of errors if something dont work within my neovim plugins. Any suggestions where i could look to see some kind of errors?

[@reaperal7479]

Can you please assist me, how are you get eslint error mssgs on fly without going to normal mode or in insert mode

[@macmanuelodumeru3708]

Awesome video video and setup bro. My Neovim is similar to yours especially we both started from LazyVim as the base. Please how do you do the transparent terminal on top of your other video?

[@sindo_dev]

Thanks for watching! I can't share the transparent terminal unfortunately, channel secret :)

[@tsioryfitiavanaanhykrishna6992]

What keyboard do you use ? Nice editing btw, keep up the good works !

[@sindo_dev]

Thank you! It's a Keychron Q2, with Akko V3 Cream Black Pro switches

[@armandmalci495]

Nice video and awesome setup. I had one question regarding Arc. Do you have any suggestions on how to best uses as it consumes a fair amount of memory

[@sindo_dev]

Thanks for watching! I know Arc has been focusing on performance improvements recently, and they've come a long way, but I'm not sure how much you could optimise it further. Given that it's Chromium based, you can try tweaking some Chrome options to try and get your desired results. I've found this really cool post on reddit that you can take a look at: www.reddit.com/r/chrome/comments/hhxvi4/performance_and_simplicity_how_i_use_chrome/ You would have to tweak your "chrome://settings" and "chrome://flags" to modify some more advanced features, but I'm sure you could tweak it to your liking :) At the end of the day, you can't go around the fact that it's Chromium :D

[@simratpalsingh3355]

Thanks for the content. Really helpful especially for beginners. I was wondering, do we have a live-server functionality in NeoVim with this setup?

[@sindo_dev]

Thank you for watching, no live server unfortunately, I just open up a new tab and start up the web server there

[@Gilded30]

This is a wonderful setup, just asking did you have like a little collection of your keybindings so I can have it all the time on display ? im just starting learning neovim and vim movements and that for sure help me

[@laurosf]

I'd love that too! This is a lot to grasp on lol

[@FalconCodes-dx2nj]

Great video! just wondering doesn't lazyVim already come with Mason, lspconfig and treesitter? Are adding them back to override the default options?

[@sindo_dev]

It does come with them pre-installed, we're just configuring the default options, and they are merged with the default options by LazyVim automatically

[@anuragpramanik6095]

Could you please share which keyboard and keys you're using? I appreciate the video-keep up the great work!

[@sindo_dev]

Thanks for watching! It's a Keychron Q2, with Akko V3 Cream Black Pro switches, with lubed stabilizers and a tempest tape mod.

[@metromaple]

Where do i get the emoji package to have the icons?

[@chaksangwoo5382]

Hi, thx for your sharing! also just wondering what keyboard u r using, seems like keychron V2 or Q2 ?

[@laurosf]

Pretty sure that's the Q2!

[@jft63]

Hey! Which keyboard are you using? It sounds nice.

[@sindo_dev]

I'm using a Keychron Q2, with Akko V3 Cream Black Pro switches, with lubed stabilisers and a tempest tape mod :)

[@saintstella]

what terminal are you using? btw great setup *edited*: I found it, It is Warp

[@luanargolodev]

What about Warp terminal settings? How do I see? I downloaded Warp but it didn't get this theme, for example

[@sindo_dev]

I believe that the only changes that I made to Warp when I downloaded it is this: Under Settings -> Appearance: 1. Color Scheme - Dark 2. Window Opacity - 69 3. Window Blur Radius - 23 If you're talking about the "text" that I'm writing and the theme for that, you can find the entire setup in my previous video :) I'm using iTerm there instead of Warp, but the process is exactly the same! Thanks for watching! :D

[@luanargolodev]

Can you show the video of how you configured the Warp terminal too?

[@sindo_dev]

Hey, I replied to your other comment :) I'm using Zsh as my shell, with oh-my-zsh and powerlevel10k which are responsible for the style that you're seeing - everything can be found in my previous video :)

[@ibrahimcious]

hey, it's amazing Neovim config! One question, sorry if it's dumb question but how do I open multiple terminal inside neovim? Is it possible or should I use tmux instead?

[@sindo_dev]

Thanks for watching! You have multiple options for that. You can either use iTerm or Warp's tiling feature, and split your terminal into multiple panes, you can launch a terminal directly inside NeoVim and use it there (for example, Control + 7 brings up a terminal pop up on my LazyVim setup, but you can also do :terminal to open up a terminal in a specific Vim window), and you can also take advantage of Tmux (my favorite option). Realistically, find something that you find easy to work with, all options open up the same terminal ;)

[@dailychillvibe6012]

First comment. ❤ love your video. 😂

[@sindo_dev]

Thank you for watching! 🫶

[@JefCollier]

Are you using Warp as your primary terminal?

[@glaudston_]

I've been going back and forth between my own setup and Lazyvim, This video is convincing me to just stick to Lazyvim and change it to my liking. Can you make a video on setting it up for php/laravel/blade? I got phpactor/pint to work, but can't get Treesitter to highlight blade.php files. Seems a bit tricky from all the help I could find on the internet. Thanks for the great video!

[@sindo_dev]

I'm not very familiar with PHP unfortunately, it's been about 7 years since I used it :D But for highlighting, you could be missing the Treesitter PHP parser, not sure if blade makes a difference here

[@glaudston_]

@@sindo_dev Thanks for the reply, I finally got it to highlight .blade files using query/injections

[@bracedshorts]

can you make a video on how you edit and make your videos

[@DipenRikkaame]

is that warp terminal?

[@user-qt3dk1vw7c]

Do you know that your nvim config file is not working for code autosuggestions in a react project created with vite? How can this be solved?

[@sindo_dev]

Seems to be working fine for me, if you can share more specifics maybe we can debug it

[@user-qt3dk1vw7c]

@@sindo_dev Do I need to create a separate Prettier file when using your dotfile to get autosuggestion working in a React project? If so, how should I proceed after creating the file?

[@whiledev5087]

How do you record like that. I mean how do record with your webcam ir camera as a background and have a terminal open on that. Thanks for answering.

[@sindo_dev]

Channel secret :)

[@Anon_01]

What is your terminal?

[@krishmakhijani]

Hyy Dude loved your video just want to know something like how to configure python jupyter in neovim any idea didn't get any perfect resource for this

[@sindo_dev]

Unfortunately, I have never worked with Jupyter Notebook to try and set it up in NeoVim :/

[@jt_trinh_02]

what is the name of your termial?

[@lonesoldier1998]

i am unable to download the notes

[@Qazi-it9mo]

One thing i don't understand: Aren't most of these plugins installed by lazy already? like mason, the keymaps, etc

[@barathelangovan9276]

Amazing setup ;) plz drop your git repo here. thanks

[@sindo_dev]

Thank you! You can find the repo here: bit.ly/sindo-dotfiles

[@tetedanco]

Hello , i just started whit lazy vim , how do you fold tags, like for example a p tag , tyank you

[@sindo_dev]

github.com/anuvyklack/pretty-fold.nvim Maybe something like this will help

[@tetedanco]

@@sindo_dev thank you !

[@vanvothe4817]

Just one thing, don't make your editor look like vscode.

[@GuerraMrD2]

That is a new level of Microsoft hate😂

[@cdenneen]

Have you tried neogit to replace lazygit(like lazygit as CLI though along with lazydocker). Also have you tried neotree instead of nvim-tree? nvim-cmp should be faster than coc for you I would think too.

[@cdenneen]

Also what about dap for testing?

[@dosandK1]

Is it possible to make live-grep via telescope inside only changed files?

[@sindo_dev]

It is, but I *think* it's not as straight forward as other settings, so it might require some custom setup. My idea is that we can run "git diff --name-only" to get a list of changed file names, and then feed that to fzf to only search those files. If I have time these days I'll see if I can get a sample config up and running :)

[@dosandK1]

​@@sindo_dev thanks! In my opinion, to have the ability to live grep through modified files it's a killer feature :)

[@isuskristkomunist5243]

Thank you for making this video! Sea is overrated!

[@pom001]

Hi. What keyboard do you use in this video?

[@sindo_dev]

Keychron Q2 ;)

[@Grubyauau]

I have a question, namely, can everything written in your eBook with neovim be used during setup?

[@sindo_dev]

Of course! Everything in the e-book relates to the setup, + a few additional recommendations that would also work with the setup :)

[@Grubyauau]

@@sindo_dev yeah, this nvim setup it's so beautiful!

[@hyper-stack]

what is the terminal you are using?

[@sindo_dev]

It's called Warp

[@linbynd]

If you use harpoon, could you make a video on harpoon. ?

[@sindo_dev]

I'll certainly add it to my list! In the meantime, you can watch this video on Harpoon by the guy who created the plugin, the legendary Primeagen :D kzbin.info/www/bejne/h5_SpGuXdtWUb8k

[@itisciprian]

what terminal app are you using ? it is warp?

[@sindo_dev]

That's right! It's Warp :)

[@0x-003]

is there a reason why you dont use VScode? i myself is a jr. frontend dev. and I have only used vscode,

[@oblivikun]

vscode is a slow and bloated electron app and its also proprietary, this means that it really eats ur ram and also it uses the mouse which will decrease your productivity. neovim is fast but its not super duper configurable which is why i use emacs(emacs takes a long time to launch so i would reccomend launching an emacs daemon and using emacsclient)

[@o_glethorpe]

Either one is fine, but I recommend you learn vim motions tho. They have a package for that

[@oblivikun]

emacs motions are way easier and efficienter@@o_glethorpe

[@sindo_dev]

I personally started using Vim because I wanted to be able to move around without a mouse, and because I felt cool not having to use a mouse :) Yes, Vim and Emas are going to be more performant than VSCode, but most people aren't going to care or need that performance increase. If you don't have a problem with your workflow in VS Code, you don't care about it's performance, and you don't mind using a mouse, it's hard to advise switching to Vim or Emacs. If you do decide to switch, it's a long adjustment period with lots of learning, just to be able to do the same things you do with your VS Code, so you really have to enjoy the process if you want to make the switch. I would say the biggest argument with going into Vim or Emacs is that is allows you to "transition" your thoughts into code more efficiently. It's a small thing, but when you're developing and have to move around GUI's with a mouse, scroll constantly, etc. it may take a few seconds longer to find what you're looking for. This might seem insignificant, but when you're developing and in the flow, being able to quickly take code out of your head and actually write it allows you to focus more on the problem, than navigating a UI. Use whatever you like and feel comfortable with, people these days worry too much about the tools, and not enough on the code they're writing :D

[@DocHudson420]

@@oblivikunthere’s no way you said vim is not configurable…

[@RitulSingh]

which keyboard you are using??

[@sindo_dev]

Keychron Q2 :)

[@franklinfoster4170]

why neotree don't open file in new tab now?

[@sindo_dev]

We set the "t" key to open in a new tab, try pressing "t" on a file :)

[@ivanex12]

what font do you use?

[@sindo_dev]

FiraCode Nerd Font :)

[@andrewkosenko2757]

Can you please update your dotfiles to match what is in the video please?

[@sindo_dev]

They are almost a perfect match, but they also include a tmux setup, for anyone that's interested in that :)

[@IlanNass1]

Whats the keyboard he’s using

[@sindo_dev]

It's a Keychron Q2, with Akko V3 Cream Black Pro switches, lubed stabilisers, and a temptest tape mod :)

[@edgarulises9442]

how can i add astro lsp?

[@sindo_dev]

:MasonInstall astro-language-server

[@ASatheeshkumaran]

Neovim LSP, doesn't support styled component

[@rommelanaya1205]

What is name of your IDE? transparent?

[@sindo_dev]

The terminal is called Warp, and the app inside is NeoVim :)

[@MrYhoTie]

how to make vidoe like this?

[@jiangxina9566]

Which terminal emulator are you using?

[@sindo_dev]

It's called Warp :)

[@jiangxina9566]

@@sindo_dev Thanks! Are you using tmux or the built in multiplexer?

[@sindo_dev]

​@@jiangxina9566 I'm using tmux, I got used to it over the years :)

[@hubesh716]

how i install neovim please tell me

[@sindo_dev]

github.com/neovim/neovim/blob/master/INSTALL.md

[@CaptainDouchie]

can u share us ur developer workflow ?

[@sindo_dev]

Great idea for an upcoming video! :)

[@pedropicapiedra4828]

Difficult to follow the video

[@khoerulumam8316]

you can try the config he shared

[@eduardabramovich1216]

I wish you could add the python config to this setup. It would be awesome.

[@sindo_dev]

Of course you can add it! 1. Make sure to install the Python LSP. You can go into the lua/plugins/lsp.lua file, and under "ensure_installed" (after line 12), you can add "pyright". This will install the Python LSP. 2. In the lsp config below, inside the "servers" property, add "pyright = {}," after any of the other servers. This will use the default config, and you can view what that looks like here: github.com/neovim/nvim-lspconfig/blob/b1a11b042d015df5b8f7f33aa026e501b639c649/lua/lspconfig/server_configurations/pyright.lua#L44 3. Make sure Python is installed in TreeSitter to ensure proper highlighting. Either go into the treesitter.lua file and add it under "ensure_installed", or do :TSInstall python Now it's up to you to add any python specific config or plugins that you might want, but this should do the trick!