The (almost) perfect Neovim setup for Node.js

Поділитися
Вставка
  • Опубліковано 11 чер 2024
  • 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
  • Наука та технологія

КОМЕНТАРІ • 191

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

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

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

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

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

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

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

      Hi how soon updated version of the tutorial will arrive ?

  • @jafarjuneidi7585
    @jafarjuneidi7585 9 місяців тому +54

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

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

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

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

  • @FRCTKiwiz
    @FRCTKiwiz 9 місяців тому +5

    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 :)

  • @michaelalls8230
    @michaelalls8230 9 місяців тому +15

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

  • @sonicotter
    @sonicotter 9 місяців тому +1

    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!

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

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

  • @mcbride967
    @mcbride967 8 місяців тому

    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!

  • @dhruvpurohit2789
    @dhruvpurohit2789 9 місяців тому

    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.

  • @walis85300
    @walis85300 7 місяців тому

    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!

  • @stevemorgandev
    @stevemorgandev 9 місяців тому

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

    • @dreamsofcode
      @dreamsofcode  9 місяців тому +1

      Thank you for watching it!

  • @zaafhachemrachid1701
    @zaafhachemrachid1701 9 місяців тому

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

  • @ktknoks8718
    @ktknoks8718 7 місяців тому +5

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

  • @spxctreofficial
    @spxctreofficial 6 місяців тому +1

    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.

  • @a_maxed_out_handle_of_30_chars
    @a_maxed_out_handle_of_30_chars 9 місяців тому +1

    thank you, this was pretty good :)

  • @markgagnon28
    @markgagnon28 9 місяців тому

    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

  • @Yoplat
    @Yoplat 9 місяців тому

    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?

  • @Acesif
    @Acesif 8 днів тому

    Great Video! Thanks a bunch

  • @VictorHugo-vt2po
    @VictorHugo-vt2po 8 місяців тому

    Nice video man!

  • @ChunChoc-Kun
    @ChunChoc-Kun 9 місяців тому

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

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

    Best tutorial on nvim ever

  • @juk98765
    @juk98765 9 місяців тому

    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.

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

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

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

    this channel is underrated

  • @jd4rce
    @jd4rce 9 місяців тому +7

    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,

  • @marko95g
    @marko95g 9 місяців тому +4

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

    • @dreamsofcode
      @dreamsofcode  9 місяців тому +6

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

      @@dreamsofcode yeah, null LS has the best performance

  • @anujupadhyay10
    @anujupadhyay10 6 місяців тому +2

    07:55 yes! yes!

  • @shad-intech
    @shad-intech 5 місяців тому +1

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

  • @charvillatxmx
    @charvillatxmx 7 місяців тому +1

    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?

  • @jakubkrcmarik8363
    @jakubkrcmarik8363 9 місяців тому +2

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

  • @WaldirBorbaJunior
    @WaldirBorbaJunior 9 місяців тому

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

  • @albert21994
    @albert21994 9 місяців тому

    I'm very interested in the biomejs video!

  • @amitsharma5996
    @amitsharma5996 9 місяців тому

    Thanks a lot dude

  • @ZilverDx
    @ZilverDx 9 місяців тому

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

  • @walis85300
    @walis85300 7 місяців тому +1

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

  • @marqhuez4469
    @marqhuez4469 9 місяців тому

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

  • @nihi1ist690
    @nihi1ist690 9 місяців тому +1

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

  • @devabdul
    @devabdul 9 місяців тому

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

  • @zeroesandones4145
    @zeroesandones4145 9 місяців тому +9

    Please do one of these for java.

    • @Philopater-Phoneix
      @Philopater-Phoneix 9 місяців тому +3

      i don't think something will come close to intelij

  • @qnprogrammer
    @qnprogrammer 9 місяців тому

    Thank you!

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

    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

  • @greentea5445
    @greentea5445 9 місяців тому

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

  • @truongvonhat2016
    @truongvonhat2016 8 місяців тому

    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

  • @yopla250
    @yopla250 7 місяців тому +1

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

  • @sadabwasim9850
    @sadabwasim9850 9 місяців тому +2

    Neovim for Flutter next.

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

  • @emersonbarros6815
    @emersonbarros6815 9 місяців тому

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

  • @Thel-foo
    @Thel-foo 7 місяців тому

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

      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.

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

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

  • @sebastianpinzon5276
    @sebastianpinzon5276 9 місяців тому

    If only I knew about neovim earlier in my carrier

  • @afroboi7454
    @afroboi7454 9 місяців тому +1

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

  • @roiborromeo7921
    @roiborromeo7921 7 місяців тому

    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

  • @nihi1ist690
    @nihi1ist690 8 місяців тому

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

  • @-__--__-_--
    @-__--__-_-- 9 місяців тому

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

  • @rickdg
    @rickdg 9 місяців тому

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

  • @themarksmith
    @themarksmith 9 місяців тому +3

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

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

    • @themarksmith
      @themarksmith 9 місяців тому

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

  • @user-zx2ss3zj1s
    @user-zx2ss3zj1s 8 місяців тому

    Does organize import works on js files as well?

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

    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.

  • @llxxqqdd
    @llxxqqdd 8 місяців тому

    You can make video about setup your terminal?

  • @GilbertoDiaz-fr9pt
    @GilbertoDiaz-fr9pt 9 місяців тому

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

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

  • @sanepenguin
    @sanepenguin 6 місяців тому

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

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

  • @rezafisher2549
    @rezafisher2549 9 місяців тому

    You should show setting up something like this in LazyVim

  • @afroboi7454
    @afroboi7454 9 місяців тому

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

  • @anversadutt
    @anversadutt 9 місяців тому

    very cool thx

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

    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.

  • @nicholasamaral7156
    @nicholasamaral7156 9 місяців тому

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

  • @ameer6168
    @ameer6168 8 місяців тому

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

  • @joswadsouza1445
    @joswadsouza1445 9 місяців тому +1

    Could you please create neovim set up for c#

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

    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

  • @bcorey3660
    @bcorey3660 8 місяців тому +1

    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?

  • @tezismith8795
    @tezismith8795 9 місяців тому

    please do a video on biome!

  • @Redyf
    @Redyf 9 місяців тому

    W video 🐧🤝

  • @akibahmed229
    @akibahmed229 9 місяців тому

    perfect

  • @samuelsurfboard9887
    @samuelsurfboard9887 6 місяців тому

    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.

  • @mohidenadam
    @mohidenadam 8 місяців тому +1

    please make one for C# and .Net core

  • @p-nerd
    @p-nerd 8 місяців тому

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

  • @ryandsouza2962
    @ryandsouza2962 9 місяців тому

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

  • @_ronini
    @_ronini 9 місяців тому

    Finally.

  • @dwolrdcojp
    @dwolrdcojp 9 місяців тому

    thanks

  • @riddickstark9628
    @riddickstark9628 8 місяців тому +1

    ahh, made a eslintrc.js file but now everytime I save a .js file it states: Error detected while processing BufWritePost Autocommands for "*":
    Error running eslint: ENOENT: no such file or directory.
    I think if I install globally and set the path, it would be easier than creating a file for each project.

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

      Getting this error as well... did you find a fix?

  • @Abbru
    @Abbru 7 місяців тому

    Im waiting for php version of this video series

  • @mzyu
    @mzyu 9 місяців тому

    Lets goo

  • @hitarthpatel
    @hitarthpatel 9 місяців тому

    dream thanks bro
    🤍

  • @sudiptakarmakar6994
    @sudiptakarmakar6994 9 місяців тому

    please create a video for automatic code run like vscode

  • @siduck_og
    @siduck_og 9 місяців тому +76

    TSInstall typescript javascript

    • @dreamsofcode
      @dreamsofcode  9 місяців тому +18

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

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

  • @RatchetXJ0461
    @RatchetXJ0461 9 місяців тому

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

  • @lokeswaranaruljothy8100
    @lokeswaranaruljothy8100 8 місяців тому

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

    • @dreamsofcode
      @dreamsofcode  8 місяців тому +1

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

  • @khemchand6431
    @khemchand6431 6 місяців тому

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

    • @dreamsofcode
      @dreamsofcode  6 місяців тому

      Did you try restarting Neovim?

    • @khemchand6431
      @khemchand6431 6 місяців тому

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

  • @CrazyLuke11
    @CrazyLuke11 6 місяців тому

    Are you using arch btw?

  • @CaptainDouchie
    @CaptainDouchie 9 місяців тому +1

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

  • @vanvothe4817
    @vanvothe4817 8 місяців тому

    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.

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

    Multiple people including myself cannot get the debugger to work.

  • @sayanta01
    @sayanta01 9 місяців тому +1

    can you make one for java please

  • @tjdgmlchl6305
    @tjdgmlchl6305 6 місяців тому

    I’m interested in biome for neovim!

  • @CC-1.
    @CC-1. 9 місяців тому +1

    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

  • @venkatrushivanga1025
    @venkatrushivanga1025 9 місяців тому

    waiting for c# dotnet setup video

  • @BillyMosis
    @BillyMosis 9 місяців тому

    I'm using kickstart nvim and nvim 0.10x I think organize import is out of the box in 0.10x version.