The (almost) perfect Neovim setup for Node.js

Ғылым және технология

Setting up Neovim for Node.js shouldn’t be a chore. This video will help you get set up and learn how to easily configure and customize Neovim for your own configuration. By the end of this video, you'll have Neovim set up for code completion, linting, autoformatting and debugging. As well as learning how to interface with LSP commands yourself.
⚠️ NVChad has had some breaking changes, make sure to use the v2.0 branch if you're using this video. You can find the command below.
Commands:
NVChad Install line: git clone -b v2.0 github.com/NvChad/NvChad ~/.config/nvim --depth 1
Join this channel to get access to perks:
/ @dreamsofcode
Video Links:
Final Config: github.com/dreamsofcode-io/ne...
Formatter.nvim: github.com/mhartington/format...
Nvim-lint: github.com/mfussenegger/nvim-...
TypeScript Language Server:
Biome: biomejs.dev/
Prettier: prettier.io/
Eslint: eslint.org/
My socials:
Discord: / discord
Twitter: / dreamsofcode_io
My Equipment:
Voice over: kit.co/dreamsofcode/voiceover
Coding: kit.co/dreamsofcode/coding
00:00 Getting Started
02:41 Code Completion
07:18 Linting
11:06 Autoformatting
13:06 Null-ls
14:33 Debugger
18:37 Organize Imports

Пікірлер: 193

  • @dreamsofcode
    @dreamsofcode3 ай бұрын

    NVChad has had some breaking changes since this video! It's recommended to using the v2.0 branch instead for this video. I'll be doing an updated version of this video again soon!. git clone -b v2.0 github.com/NvChad/NvChad ~/.config/nvim --depth 1

  • @JOJO-vz4im

    @JOJO-vz4im

    3 ай бұрын

    Looking forward to it! Starting my nvim journey and these tutorials are helpful!

  • @xiiniius2716

    @xiiniius2716

    3 ай бұрын

    I use v2 branch but it is not workings. I am pretty sure I copied all of your commands correctly but there is no module completion except for some none sense.

  • @dreamsofcode

    @dreamsofcode

    3 ай бұрын

    @@xiiniius2716 if you jump on my discord I can help better!

  • @hanzalaansari5259

    @hanzalaansari5259

    2 ай бұрын

    Hi how soon updated version of the tutorial will arrive ?

  • @shanukumawat6170

    @shanukumawat6170

    Күн бұрын

    need a video on biome!!

  • @jafarjuneidi7585
    @jafarjuneidi75859 ай бұрын

    A video on a Biome Neovim plugin would be more than great. I’d love to see how you think when creating a plug-in for Neovim and the whole process.

  • @hermessantos181

    @hermessantos181

    9 ай бұрын

    It'd be nice

  • @PGinPublic

    @PGinPublic

    7 ай бұрын

    agreed, would be amazing to see someone tackling compat problems in nvim

  • @gozpelhaptism9526
    @gozpelhaptism95269 ай бұрын

    I never commented on a YT vid. I just wanted to say thank you! You're nvim setup for Go, Python and now NodeJS helped me changing my IDE from vscode to vim. Hoping that there will be an update on Go and Python since null-ls has been archived.

  • @ardnys35
    @ardnys359 ай бұрын

    it's been very difficult for me to make some things work without null-ls. thanks for showing us this way of doing the configuration. after setting up lsps and linters and formatters for languages i have never even used, i think i start to understand how the configs work. although it wasn't as smooth as i wanted it to be, your continuous and coherent tutorials are very valuable. thank you very much

  • @YuriTEC90
    @YuriTEC909 ай бұрын

    Great video as always! I would like to see more about the use of the Biome for the linting feature in NeoVim.

  • @FRCTKiwiz
    @FRCTKiwiz9 ай бұрын

    I’ve been with windows + vscode for so long, but your videos made me try this new world with Linux, neovim and tmux. I’m taking it really slow but already loving it! If i could also suggest another topic would be an arch customization! Thank you for the inspiration :)

  • @sonicotter
    @sonicotter9 ай бұрын

    I'd love to see a full crystal neovim guide, thanks to the original NvChad guide i've been super interested in a config for that!

  • @michaelalls8230
    @michaelalls82309 ай бұрын

    Would love to see a video of you creating the neovim plugin for biome

  • @dhruvpurohit2789
    @dhruvpurohit27899 ай бұрын

    Wow. Just yesterday i was trying to set this up, but since I am a complete noob I wasn't able to do it properly. This video couldn't have come at a better time.

  • @mcbride967
    @mcbride9678 ай бұрын

    I would love to see you build this plugin! Would find a lot of value in it. I'd like to one day be able to build my own if I needed to. Love the content!

  • @dwin9983
    @dwin99835 ай бұрын

    Thanks man, Im beginning to use neovim and this ones definently a good start

  • @stevemorgandev
    @stevemorgandev9 ай бұрын

    Interested in a Biome plugin. I’ll keep my eyes peeled. Thanks for the great content!

  • @dreamsofcode

    @dreamsofcode

    9 ай бұрын

    Thank you for watching it!

  • @walis85300
    @walis853007 ай бұрын

    Thanks for this video, it saved me hours and taught me a lot about NVIM!

  • @dreamsofcode

    @dreamsofcode

    7 ай бұрын

    Thank you so much! I'm glad it was helpful to you!

  • @zaafhachemrachid1701
    @zaafhachemrachid17019 ай бұрын

    i can't what for your next vedio and for biome vedio , you are the best , you make it clean and smple

  • @spxctreofficial
    @spxctreofficial7 ай бұрын

    For users of null-ls, there is now a community-driven, community-maintained version of null-ls called none-ls. It is worth checking out, as it seems to just be a drop-in replacement.

  • @ktknoks8718
    @ktknoks87187 ай бұрын

    Great video! I'm facing issue with the debugger. Seeing, ECONNREFUSED error when trying to run the debugger, system is M1 mac.

  • @VictorHugo-vt2po
    @VictorHugo-vt2po8 ай бұрын

    Nice video man!

  • @Acesif
    @Acesif17 күн бұрын

    Great Video! Thanks a bunch

  • @juk98765
    @juk987659 ай бұрын

    Your videos makes me want to switch back to neovim but for me helix have really good defaults and easy to use. Also biomejs supports helix. Hope one day I'll get to see helix videos.

  • @ChunChoc-Kun
    @ChunChoc-Kun9 ай бұрын

    Very nice video, I'm waiting the perfect setup for Java. 😊

  • @a_maxed_out_handle_of_30_chars
    @a_maxed_out_handle_of_30_chars9 ай бұрын

    thank you, this was pretty good :)

  • @danielstellmon5330
    @danielstellmon53304 ай бұрын

    I don't want to use NVChad, but I want to set this up in my config. Thank you for your suggestions.

  • @sergeijohansen4378
    @sergeijohansen43783 ай бұрын

    Best tutorial on nvim ever

  • @Yoplat
    @Yoplat9 ай бұрын

    Great video! I’ve looked at your dotfiles and I’ve seen that you use Emacs, will you do a video on your config? Differences between Emacs and Neovim?

  • @markgagnon28
    @markgagnon289 ай бұрын

    great video, this finally made me switch from vscode to nvim but i cant figure out how to make eslint fix the errors after prettier

  • @AIZEN155
    @AIZEN1554 ай бұрын

    this channel is underrated

  • @amitsharma5996
    @amitsharma59969 ай бұрын

    Thanks a lot dude

  • @devabdul
    @devabdul9 ай бұрын

    What's next video? Any hint make more curious us, because we love to see your videos❤

  • @marko95g
    @marko95g9 ай бұрын

    I couldn't wait to see what you would use instead of null-ls. What is your recommendation for go setup?

  • @dreamsofcode

    @dreamsofcode

    9 ай бұрын

    I cheated and still gave a null-ls option haha. I hope there is something equivalent soon. I don't love the two options I put forward in the video.

  • @marko95g

    @marko95g

    9 ай бұрын

    @@dreamsofcode yeah, null LS has the best performance

  • @anujupadhyay10
    @anujupadhyay106 ай бұрын

    07:55 yes! yes!

  • @albert21994
    @albert219949 ай бұрын

    I'm very interested in the biomejs video!

  • @qnprogrammer
    @qnprogrammer9 ай бұрын

    Thank you!

  • @WaldirBorbaJunior
    @WaldirBorbaJunior9 ай бұрын

    Nice content, now I'm searching a way to configure sub theme of catppuccin (frappe). Do you have any ideia how to setup this?

  • @jakubkrcmarik8363
    @jakubkrcmarik83639 ай бұрын

    Biome is already in mason, but a video on a custom neovim plugin would be nice

  • @nihi1ist690
    @nihi1ist6909 ай бұрын

    Please, also make a video on customizing nvChad for bash, HTML and CSS (emmet). Thanks!

  • @roiborromeo7921
    @roiborromeo79218 ай бұрын

    Saw your vid before when you're setting a NvChad, now I think you need to know :Mason actually exist so you can have a GUI for installing LSPs and some more by just selecting then and press i

  • @jd4rce
    @jd4rce9 ай бұрын

    Reading the help of lspconfig I realised that commands field in setup function will be deprecated. This is what it says: `commands` is a map of `name:definition` key:value pairs, where `definition` is a list whose first value is a function implementing the command, and the rest are either array values which will be formed into flags for the command, or special keys like `description`. Warning: Commands is deprecated and will be removed in future releases. It is recommended to use `vim.api.nvim_create_user_command()` instead in an `on_attach` function. So. Instead of doing this: commands = { OrganizeImports = { organize_imports, description = "Organize Imports", }, }, do this: on_attach = function(client, bfnr) on_attach(client, bfnr) vim.api.nvim_create_user_command("OrganizeImports", organize_imports, { desc = "Organize Imports" }) end,

  • @dreamsofcode

    @dreamsofcode

    9 ай бұрын

    Much better!

  • @shad-intech
    @shad-intech5 ай бұрын

    @dreamsofcode Watching this in Jan-2024. the command for formatting on save was update from FormatWritelock to FormatWrite.

  • @sadabwasim9850
    @sadabwasim98509 ай бұрын

    Neovim for Flutter next.

  • @greentea5445
    @greentea54459 ай бұрын

    Can you make a video setup neovim for multiple languages like c#, java,react....Love your videos!

  • @ZilverDx
    @ZilverDx9 ай бұрын

    Thanks for this but how you can start a debbug mode when you are using nest.js or azure functions (server apps)?

  • @charvillatxmx
    @charvillatxmx7 ай бұрын

    I got an error on activating the debugger that it could not connect to the address point for the server ip address listed in the dap.config file. any ideas?

  • @marqhuez4469
    @marqhuez44699 ай бұрын

    How do you have such perfect nerd font? I always have some alingment issues with glyphs (using JetBrains Monofont).

  • @afroboi7454
    @afroboi74549 ай бұрын

    me to biome: "We will watch your career with great interest"

  • @truongvonhat2016
    @truongvonhat20168 ай бұрын

    Thanks for your sharing. I hope you can share a plugin or some way that we can have the spell checker same way with Jetbrain IDE or Vscode Spell checker extensions. Many thanks and Good day

  • @sebastianpinzon5276
    @sebastianpinzon52769 ай бұрын

    If only I knew about neovim earlier in my carrier

  • @zeroesandones4145
    @zeroesandones41459 ай бұрын

    Please do one of these for java.

  • @Philopater-Phoneix

    @Philopater-Phoneix

    9 ай бұрын

    i don't think something will come close to intelij

  • @emersonbarros6815
    @emersonbarros68159 ай бұрын

    Have you tried using efm instead of nvim-lint and Formatter.nvim?

  • @anversadutt
    @anversadutt9 ай бұрын

    very cool thx

  • @Thel-foo
    @Thel-foo7 ай бұрын

    Also migrated from null-ls to formatter and nvim-lint. Find it actually more convenient to have this separation. There is also a community fork off null-ls.

  • @dreamsofcode

    @dreamsofcode

    7 ай бұрын

    I'm very keen to see how none-ls does! I've put the series on hold until I'm confident that it's the right approach! fingers crossed 🤞 I'm glad you're enjoying both formatter and nvim-lint! I'm hoping I warm up to it if it becomes the new standard.

  • @llxxqqdd
    @llxxqqdd8 ай бұрын

    You can make video about setup your terminal?

  • @user-zx2ss3zj1s
    @user-zx2ss3zj1s9 ай бұрын

    Does organize import works on js files as well?

  • @walis85300
    @walis853007 ай бұрын

    I am adding the save configuration dap.adapters but I am getting ECONNREFUSED error, help

  • @_liminor
    @_liminor3 ай бұрын

    is there a place where we can find alacritty's default config file? i know the repo says that it doesn't create one by default, but it would be nice if there was a sample

  • @rezafisher2549
    @rezafisher25499 ай бұрын

    You should show setting up something like this in LazyVim

  • @afroboi7454
    @afroboi74549 ай бұрын

    Also, I am very interested in a video about biome. I discovered it via Mason, tried to use it today but failed :(

  • @DoctorHimon
    @DoctorHimon5 ай бұрын

    hello, thank you for config! Can i ask you to merge python nvim conf and this js conf together?

  • @themarksmith
    @themarksmith9 ай бұрын

    Would love to see similar videos for Golang and Python (with support for anaconda envs - and things like tensorflow) - love your vids!

  • @Alex-hy7nx

    @Alex-hy7nx

    9 ай бұрын

    He already NeoVim setups for Go, Python, and C++

  • @themarksmith

    @themarksmith

    9 ай бұрын

    @@Alex-hy7nx Okay thanks I will check out his previous videos!

  • @p-nerd
    @p-nerd8 ай бұрын

    Next, do a (almost) perfect Neovim setup for PHP(Laravel) development. Please!!

  • @-__--__-_--
    @-__--__-_--9 ай бұрын

    Can you make a video on mason-lspconfig, for some reason I can't seem to make it work

  • @subarunatsuki1902
    @subarunatsuki1902Ай бұрын

    Is it also possible to setup a live server like in Visual Studio Code? Without that aspect I wouldn't consider Nvim to be honest

  • @nicholasamaral7156
    @nicholasamaral71569 ай бұрын

    Worth adding that typescript-language-server will crash if your node is not updated

  • @nihi1ist690
    @nihi1ist6909 ай бұрын

    Hi! Why is the biome installed but not configured? Thanks.

  • @yopla250
    @yopla2507 ай бұрын

    Both nvim-lint and formatter now support Biome, btw 🎉

  • @dreamsofcode

    @dreamsofcode

    7 ай бұрын

    That's great news!

  • @GilbertoDiaz-fr9pt
    @GilbertoDiaz-fr9pt9 ай бұрын

    One of the features holds me of using vim is to find a symbol in a file or workspace. In vscode cmd+shift+o search symbol in current open file (this is not a text search) it will list all the vars, functions, methods, classes, etc. With cmd+t it does the same thing but at the workspace/project level. Is it possible to add this functionality in Vim?

  • @reidpritchard2913

    @reidpritchard2913

    9 ай бұрын

    Yes! The `Telescope` plugin has some built-ins for exactly this. I've found the workspace-wide symbols to be a little less consistent than in VSCode. I think it's because I'm usually in monorepos (maybe?). There definitely could be something I'm missing too, I haven't looked much into it. I have a bit of a different config structure, but the lazy entry looks like this: ``` telescope = { "nvim-telescope/telescope.nvim", dependencies = { "nvim-lua/plenary.nvim" }, keys = { { "sws", -- Search Workspace Symbols "Telescope lsp_dynamic_workspace_symbols", desc = "Search for workspace symbols", noremap = true, }, { "ss", -- Search Symbols "Telescope lsp_document_symbols theme=ivy", desc = "Search for symbols in current buffer", noremap = true, }, ... more mappings ```

  • @Abbru
    @Abbru7 ай бұрын

    Im waiting for php version of this video series

  • @samuelsurfboard9887
    @samuelsurfboard98877 ай бұрын

    Biome has Lsp support so using lsp config should work properly for both linting and formatting since Ruff works very well for those features in its Lsp server. It would just be another Lsp beside tsserver. I don't think a plugin is needed.

  • @akibahmed229
    @akibahmed2299 ай бұрын

    perfect

  • @Redyf
    @Redyf9 ай бұрын

    W video 🐧🤝

  • @dreamsofcode

    @dreamsofcode

    9 ай бұрын

    Thank you, King!

  • @siduck_og
    @siduck_og9 ай бұрын

    TSInstall typescript javascript

  • @dreamsofcode

    @dreamsofcode

    9 ай бұрын

    I forgot to mention Treesittier in this one! Thank you for reminding me!

  • @florian6385

    @florian6385

    7 ай бұрын

    I tried to automate that process. So I have created a custom config in "custom/configs/treesitter.lua" like this : "local options = { ensure_installed = { "lua", "javascript", "typescript" }, } return options" And I have applied this custom config in "custom/plugins.lua" : "{ "nvim-treesitter/nvim-treesitter", opts = function() local opts_nvchad = require "plugins.configs.treesitter" local opts_custom = require "custom.configs.treesitter" return vim.tbl_deep_extend("force", opts_nvchad, opts_custom) end, }," I'm new to neovim/nvchad so I'm not sure if it is the right approach

  • @dreamsofcode

    @dreamsofcode

    7 ай бұрын

    @@florian6385 Ive actually been working on something very similar to this in order to solve my forgetfulness on TSInstall! 😁

  • @florian6385

    @florian6385

    7 ай бұрын

    @@dreamsofcode Yeah same it is something I will forget in few months haha So I prefer to not have any manual action, so when I switch to a new machine I can just git clone my config without having to think about it 🙂

  • @joswadsouza1445
    @joswadsouza14459 ай бұрын

    Could you please create neovim set up for c#

  • @rickdg
    @rickdg9 ай бұрын

    Unfortunately it feels that the typescript LSP doesn’t work as well as the one on vscode.

  • @tezismith8795
    @tezismith87959 ай бұрын

    please do a video on biome!

  • @mohidenadam
    @mohidenadam8 ай бұрын

    please make one for C# and .Net core

  • @niteshtudu6449
    @niteshtudu64493 ай бұрын

    Cool config bruh. But i faced some issue while using it, while autocomplete importing like react-redux functions then it wasn't showing any autocomplete. I check some thing, like on the cjs files it isn't working. Can you help out man.

  • @volcomwave
    @volcomwave4 ай бұрын

    Hey o, I'm following along and formatter isn't working. I get the following error: "Error detected while processing BufWritePost Autocommands for "*":" Any ideas what I am doing wrong? I ended up copying the formatter.lua file.

  • @mzyu
    @mzyu9 ай бұрын

    Lets goo

  • @ameer6168
    @ameer61689 ай бұрын

    I'm trying to setup tailwind support and intellisense but it's not working

  • @_ronini
    @_ronini9 ай бұрын

    Finally.

  • @RatchetXJ0461
    @RatchetXJ04619 ай бұрын

    so bad I'm not good enought to transcript this to nvim kickstart, one day maybe !

  • @dwolrdcojp
    @dwolrdcojp9 ай бұрын

    thanks

  • @hitarthpatel
    @hitarthpatel9 ай бұрын

    dream thanks bro 🤍

  • @sanepenguin
    @sanepenguin6 ай бұрын

    I have tried it so many times yet auto completion only work on variables and functions but not for modules. Someone know how to fix this?

  • @abidesign932
    @abidesign9328 ай бұрын

    hi, does anyone know why my ts completion doesn't work? the javascript file working properly

  • @CrazyLuke11
    @CrazyLuke117 ай бұрын

    Are you using arch btw?

  • @bcorey3660
    @bcorey36608 ай бұрын

    I got prettier working the null-ls, but for some reason eslint is being tricky. Its giving me an error for local/share/nvim/lazy/null-ls.nvim/lua/null-ls:165 --> command eslint is not executable (make sure its installed and on your $PATH)

  • @Jack-en8mo

    @Jack-en8mo

    7 ай бұрын

    I have the same issue, have you resolved it?

  • @sudiptakarmakar6994
    @sudiptakarmakar69949 ай бұрын

    please create a video for automatic code run like vscode

  • @venkatrushivanga1025
    @venkatrushivanga10259 ай бұрын

    waiting for c# dotnet setup video

  • @lokeswaranaruljothy8100
    @lokeswaranaruljothy81008 ай бұрын

    Hey, my project use springboot in kotlin and i wanted to use neovim. Can you create a similar video like this??

  • @dreamsofcode

    @dreamsofcode

    8 ай бұрын

    Absolutely! It'll probably be java before hand but I'll end up doing one for both languages!

  • @muhamadrafipamungkas4465
    @muhamadrafipamungkas44654 ай бұрын

    Hello, incase you want to make the linter as optional thing to do when saving. vim.api.nvim_create_autocmd({"BufWritePost"}, { callback = function() local eslint_exists = vim.fn.executable('eslint') == 1 if eslint_exists then require("lint").try_lint() else -- Optionally, you can print a message or handle the absence of eslint differently print("Eslint not found in this project") end end, }) Some of my project doesn't use linter and causing this error: Error detected while processing BufWritePost Autocommands for "*": Error running eslint: ENOENT: no such file or directory Press ENTER or type command to continue

  • @CaptainDouchie
    @CaptainDouchie9 ай бұрын

    can do one for java please, java is so hard to setup for

  • @vanvothe4817
    @vanvothe48178 ай бұрын

    I never use linter/format inside vim because there are so many different linter/formats, this is even worse in javascript/typescript when having to configure prettier, eslint, standardjs to work together. The exception is in golang, rust is easy because it has a default linter/format.

  • @tjdgmlchl6305
    @tjdgmlchl63056 ай бұрын

    I’m interested in biome for neovim!

  • @mick_io
    @mick_io4 ай бұрын

    Multiple people including myself cannot get the debugger to work.

  • @sayanta01
    @sayanta019 ай бұрын

    can you make one for java please

  • @ryandsouza2962
    @ryandsouza29629 ай бұрын

    Has anyone explored efm as an alternative to null-ls?

  • @khemchand6431
    @khemchand64317 ай бұрын

    For me MasonInstallAll is not working, do i have to configure anything first to use it ?

  • @dreamsofcode

    @dreamsofcode

    7 ай бұрын

    Did you try restarting Neovim?

  • @khemchand6431

    @khemchand6431

    7 ай бұрын

    @@dreamsofcode Thanks for replying it worked out for me, one more thing when i configured typescript server i am able to get suggestions for .js files as well as for .ts but I am not getting autosuggestions for nodejs modules in .ts files

  • @CC-1.
    @CC-1.9 ай бұрын

    Hello as your channel has name of 'dream of code'. Can you help me I'm making my own Programing Language which is modern and fast and easy So Can you help me what's the best santax,support,etc stuff I should use

  • @fabianmolina15
    @fabianmolina157 ай бұрын

    Do you have any config for java please?

  • @dreamsofcode

    @dreamsofcode

    7 ай бұрын

    It will be coming soon! I've been waiting to see what happens with null ls before continuing, but I think we're at a good spot!

  • @hunterxx6744
    @hunterxx67444 ай бұрын

    Sir when you are setting up for flutter ?

  • @dreamsofcode

    @dreamsofcode

    4 ай бұрын

    Soon!

  • @hunterxx6744

    @hunterxx6744

    4 ай бұрын

    @@dreamsofcode okay sir thanks in Advance

Келесі