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

Поділитися
Вставка
  • Опубліковано 11 січ 2025

КОМЕНТАРІ •

  • @nikolovlazar
    @nikolovlazar  5 місяців тому +11

    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
    @spithacode101 5 місяців тому +9

    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
    @theolavaux 3 місяці тому +6

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

  • @lucaahe2252
    @lucaahe2252 4 місяці тому +6

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

  • @rvft
    @rvft 4 місяці тому +2

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

    • @nikolovlazar
      @nikolovlazar  4 місяці тому

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

  • @SayfSentinel
    @SayfSentinel 5 місяців тому +11

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

  • @ದೀಕ್ಷಿತ್ಆನಂದ್
    @ದೀಕ್ಷಿತ್ಆನಂದ್ 3 місяці тому +2

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

  • @FekuEntertainmentLtd
    @FekuEntertainmentLtd 3 місяці тому +3

    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
      @nikolovlazar  3 місяці тому +1

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

  • @m0r4ag
    @m0r4ag 3 місяці тому

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

  • @DraciVik
    @DraciVik 4 місяці тому +1

    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

  • @ΓιαννηςΧοργκος
    @ΓιαννηςΧοργκος Місяць тому

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

  • @Thundechile
    @Thundechile 4 місяці тому +1

    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
      @nikolovlazar  4 місяці тому

      Glad you liked it! Love the resizing feature 😁

  • @hinogi
    @hinogi 28 днів тому

    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
      @hinogi 28 днів тому

      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

  • @voyo-m4w
    @voyo-m4w 4 місяці тому +1

    Odlicno Lazar, blagodaram!

  • @edwinboon9574
    @edwinboon9574 5 місяців тому +1

    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!♥

  • @YigitSonmezer
    @YigitSonmezer Місяць тому

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

  • @nacs
    @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
      @nikolovlazar  Місяць тому

      I’ve been saying it like that for years 😂

  • @sharjeelmazharr
    @sharjeelmazharr 3 місяці тому

    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

  • @wolfie8748
    @wolfie8748 17 днів тому

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

    • @nikolovlazar
      @nikolovlazar  16 днів тому

      What do you mean by highlighting other parts?

    • @nikolovlazar
      @nikolovlazar  16 днів тому

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

    • @wolfie8748
      @wolfie8748 16 днів тому

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

    • @nikolovlazar
      @nikolovlazar  16 днів тому

      @@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
      @wolfie8748 16 днів тому

      @@nikolovlazar thanks sir let me check

  • @matiasfha
    @matiasfha 4 місяці тому

    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
      @nikolovlazar  4 місяці тому

      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
      @matiasfha 4 місяці тому

      @@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
      @follantic 4 місяці тому

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

  • @iced2916
    @iced2916 5 місяців тому

    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
      @nikolovlazar  5 місяців тому +1

      Thanks! Yeah that's definitely on the line.

  • @MuhammadAmmar-b5h
    @MuhammadAmmar-b5h 2 місяці тому

    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
    @brihatsharma3452 5 місяців тому

    Was looking for this only😊

  • @mageshyt2550
    @mageshyt2550 2 місяці тому

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

  • @avramukk
    @avramukk 5 місяців тому +1

    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
      @nikolovlazar  5 місяців тому

      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
      @neveralegend-kt8rd 5 місяців тому

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

    • @nikolovlazar
      @nikolovlazar  5 місяців тому

      @@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!

  • @ajzack983
    @ajzack983 5 місяців тому

    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
      @nikolovlazar  5 місяців тому +1

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

  • @prethammuthappabs2241
    @prethammuthappabs2241 3 місяці тому

    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
      @nikolovlazar  3 місяці тому +1

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

  • @DigitalAlchemyst
    @DigitalAlchemyst 5 місяців тому +3

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

    • @nikolovlazar
      @nikolovlazar  5 місяців тому +1

      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
      @DigitalAlchemyst 5 місяців тому +1

      @@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
      @nikolovlazar  5 місяців тому +1

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

    • @DigitalAlchemyst
      @DigitalAlchemyst 5 місяців тому

      @@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

  • @NullViewer
    @NullViewer 3 місяці тому

    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
      @nikolovlazar  3 місяці тому

      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.

  • @saeedxgholami
    @saeedxgholami 4 місяці тому +1

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

    • @nikolovlazar
      @nikolovlazar  4 місяці тому

      Nice! I didn't know this. Thanks!

  • @didholipyan8227
    @didholipyan8227 5 місяців тому

    cool setup!

  • @shrewd7795
    @shrewd7795 4 місяці тому

    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
      @nikolovlazar  4 місяці тому +1

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

    • @shrewd7795
      @shrewd7795 4 місяці тому

      @@nikolovlazar You bet!

  • @AizazShahid-ck8cn
    @AizazShahid-ck8cn 4 місяці тому

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

    • @nikolovlazar
      @nikolovlazar  4 місяці тому

      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.

  • @okkashaally2115
    @okkashaally2115 5 місяців тому

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

  • @rul1175
    @rul1175 3 місяці тому

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

    • @nikolovlazar
      @nikolovlazar  3 місяці тому

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

  • @yoryerpy
    @yoryerpy 4 місяці тому

    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
      @nikolovlazar  4 місяці тому +1

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

    • @yoryerpy
      @yoryerpy 4 місяці тому

      @@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!

  • @ronaldinhour
    @ronaldinhour 3 місяці тому

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

    • @nikolovlazar
      @nikolovlazar  3 місяці тому

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

  • @Sina-sd4zi
    @Sina-sd4zi 4 місяці тому

    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
      @nikolovlazar  4 місяці тому +1

      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
      @Sina-sd4zi 4 місяці тому

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

  • @ChenuluPeri
    @ChenuluPeri Місяць тому

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

    • @nikolovlazar
      @nikolovlazar  Місяць тому

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

    • @ChenuluPeri
      @ChenuluPeri Місяць тому

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

    • @nikolovlazar
      @nikolovlazar  Місяць тому

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

  • @samueladebayo2557
    @samueladebayo2557 3 місяці тому

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

    • @nikolovlazar
      @nikolovlazar  3 місяці тому +1

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

    • @samueladebayo2557
      @samueladebayo2557 3 місяці тому

      @@nikolovlazar thank you!!!!!

  • @GokuSan389
    @GokuSan389 2 місяці тому +1

    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
      @nikolovlazar  2 місяці тому +1

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

  • @ilyeshammadi7278
    @ilyeshammadi7278 4 місяці тому +1

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

  • @hoangnguyenhuu1298
    @hoangnguyenhuu1298 9 днів тому

    Awesome 🥰

  • @danielbergfrederiksen3731
    @danielbergfrederiksen3731 4 місяці тому

    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
      @nikolovlazar  4 місяці тому +1

      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!

  • @AizazShahid-ck8cn
    @AizazShahid-ck8cn 4 місяці тому

    Beautiful!

    • @AizazShahid-ck8cn
      @AizazShahid-ck8cn 4 місяці тому +1

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

  • @hinogi
    @hinogi 28 днів тому

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

  • @brunocmesquita
    @brunocmesquita 4 місяці тому

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

    • @nikolovlazar
      @nikolovlazar  4 місяці тому +1

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

    • @brunocmesquita
      @brunocmesquita 4 місяці тому +1

      @@nikolovlazar Thank you!

  • @zrxmax_
    @zrxmax_ 5 місяців тому +2

    what keyboard do you use?

    • @nikolovlazar
      @nikolovlazar  5 місяців тому

      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
      @bogdanvolotovskyy8798 5 місяців тому

      @@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
      @nikolovlazar  5 місяців тому

      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
      @Ruben3D 5 місяців тому

      How to debug typescript?

    • @zrxmax_
      @zrxmax_ 5 місяців тому

      @@Ruben3D ts-node I guess

  • @hoinguyenvan537
    @hoinguyenvan537 5 місяців тому

    Awesome. What theme are you using?

    • @nikolovlazar
      @nikolovlazar  5 місяців тому

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

  • @tran_hai_dg
    @tran_hai_dg 5 місяців тому

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

    • @nikolovlazar
      @nikolovlazar  5 місяців тому

      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
      @tran_hai_dg 5 місяців тому

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

    • @nikolovlazar
      @nikolovlazar  5 місяців тому

      @@tran_hai_dgthank you!

  • @Noobhacker-d6m
    @Noobhacker-d6m 5 місяців тому

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

    • @nikolovlazar
      @nikolovlazar  5 місяців тому +1

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

    • @Noobhacker-d6m
      @Noobhacker-d6m 5 місяців тому

      @@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
      @nikolovlazar  5 місяців тому

      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 😁

  • @r2-p2
    @r2-p2 4 місяці тому +1

    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
      @nikolovlazar  4 місяці тому +1

      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.

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 5 місяців тому

    wow, thank you very much

  • @thepromisebenard
    @thepromisebenard 5 місяців тому +1

    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
      @DigitalAlchemyst 5 місяців тому +2

      I have not seen him use VS code before

    • @nikolovlazar
      @nikolovlazar  5 місяців тому +1

      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: ua-cam.com/video/JRnwt7oT1ZE/v-deo.html

    • @thepromisebenard
      @thepromisebenard 5 місяців тому

      @@DigitalAlchemyst Thank you

    • @thepromisebenard
      @thepromisebenard 5 місяців тому +1

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

  • @lintaoamons5712
    @lintaoamons5712 5 місяців тому +1

    I never setup a working debug in neovim

    • @nikolovlazar
      @nikolovlazar  5 місяців тому

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

  • @sarundayo
    @sarundayo 3 місяці тому

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

  • @Heyy_manuel
    @Heyy_manuel 3 місяці тому

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

    • @nikolovlazar
      @nikolovlazar  3 місяці тому

      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
    @khanra17 3 місяці тому

    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
    @easycoders.academy 4 місяці тому

    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
      @nikolovlazar  4 місяці тому

      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.