Level Up Your Dev Workflow: Conquer Web Development with a Blazing Fast Neovim Setup (Part 1)

insideee_dev

insideee.dev

Posted on March 16, 2024

Level Up Your Dev Workflow: Conquer Web Development with a Blazing Fast Neovim Setup (Part 1)

Table Of Contents:

  1. Building the Foundation with LazyVim
  2. Why LazyVim?
  3. Getting Started with LazyVim

Hey developers! Tired of clunky text editors slowing down your coding flow? Today, we're embarking on a journey to craft your dream development environment – a modern Neovim setup turbocharged with LazyVim!

This three-part series will be your one-stop shop for mastering Neovim with LazyVim. Buckle up as we transform you from a Neovim novice to a customization ninja:

  • Part 1: Building the Foundation with LazyVim (This Post): We'll lay the groundwork by installing and configuring LazyVim, your springboard to a supercharged coding experience.
  • Part 2: Forging Your Neovim Forge: In the second part, we'll delve into the art of customization! We'll explore themes, keymaps, and essential plugins to mold your Neovim environment into a finely-tuned machine that reflects your unique workflow.
  • Part 3: Unleash the Neovim Beast (Part 3): Get ready to unleash the full potential of your Neovim setup! We'll dive deep into advanced configuration, exploring powerful plugins, customizing the status line for ultimate efficiency, and equipping you with battle-tested tips to optimize your development workflow. This is where you'll truly transform into a Neovim master, coding like a superhero!

Part 1: Building the Foundation with LazyVim

In this first part, we'll establish a rock-solid foundation using LazyVim, a fantastic pre-configured Neovim solution specifically designed for web development. We'll cover everything from installation to launching your first project, ensuring you have a smooth and efficient editing experience ready for further personalization.

Get ready to ditch the frustration and embrace a supercharged development experience! Let's dive in!

You can get my setup on GitHub here:

GitHub logo CaoNgocCuong / dotfiles-nvim-lua

Configuration for nvim with lua

fish screenshot

nvim screenshot

insideee.dev's dotfiles

Warning: Don’t blindly use my settings unless you know what that entails. Use at your own risk!

Contents

  • vim (NeoVim) config
  • tmux config
  • git config
  • karabiner mapping
  • fish config

Karabiner element application

I use Karabiner to customize some keys for my keyboard to make vim easier for me to use.

To install: brew install --cask karabiner-elements

Search in the registry:

karabiner screenshot simple karabiner screenshot complex

Neovim setup

Requirements

  • Neovim >= 0.9.0 (needs to be built with LuaJIT)
  • Git >= 2.19.0 (for partial clones support)
  • LazyVim
  • Nerd Font(v3.0 or greater) (optional, but needed to display some icons)
  • lazygit (optional)
  • C compiler for nvim-treesitter. See here
  • for telescope.nvim (optional)
  • a terminal that support true color and undercurl

Why LazyVim?

There are many great Neovim setups out there, but LazyVim won me over for a few reasons:

  • Easy Updates: Keeping your Neovim setup up-to-date is essential. LazyVim makes this a breeze with a simple command to update plugins. No more hunting down updates and fiddling with configurations!
  • Pre-installed Plugins: LazyVim comes with a bunch of popular plugins already configured, saving you tons of time. It's like having a well-stocked toolbox right out of the box.
  • Flexible Customization: Don't worry, LazyVim isn't a rigid dictatorship. You can easily customize it with your own themes, keymaps, and other preferences. We'll get to that later!

original documentation of the LazyVim

Image source: Lazy documentation

Getting Started with LazyVim

Alright, let's dive into the setup process. Here's what you'll need:

Neovim: Make sure you have Neovim installed on your system. You can check the official website for installation instructions: https://neovim.io/
Git: We'll be using Git to clone the LazyVim starter pack. If you don't have Git, you can download it from https://git-scm.com/downloads

Step 1: Back Up Your Existing Neovim Files (Just in Case)

Before we start fresh, it's always a good idea to back up any existing Neovim configurations you might have. This way, you can easily revert if needed. You can use commands like:



# required
mv ~/.config/nvim{,.bak}

# optional but recommended
mv ~/.local/share/nvim{,.bak}
mv ~/.local/state/nvim{,.bak}
mv ~/.cache/nvim{,.bak}


Enter fullscreen mode Exit fullscreen mode

These commands will move your existing Neovim configuration to a backup folder named nvim.bak.

You get a bare vim.
a bare vim

Step 2: Install Optional Tools (Makes things smoother)

LazyVim works great on its own, but there are a couple of optional tools that can enhance your experience:

ripgrep: A super-fast file searcher. You can install it using your system's package manager (e.g., brew install ripgrep on macOS).
fd: Another blazing-fast file finder. Installation instructions can be found here: https://github.com/sharkdp/fd

Step 3: Clone the LazyVim Starter Pack

Now for the fun part! Open your terminal and navigate to your desired installation directory. We'll use the git clone command to download the LazyVim starter pack:



git clone https://github.com/LazyVim/starter ~/.config/nvim


Enter fullscreen mode Exit fullscreen mode

This command clones the LazyVim starter pack into your Neovim configuration directory (~/.config/nvim).

Step 4: Remove the .git Folder (Keeps things clean)

The LazyVim starter pack comes with a .git folder for version control purposes. Since we won't be actively contributing to the LazyVim codebase, we can remove this folder for a cleaner setup:



rm -rf ~/.config/nvim/.git


Enter fullscreen mode Exit fullscreen mode

Step 5: Launch Neovim and Witness the Magic!

Now you're ready to experience the power of LazyVim! Open your terminal and launch Neovim using the command:



nvim


Enter fullscreen mode Exit fullscreen mode

Start dashboard with nvim
Neovim will launch, and you'll see a message indicating that plugins are being installed automatically. This might take a few moments depending on your internet speed.

Explore Your New Playground!

In the next article, we'll dive into personalizing your LazyVim setup with custom themes, keymaps, and more. Stay tuned!

🚀 Follow me on X(Twitter)

🚀 Connect with me on Linkedin

🚀 Checkout my GitHub

Thank you for your reading!
See you guys.

💖 💪 🙅 🚩
insideee_dev
insideee.dev

Posted on March 16, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related