Neovim Setup for Web Dev (JavaScript, Next.js)

[@nikolovlazar]

Hope you enjoy this one! It's a bit longer, but it's also beginner friendly. I don't get into too much detail because I wanted to cover everything in the video, but feel free to ask questions about any part of the video and I can expand on it (or even make another video). Thanks for watching! Also, here's a link to my dotfile: github.com/nikolovlazar/dotfiles

[@spithacode101]

Thanks for dropping this video out. I was unpatiently waiting for it. Copied your dotfiles yesterday and got it working. Tried tmux for the first time on a microservices project and created a session for each microservices. Each session has 2 windows, one for the terminal and one for neovim. I'm really enjoying it so far.

[@theolavaux]

Awesome video! I'm new to Neovim and Tmux but it would be awesome to see a step-by-step setup!

[@rvft]

This is the most beautiful neovim/kitty configuration I've ever seen, so much so, im about to give it a shot lol

[@nikolovlazar]

Let me know how it goes, or if you get stuck somewhere!

[@lucaahe2252]

Probably the best channel I‘ve found this year. Very excited for your clean architecture guide in next.js

[@nikolovlazar]

Ah thank you!

[@SayfSentinel]

Niiiiice, this kids of video is WAY better than a Netflix series.

[@FekuEntertainmentLtd]

Thanks Lazar for this knowledge. I've always struggled with debugging in Neovim. I got to know about neotest, which was great. Btw, would love to see a video about your desk setup as well -- like monitors, keyboards, etc.

[@nikolovlazar]

That could be a fun video! 😁 Thanks for the feedback!

[@ದೀಕ್ಷಿತ್ಆನಂದ್]

dang , i didn't know neovim could do that much of stuff!!! awesome configs btw!, thank you for sharing this!!!

[@nikolovlazar]

Neovim is awesome!

[@m0r4ag]

This video is incredible, this inspired me a lot to work more in my environment, great content, thanks.

[@ΓιαννηςΧοργκος]

Great video! We have similar setups but definitely I’ve got some nice ideas after watching the video

[@DraciVik]

Thank you! I just starred and forked your dotfiles. I've been looking for a dev workflow like this which I can apply to myself

[@voyo-m4w]

Odlicno Lazar, blagodaram!

[@Thundechile]

Thanks for the nice video! Our workflows are quite similar, but you had a nice configuration for unifying tmux/neovim window/pane resizing in your tmux conf file. Just had to copy that to my own too!

[@nikolovlazar]

Glad you liked it! Love the resizing feature 😁

[@edwinboon9574]

This is awesome. I'm using a Nvim starter kit atm. Changes jobs in a month and get a new laptop will try lazyvim and Tmux there. Awesome video!♥

[@hinogi]

I admit, I was lured here for the frontend setup part for neovim, but turned out to be a double banger by looking at the beautiful DDD repo for bife

[@hinogi]

Oh and since I liked the repo so much I forked it and try my luck in writing it with effect-ts maybe I can get it to work most likely not :D

[@nacs]

its amusing / cute how he calls it 'tah-mux' instead of 'tee-mux' also, we're practically twins -- both split keyboards, kitty, tmux, neovim

[@nikolovlazar]

I’ve been saying it like that for years 😂

[@hoangnguyenhuu1298]

Awesome 🥰

[@YigitSonmezer]

you can simply do :!command to execute an external command within nvim. no need to switch to another terminal window.

[@wolfie8748]

when you hover on fucntion it highlight other parts which plugin does that? in 13:30

[@nikolovlazar]

What do you mean by highlighting other parts?

[@nikolovlazar]

Ah you mean when you hover on a function or variable it highlights its occurrences. I think that’s the LSP.

[@wolfie8748]

@@nikolovlazar yeah I mean that haha. I have LSP but it doesnt do that for me :(

[@nikolovlazar]

@@wolfie8748​​⁠not sure tbh. I’m using LazyVim with some minor changes and additions, but nothing around that. Check out their docs maybe you’ll find something about it.

[@wolfie8748]

@@nikolovlazar thanks sir let me check

[@prethammuthappabs2241]

Just a quick question, how do i go/look into the source file of a line , for example in intellij if i hover over any thing like lets say Securityfilter and press ctrl + click it takes me to the class source file , how do i do the same in neovim for C files

[@nikolovlazar]

That's "space g d" - short for "Go to Definition"

[@matiasfha]

Kitty can also split a window in different panes and have multiple windows inside the same "container" (OS window). Having that in mind: what advantage you get by using tmux vs native kitty features?

[@nikolovlazar]

Hey Matias! I haven't used Kitty's native features for window management. Can Kitty save the window configuration per "session"? If not, that'd be one advantage of tmux over kitty. Do you use Kitty's native features? How does your workflow look like?

[@matiasfha]

@@nikolovlazar AFAIK there is no native session management feature. I use just kitty to split one OS Window into multiple kitty window tho. But there has been many years since I used tmux so I can't directly compare

[@follantic]

Same here with iTerm cmd-d/cmd-shift-d. Pre configuring sessions would be nice though.

[@NullViewer]

Any reason why do you use external Tmux session manager instead a built-in ? Genuinely curious. I saw few people using some session managers but nobody explained what they didnt like in the built in. I personally using default keybinds to switch session, jump to previous session/window..

[@nikolovlazar]

Honestly, no good reason. I saw someone else using it and I picked it up too. I actually didn't know there is a built-in one 😅 but now that I've seen it, it looks perfectly fine.

[@avramukk]

Thank you! How to use harpoon? Because with your configuration it does not work with leader+number for switching buffer and in the leader+h I see just one file every times.

[@nikolovlazar]

Hmm, not sure what it could be. I don't think I'm overriding anything regarding Harpoon. I'm just using the defaults defined by LazyVim. What happens when you trigger leader+number? Does it show a notification?

[@neveralegend-kt8rd]

You have to “harpoon” the files, nothing is automatically pinned the first time

[@nikolovlazar]

@@neveralegend-kt8rd I thought I showed that, but now that I rewatched that part I see that I left it out. Yes, you should “harpoon” a file with leader-H. It’ll show up in the list, and then you can navigate to it. Thanks for clarifying this!

[@sharjeelmazharr]

great video, one recommendation: circular avatar for webcam would be way nicer then square one, it takes more space and doesn't look good compared to circular one

[@nikolovlazar]

Thanks for the feedback!

[@MuhammadAmmar-b5h]

Would you please make a video showcasing how to get your configuration running from the bare metal. Like doing a full setup guide the way you did it for "setup vscode like vim". I don't know how to setup your config files :`(

[@brihatsharma3452]

Was looking for this only😊

[@samueladebayo2557]

the tmux config is so good. how did you get the popup for tmux window switcher?

[@nikolovlazar]

To switch the sessions? That’s tmux-sessionx!

[@samueladebayo2557]

@@nikolovlazar thank you!!!!!

[@Sina-sd4zi]

hi Nikolav. thanks for great content! i am kinda new to nvim i have a question and i dont know where to ask so here i am, how to accept lsp autocomplete suggestion like i want to auto import a variable from another file.

[@nikolovlazar]

Hey! Depending on what your keybinding is set to. I open my autocomplete with Ctrl-Space, and pick the selected option with Ctrl-Y (for Yes). Auto-imports should show up as options in the autocomplete menu.

[@Sina-sd4zi]

@@nikolovlazar thanks i am currently using your dotfile for nvim config and i love it

[@saeedxgholami]

You can make split with telescope using ctrl + v and ctrl + x on telescope file picker

[@nikolovlazar]

Nice! I didn't know this. Thanks!

[@AizazShahid-ck8cn]

I could not get the borders for hover work for me. The other ones work just fine. I am using tokyonight

[@nikolovlazar]

That might be a theming issue. Do :highlight to see how your highlight colors are defined. Not sure which highlight the hover border is using, but it's worth looking at the highlights.

[@AizazShahid-ck8cn]

Beautiful!

[@AizazShahid-ck8cn]

My neovim setup is functionally maybe even better than yours(for me) but yours is so much more beautiful.

[@okkashaally2115]

I'll be configuring this setup on weekend. Thanks again🫡🫡

[@ronaldinhour]

Great video ! I have one question. How are you able to keep the same background on tmux ? Are you making it transparent ?

[@nikolovlazar]

It's an image: github.com/nikolovlazar/dotfiles/blob/main/.config/kitty/bg-blurred-darker.png

[@DigitalAlchemyst]

How long did it take you to get adjusted to this type of set up.

[@nikolovlazar]

Hmm, can't say to be honest. I used neovim and tmux a few years back, then switched to other IDEs, and then back to this setup with my prior experience, so I'm not sure in terms of time how long it took me to get used to it. I've also been gradually adopting vim motions and neovim plugins over time. That's the reality actually. You start with a simpler set of plugins enough to help you write and navigate code, but as soon as you get comfortable with that setup you add something to it, either a plugin or learn a new vim motion etc... You grow alongside your IDE setup.

[@DigitalAlchemyst]

@@nikolovlazar I use to write code in terminals and stuff long time ago. Not sure if stuff like this wasn't around then, or I just didn't know about it. I would have probably liked it. But now days Its all vs code or visual studio. Heck it took a lot of getting use-to to start using git commands again, Ive been in vs codes commit panel and git graph and git lens for so long, But i recently added Husky lint staged and lint commit to my work flow. the git panels only output the results of all those test in a terminal that is very busy, and the output is cleaner in a regular terminal as well. So i had to swap back to see what i wanted to see. I found myself having to look up the command to push to it to the github repo lol.

[@nikolovlazar]

I feel your pain. On the other side, I too don't punch in git commands 😁 I use LazyGit.

[@DigitalAlchemyst]

@@nikolovlazar nice. While your envrioment is certainly not for me, I learned a lot about your work follow that will help in following the clean arch series

[@ajzack983]

hey man nice video. tip: 12:36 if you want your telescope background to be transparent set this option in your cyberdream config: borderless_telescope = false, let me know how do you like it after trying it !

[@nikolovlazar]

Woah I very much prefer it with borders. Thanks for this!

[@rul1175]

What is the tmux theme that you are using???

[@nikolovlazar]

It's tokyo-night-tmux but I modified it a little: github.com/nikolovlazar/tokyo-night-tmux

[@ChenuluPeri]

Can you add your what keybindings you use so it will be easier for other users to adapt to them

[@nikolovlazar]

What do you mean? The little window on the right shows what keys I’m pressing at the moment.

[@ChenuluPeri]

@@nikolovlazar Wanted to see all your keybindings which I saw in the files. Great video BTW.

[@nikolovlazar]

@@ChenuluPerithanks! Let me know if you got more questions. Feel free to join my Discord server if you wanna chat: creatures.sh

[@iced2916]

Hey, I'm really enjoying your content. I was wondering if you could make a long video building a full stack app applying all the knowledge you have been sharing in these videos such as zsa, testing, thanks

[@nikolovlazar]

Thanks! Yeah that's definitely on the line.

[@GokuSan389]

Hi, great video. Q: What kind of keyboard is that ? I couldn't stop looking at your keyboard heheeh... Can you make video about it ....

[@nikolovlazar]

It's ZSA Voyager, hands down the best keyboard I've ever used. I do plan on making a video of my whole dev / KZbin setup (this weekend actually). Keep an eye!

[@mageshyt2550]

Could be nice if u made video on setting up neovim from start

[@brunocmesquita]

It looks like you tweaked your headline zsh theme a little bit. Can you add it to your dotfiles?

[@nikolovlazar]

Oh you're right! I pushed a new commit that adds it. Thanks!

[@brunocmesquita]

@@nikolovlazar Thank you!

[@didholipyan8227]

cool setup!

[@hinogi]

To all the viewers, does anyone know how to pull this setup of in Windows without WSL2?

[@shrewd7795]

Hmm i have all of this set up already, but man love the theme as a hole. Gonna try this combo. Just worried about spending hours with arch to configure it 😂

[@nikolovlazar]

Def the best theme I’ve put together 😁 it’s just cyberdream with that blurred background.

[@shrewd7795]

@@nikolovlazar You bet!

[@ilyeshammadi7278]

Three things we have in common: Neovim, ZSA Voygaer and PRS 🤜🏼🤛🏼

[@nikolovlazar]

A man of culture! Love it!

[@danielbergfrederiksen3731]

How much would I have to do to use this for other languages? Like Java for example? Maybe with Maven and Spring Boot :p

[@nikolovlazar]

I haven’t checked how’s the Java support in LazyVim, but here’s how to enable it: www.lazyvim.org/extras/lang/java It’s practically 1 line of code. Hope it works for you!

[@yoryerpy]

That was a really cool video! I wondered how you patched the Dank Mono font to make it look good in Kitty. Usually, I have to patch it to make all the glyphs mono, so the icons don't look good. Thank you!

[@nikolovlazar]

Thanks! I just used the Nerd Font patch tool. It wasn't too complicated as much as I remember it.

[@yoryerpy]

@@nikolovlazar Yeah, using the patch tool is easy. My problem is that the glyphs don't look very good, I had to switch to WezTerm to make them look pretty. Thank you for your answer!

[@tran_hai_dg]

How do you change color in session name of tmux status bar to purple?

[@nikolovlazar]

I made my own fork of the tokyo-night-tmux theme that changes some of the colors. Here's the commit that does that: github.com/nikolovlazar/tokyo-night-tmux/commit/dcef777c418795cd10622f62a6f1663b310094dc. Look on line 55, in the "Session name" section.

[@tran_hai_dg]

@@nikolovlazar Such a valuable content. Thank you for sharing this video to us.

[@nikolovlazar]

@@tran_hai_dgthank you!

[@hoinguyenvan537]

Awesome. What theme are you using?

[@nikolovlazar]

It’s cyberdream! Check it out at 6:37

[@Noobhacker-d6m]

definitely earned my sub but I was wondering what font are you using for this?

[@nikolovlazar]

Thank you! It's Dank Mono (compiled with NerdFont to include icons).

[@Noobhacker-d6m]

@@nikolovlazar also I'm sorry but i was trying to use the tokyo night theme that you have but it always has it so that the purple part stops right before the circle to indicate whether in tmux command mode or not do you have any idea how to fix this? Thank you in advance.

[@nikolovlazar]

I made some changes to my tmux config after recording this. Have you seen them? tmux config: github.com/nikolovlazar/dotfiles/blob/main/.config/tmux/tmux.conf my own tokyo-night-tmux fork: github.com/nikolovlazar/tokyo-night-tmux I forked tokyo-night-tmux and edited the colors and widgets. Give it a try and see if it fixes the purple. If it does, you can fork my fork and apply your own theme 😁

[@Deus-lo-Vuilt]

wow, thank you very much

[@zrxmax_]

what keyboard do you use?

[@nikolovlazar]

it's the ZSA Voyager! Hands down (pun intended) the best keybaord I've ever used 😁 I feel like it's designed for my hands.

[@bogdanvolotovskyy8798]

@@nikolovlazar I'm ZSA Voyager user as well. However I'm keep doubting my decision for layer switching which I committed to. What are you using for that? Would be interesting to see a link to your ZSA layout. P.S. Thanks for the content by the way. Found you with your DAP config video and that vitest mocking explanation hooked me up. Great job!

[@nikolovlazar]

I'm glad you like my content! Here's my ZSA config: configure.zsa.io/voyager/layouts/4aAyM/latest/0 I only have one layer where I have (){}[], volume controls, `~, and navigation stuff (arrows, page up/down, home/end). I tried introducing a third layer, but I never felt the need to. I'm very used to this setup and I don't feel any friction when typing.

[@Ruben3D]

How to debug typescript?

[@zrxmax_]

@@Ruben3D ts-node I guess

[@r2-p2]

I hade to fix my repo using revlog three times after using lazyvim. Sure I did something wrong but i did what I thought was right being presented what lazyvim showed me. Threw it out of the window and happily rebasing, fixupping, and all the other stiff using plain git and a bit of tig for visualization. Never had any issues.

[@nikolovlazar]

Yep, lazygit has given me a few headaches as well, but so far it's good. I also didn't know about tig, thanks for sharing it! I've gotten so used to lazygit it's fully a muscle memory at this point.

[@thepromisebenard]

Cool video Lazar. Please can you make a video about your vscode steup?, in depth if you can of course. I really like your set up and would love to replicate it too. I want to learn the vim movements but want to do so within vscode.

[@DigitalAlchemyst]

I have not seen him use VS code before

[@nikolovlazar]

I don't use VS Code as much, but I made a video on how to setup vim inside vscode and navigate through the panels with your keyboard only: kzbin.info/www/bejne/gIPRqKdtpLlkkKc

[@thepromisebenard]

@@DigitalAlchemyst Thank you

[@thepromisebenard]

@@nikolovlazar Thank you for this. Chcecking it out now.

[@lintaoamons5712]

I never setup a working debug in neovim

[@nikolovlazar]

You mean you've never made it work or? If that's the case, let's figure it out! What's the issue?

[@sarundayo]

Pretty cool! Although feels like you have "too much". Kinda confusing imo 😕

[@Heyy_manuel]

has anyone ever had problems with neotest-jest, my summary displays wrong results(failed tests) despite all test having succeeded

[@nikolovlazar]

I haven't noticed that issue in my setup. There are definitely some bugs 😁 oftentimes I get the green checkmarks placed on random lines where they're not supposed to be.

[@khanra17]

Nobody should suffer like this in 2024 man. Get an actual IDE like Jetbrains and use vim motions. Stick to these toy text editors for you 500 LOC projects. But if you do actual work then gift yourself a life. __somebody had to say the truth! 🙏

[@easycoders.academy]

Thanks a lot! Great setup and explanation! It worked perfectly for some time, but now I can't use your keybindings for splitting screen in neovim (ss and sv) because it toggles flash.nvim search when I type "s" (which is a default keybinding). It's kinda weird, if i disable keymaps in flash.nvim or disable flash.nvim completely - "s" acts as a "replace and go to insert mode" Have you came across this?

[@nikolovlazar]

Yeah I also use flash.nvim, but I found that I have to pause a bit after the first "s" and then start typing the thing I'm searching for. Other than this and the obvious move the "split" to a different key, not sure how you can go around this problem. I've gotten used to the pause after hitting "s" so it doesn't cause me any issues.