The perfect Neovim setup for Next.js (it's back)
Вставка
- Опубліковано 10 чер 2024
- To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DreamsofCode/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
⚠️ 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
Neovim is my favorite text editor, but out of the box, it can be a little mid. With this configuration, you can turn it into an amazing experience for working with Next.js.
In this video, we're going to set up our neovim configuration to support some of the best features for creating web apps with Next.js. We're also going to introduced none-ls as a drop in replacement for null-ls.
Final Configuration: github.com/dreamsofcode-io/nv...
Video Links:-
Install Command - git clone -b v2.0 github.com/NvChad/NvChad ~/.config/nvim --depth 1
NVChad - nvchad.com
None ls - github.com/nvimtools/none-ls....
Become a better developer in 4 minutes: bit.ly/45C7a29 👈
Join this channel to get access to perks:
/ @dreamsofcode
Join Discord: / discord
Join Twitter: / dreamsofcode_io
00:00 - Intro
00:18 - Setup
02:26 - JavaScript & TypeScript
06:29 - TailwindCSS
07:27 - Eslint
08:38 - Sponsor
10:02 - Autoformatting
12:38 - Tag autocloser & Treesitter - Наука та технологія
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DreamsofCode/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
how can i set prettierd to 4 space indenting
@@sarthaksharma9656 you can set a .pretterierrc file in your project directory to configure the formatting preferences! There's some details in the prettier docs. Hope that helps
@@dreamsofcode isn't there a way to do this globally on all the projects and files
A few things for tailwindcss:
1. Rustywind. It is a formatter for tailwind classes, so even your tailwind classes get formatted nicely
2. tailwindcss-cmp-colorizer
It's great tool where you have the colorizer stuff for all the tailwind classes you use so you always know what color you just chose
this :)
I just wrote a plugin which runs Rustywind cli commands from within neovim, and it also runs --write (sort tailwind classes) on save of jsx, tsx ,etc. filetypes. It is working now, however, this is the first neovim plugin I have written while still being new to neovim at that. I will post the repo when I get a few kinks worked out.
how can I initialize tailwind-cmp-colorizer with cmp after installing the plugin?
@@LexicalNoScope do you have it?
@@LexicalNoScope Is it ready now?
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
This should be in the description or a pinned comment. I have been going nuts for 2h straight for apparently no reason... Thanks for the update though!
@@TheHegiApologies! I can't pin a comment on this video but I missed the description on this video! Should be sorted now.
No big deal. Pretty amazing content though!
Might I recommend a video about dotfiles and how you organize your configuration for everything? (I am using git with a bunch of submodules where applicable. Like nvchad or nvm. Assuming you are doing something similar) You were able to show quite a few tips so far about tmux and vim. This could tie them together, I think. :)
Ermegerd - please make an updated version ❤
As suggested in the video, I'd love to have a web development setup video!!!! Great content btw!!!!
at the end of the video, opts can also be a table and it'd merge with the main table.
opts = {
ensure_installed = { "lua", "javascript", "tsx" },
}
hey any idea why the icons are not visible on mine
you need nerd fonts @@abhijeetpundkar4348
@@abhijeetpundkar4348 nerdfonts must be enabled in your terminal
I have zero intention of using Next.js, but I love watching these videos. They're so well made
Wow, me too!!!
Great video! I was waiting for a configuration designed to be used with NextJS. Thanks a lot!
You're very welcome!
I starting searching for a setup 2 days ago, thank you for making this video dreams!
Im kinda new to the whole Vim/Nvim world so all of these videos work wonders to make it more manageable for all of us. Thanks!
It’s important to note that this will work really well with a large number of JS/TS projects/frameworks, not just with Next! Great video, as always
+1 to web dev setup thanks again!
i wasn't sure which editor will i choose emacs or neovim but because of your content i decided to go Neovim, Thanks :)
Thank you for the work that you do
Using NvChad as a base is such a nice introduction to NeoVim!
Some tips:
- you don't need to import the default NvChad config of TS. Just set the "opt" table and NvChad will override where necessary
- you can just set `config = true` if you do want to leave the setup as is. Otherwise, you can again just pass the config through the "opts" table. I use the callback only for splitting the plugin's configuration into its standalone file and importing it
- lazy load, lazy load, lazy load! (see keys, cmd, event)
These are some great tips! Thanks for sharing them.
OMG it's scary!! Why do you always know what I'm working on?? Man, love your channel
Sounds like you're working on the same thing I am as well 😅.
Thank you!
thank you for introducing me to NvChad!
It's a really great base config!
This came in clutch as I just made the switch from IntelliJ to Neovim
Great video! yea a dedicated video explaining neovim setup for web dev would be awsome! And is there a possibility of using Jupiter notebook in neovim too?I'm starting to learn ml😅
Since web development is growing fast.. I need a video on it indeed..And I am looking forward for sveltekit using with nvim
Loved your video.
is there a way to set a keybinding for turning on/off autosave?
Thanks a lot brother!
Awesome video. Thanks for the setup. Could you please show us how to setup tailwind-colorizer-cmp as well?
Absolutely, I'll add a ticket for a tailwindcss dedicated video with some other plugins.
@@dreamsofcode Thanks a lot. By the way, is there way to make diagnostic messages more usable. They are always off the screen and I cannot read them.
Yes I absolutely would. Please and thank you.
more webdev setups please! :D
Thanks for the config, but I'm having problem now the previous video of (nvim rust) the autocomplete is no longer working, please can you provide a full config repo that includes JS / TS + Rust + Go that works all together ? Thank you
P.S ( I think I've found an issue with hrsh7th/nvim-cmp plugin, after disabling it the autocomplete is working now)
I'm a little late to the party but I've been binging your videos all night to get a nice NvChad setup for my usual languages/stacks, Next included. It's going great! The only language I had trouble with was Elixir, but I got that up and running eventually. The only thing left is finding a plugin for Embedded Elixir that auto closes tags for eex/heex files.
Do you have any plans to make more elixir content? Would love to see how you would setup NvChad for Pheonix.
Thank You Men, You Cool, I got convinced to just subscribe to the channel, make one for java dev env.
Do you plan on doing a nvchzd setup for note taking with maybe a latex integration ?
Thank you!
yeah, continue with the webdev setups
Can components or libraries from different folders within the project be automatically imported?
I did a lot of this in NvChad, but I hit a roadblock trying to set up DAP for debugging my node applications. This caused me to switch from NvChad to LazyVim, which has some convenient "extras" defined that make setting it up easier. I would still be interested in seeing how this is done in an NvChad setup.
@dreamsofcode has a node setup video as well. You might find it helpful.
This video made me use nvim finally, after trying so hard. Don't know why formatting says no lsp is found.
would you be able to setup a Clojure environment with repl functionality?!
yes. do a dedicated web development setup. 🙏🙏🙏🙏🙏🙏
I have tried the same config provided but when ever I open any project with nvim the first file I open is not highlighted , it is just shown as plain text, the next files I open are formatted properly. Does anyone know how can I fix this issue
thanks a lot for the vid, the only thing I can't get to work is the formatting
will there be a simillar tutorial for vue/nuxt?
I had to install vscode-langservers-extracted, after add cssls, is it right? how to install it as code, instead of using npm?
want to see perfect nvim setup for vue and Nuxt!!
I love nvim more on more everyday beacuse of this channel, videos are fun and exclusive
Please do one for the DADBOD pack in NvChad, pretty please 🥺
What desktop manager is that?
Because it looks like KDE Plasma but I'm not sure
i just moved to vscode with neovim extension, it's been great, the fatigue of maintaining plugins is real
Does anyone have working config for Astro? Unfortunately can't make it format on save
Can you also have colors in tailwindcss as well?
that's amazing, could you please do Neovim for Java?
how can I initialize a plugin with alrady built-in cmp of the NvChad?
You should be able to add it to the plugins table and just import the existing config. Similar to how I do it with the lspconfig!
Tailwindcss LSP never work even when it is loaded IDK why. I have tried installing using lazy by editing the plugins config and using Mason.
when I do LspLog it is never attached.
ask in nvchad server
And how about the debugger? I've been trying to configure the js-debug-adapter, nvim-dap to work with the launch.json provided in the Next.js documentation. Unfortunately, nothing seems to work. It connects to the debugger, but it doesn't stop at a specific breakpoint or displays a message that the adapter is slow. I have no idea how to configure it to make it work. Similarly, in other JS frameworks.
I have a debugger in my node.js configuration which may work for Next.js. Although I expect it will only work for server side.
It might run into the same issues you're experiencing, however. If you have discord, it'd be great to connect there and find out more!
Hello, man, awesome videos!
Please record same tutorial for Vue 3 project. Thanks.
Anyone able to get nextJS working with dap in nvim for server-side debugging? I'm able to attach but breakpoints aren't pausing execution.
Please give as a powerfull setup for web development with the new nvchad file structure . Thank you
Hey, another great video, love this tutorial series of neovim language setups. Could you make also one tutorial for remote machine execution like VSCode has? Keep it up!
I shall add it to the backlog! Thank you for the feedback
i have zero intention of using next (instead i prefer to use vite with react and try to do some basic projects) but i hope this setup also works (if not i can still use vscode but want to try to do the nvchad way)
Can't get the typescript language server to install :(
I feel like the config that I'm writing just isn't being recognized whatsoever.
The directory structure is different to the one you got when you installed and it's driving me crazy.
I really want to learn how to develop on linux but fuck me everything is so overly complicated.
@dreamsofcode Wait....wait....I am so lost! At the 13:36 mark Why did we delete everything we just inputted in our plugs.lua file?
NEVERMIND! I am dumb; I did not notice the numbered lines.
Will you do one for the ultimate setup for Vue.js?
Which laptop is best for software engineering if you’re not using MacOS? I’m getting an itch to use Linux again.
if EU, check Tuxedo Computers, if US, System76
Hi Elliott,
I really like your Videos and the way you teach. I've been learning Vim and lua since a while now. Your videos helped me get a better experience or in other words made it less painful. Thank you very much. I am doing Angular right and would really love, if could you please make a video about its configuration. I know, not so many likes Angular but it would be great, if you can make a video. I spent whole evening figuring out, how to get the server up and running, but failed quite a few times now. Not too many resources out there to get some help :(
Sorry but, is there an option to save a file without formatting?
can you please make a course on neovim it will be really helpful
Tried watching Tj Devries vids to get going but I think he just doesn't understand the needs of a learner. really appreciate your style and how much work you put into these vids 🙏
I appreciate that! I'm going to be doing a more focused neovim video soon looking at each line of config, specifically aimed at beginners! I've definitely had my own questions about Neovim when configuring it and sometimes it's a little too fast.
I could have sworn the Mason app showed the languange server names.. the "tsserver" rather than the whole typescript-language-server name. Now its not doing that.. I wonder what changed.
I cannot setup debugger for nextjs fullstack app with neovim
damn this is very interesting
Yes we need dedicated web dev setup with react nextjs and all the ergonomics that come with vscode...
No way I'm Gonna Miss the Comment Section.... Recently I was trying to making nvim my primary editor after a lot of years of VSCode, but as now i can pretty much do 95% work with my KB only, I was sure to jump into Nvim, but its not that easy to actually setup and get the feel of that proper environment out of it at first, configuration was a must, then i came along with your channel and following you i have set up the next js dev env... thanks a lot ,,, and Please make a video for wev development configuration........
Are they getting rid of the comment section?? 😭
@@dreamsofcode My Fault ,,,, Should have said "No way I'm Gonna Miss to comment to you for asking a config of Nvim for Full-Setup Web Development " ✨✨As you said to comment if anyone want that, 😇😇😇.......Sorry English is Not my Native,🤒🤒 ...........But again Thanks to you .......That was some Easy Yet Powerful Config🚀🚀🚀
Now how to resolve git conflicts in neovim? 🙏we need a video! :)
please do a debug set-up video
"Spawning language server with cmd: `vscode-eslint-language-server` failed. The language server is either not installed, missing from PATH, or not executable."
@cassiorsfreitas Same issue here but with vscode-css-language-server. Did you ever figure out how to fix it?
Mahn, please do the dadbod plugins for NvChad
i don't understand why you import and call the file nulls_ls while you are using none-ls?
None-ls is a drop in replacement for null-ls, so the file imports stay the same.
If you check out their documentation, it should explain more!
please make one for c#
Can you do a config to work with sveltekit?
Absolutely! I shall add it to be backlog.
@@dreamsofcode Thank you
How can I program when my eyes hurts? I try to program for 30 minutes but I can’t, it’s awful and the doctor’s not offering any solution.
bro get help dont try programming rn
id say go to another doctor
stop looking at screens, go to another doctor
Mine too, but i enjoy it. When i code (ofc, look at screen), my eyes hurt. When i dont for some hours, my head aches
visit some different doctor fam... also try looking to some distance after like 20 mins... There are some rule or something
@@jitx2797 ah yes, theres also a tool (its in linux, not sure if its in windows) that auto locks screen for 20 seconds every 20 mins and tells you to look far, close eyes and so on
Make one for angular please
Which arch distro are you using?
Arch or arch based since he's using Pacman
@@youdontknowme2508 sorry I was trying to ask the exact Arch distro.
its just bare bones arch linux it self @@tabotkevin8116
Probably vanilla arch linux
nvim setup for rails development?
hey @dreamsofcode your video are awesome and very easy to understand, but could you make a tutorial on "setup neovim for arduino". please it will be really helpful.
hey, total noob here, i really like ur terminal style. can u share ur config file give some some more details like themes fonts and other stuff. and ur videos are one of the bests!
cool
hey buddy can you please remake this with lazyvim and one small request please do make one for java please.
hey can you make for c
Man, i also use arch *btw*!
sir create on flutter development setup for neovim please please please
Added to the backlog!
try pragmasevka nerd font
what desktop environment do you use?
He's using gnome for recording
And what software to edit the video? I am stunned by how well crafted these videos are. I’d love to be able to create videos half as good as these for work but have no idea as where to start
no custom file found in new chad git repo
Make sure to use the v2.0 branch!
The description should have it.
@@dreamsofcode not working I tried which u mention in description
@@dreamsofcode can u please give config file in git
Lol
nvchad updated to 2.5 and it kinda sucks :/
Yeah, :(. You can still use the 2.0 branch for the mean time, however.
I'm going to be redoing these videos again over the next few months!
The perfect Neovim setup for Solidity ??
React 😊
The problem with vim setups is that every single person has it's own way of writing the configuration which is downright confusing. Lol
It's true! That's why I tend to use NVChad which is rather consistent. You can check the docs out and see it's similar to how I do it.
@@dreamsofcode will check
😂