Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ahmad9059/nvim

Nvim Config for Web Development (specially for MERN/Next.js)
https://github.com/ahmad9059/nvim

config dotfiles lazyvim nvchad nvim nvim-configs web

Last synced: about 2 months ago
JSON representation

Nvim Config for Web Development (specially for MERN/Next.js)

Awesome Lists containing this project

README 

          
# ๐Ÿ–ฅ๏ธ Neovim Config (NvChad-Based)



Welcome to my personal Neovim configuration, built on top of [NvChad](https://github.com/NvChad/NvChad) for a modern, fast, and minimal Neovim setup tailored for **web development**, **JavaScript/TypeScript**, and general-purpose programming.



> โšก Designed for speed, productivity, and ease of maintenance with VSCode compatibility.



## ๐Ÿ“ท Screenshots



![preview-2-Image](/preview/preview-2.png)

![preview-Image](/preview/preview.png)



---



## โœจ Key Features



- ๐Ÿš€ **Lazy-loaded plugin architecture** via NvChad v2.5

- ๐ŸŽจ **Tokyo Night theme** with transparency and custom dashboard

- ๐Ÿง  **Intelligent code formatting** with Prettier, Stylua, and format-on-save

- ๐Ÿ”ง **Comprehensive LSP support** for modern web development

- ๐Ÿงต **Template string auto-conversion** (VS Code-like behavior)

- ๐Ÿท๏ธ **Auto HTML/JSX tag closing and renaming**

- ๐Ÿ” **Enhanced Telescope UI** with dropdown selections

- ๐Ÿง‘โ€๐Ÿ”ง **LazyGit integration** for seamless Git workflow

- ๐Ÿ–ฅ๏ธ **Tmux navigation** support for terminal multiplexing

- ๐Ÿ“ **Markdown rendering** with live preview

- ๐Ÿ‘จโ€๐Ÿ’ป **VSCode-Neovim compatibility** with dedicated config

- โŒจ๏ธ **Custom key mappings** for productivity

- ๏ฟฝ๏ฟฝ๏ฟฝ **BlVink completion engine** for fast autocompletion

- ๐ŸŒฒ **Enhanced Treesitter** with auto-install for syntax highlighting



---



## ๐Ÿ› ๏ธ Plugin Ecosystem



| Plugin                                      | Purpose                                        | Status           |

| ------------------------------------------- | ---------------------------------------------- | ---------------- |

| **Core & UI**                               |

| `NvChad/NvChad`                             | Base configuration framework                   | โœ… Active        |

| `folke/which-key.nvim`                      | Key binding helper with helix preset           | โœ… Active        |

| **LSP & Completion**                        |

| `neovim/nvim-lspconfig`                     | Language Server Protocol configuration         | โœ… Active        |

| `nvchad.blink.lazyspec`                     | Fast completion engine                         | โœ… Active        |

| **Formatting & Linting**                    |

| `stevearc/conform.nvim`                     | Code formatting with Prettier, Stylua          | โœ… Active        |

| **Git Integration**                         |

| `kdheepak/lazygit.nvim`                     | LazyGit terminal UI integration                | โœ… Active        |

| **Navigation & Movement**                   |

| `christoomey/vim-tmux-navigator`            | Seamless Tmux pane navigation                  | โœ… Active        |

| `nvim-telescope/telescope-ui-select.nvim`   | Telescope dropdown for vim.ui.select           | โœ… Active        |

| **Language-Specific**                       |

| `axelvc/template-string.nvim`               | Auto-convert quotes to template strings        | โœ… Active        |

| `windwp/nvim-ts-autotag`                    | Auto-close and rename HTML/JSX tags            | โœ… Active        |

| `MeanderingProgrammer/render-markdown.nvim` | Live markdown rendering                        | โœ… Active        |

| **Syntax & Parsing**                        |

| `nvim-treesitter/nvim-treesitter`           | Advanced syntax highlighting with auto-install | โœ… Active        |

| **Optional/Commented**                      |

| `github/copilot.vim`                        | AI code suggestions                            | ๐Ÿ”„ Commented out |

| `folke/noice.nvim`                          | Enhanced command line and notification UI      | ๐Ÿ”„ Commented out |

| `rcarriga/nvim-notify`                      | Beautiful notification system                  | ๐Ÿ”„ Commented out |



---



## ๐ŸŒ Language Support



### Full LSP Support



- **JavaScript/TypeScript** - Complete IntelliSense, auto-imports, refactoring (ts_ls)

- **React (JSX/TSX)** - Component intelligence, prop validation

- **HTML/CSS** - Tag completion, CSS properties, validation

- **JSON** - Schema validation, formatting

- **Lua** - Neovim API awareness, diagnostics with vim globals

- **Markdown** - Live rendering with Marksman LSP

- **TailwindCSS** - Class completion and validation

- **Bash/Shell** - Script validation and completion

- **Emmet** - Abbreviation expansion for web technologies



### Enhanced Features



- **TailwindCSS** - Class completion and validation

- **Emmet** - Fast HTML/CSS abbreviation expansion for HTML, CSS, JS/TS React

- **Template Strings** - Auto-conversion for JS/TS/React/Vue/Svelte/Python/C#

- **Auto-tagging** - Smart HTML/JSX tag management with Treesitter

- **Bash/Shell** - LSP support for shell scripting

- **Markdown** - Enhanced support with Marksman LSP and live rendering



### Formatting Support



- **Prettier/Prettierd** - JavaScript, TypeScript, HTML, CSS, JSON, Markdown, YAML

- **Stylua** - Lua code formatting

- **Shfmt** - Shell script formatting

- **Format on Save** - Automatic formatting with 500ms timeout and LSP fallback



---



## โš™๏ธ Custom Configuration Highlights



### Theme & UI



- **Tokyo Night** theme with transparency enabled

- **Custom dashboard** with ASCII art header

- **Minimal statusline** with rounded separators

- **Relative line numbers** for better navigation



### Key Mappings



- `;` โ†’ `:` (Quick command mode access)

- `jk` โ†’ `` (Fast insert mode exit)

- `` โ†’ Save file (works in all modes)

- `` โ†’ Select all text

- `` โ†’ Navigate in insert mode

- `lg` โ†’ Open LazyGit

- `` โ†’ Toggle floating terminal with custom styling

- `` โ†’ Tmux navigation

- `` โ†’ Go to previous Tmux pane

- `g1-g9` โ†’ Switch between buffers (g0 for last buffer)

- Visual mode selections: `i{`, `a{`, etc. for brackets/quotes



### Advanced Features



- **VSCode compatibility** - Dedicated minimal config for VSCode-Neovim extension

- **Floating terminal** - Customized with rounded borders (80% width/height)

- **Smart diagnostics** - Virtual text enabled globally

- **Auto-formatting** - Format on save with 500ms timeout and LSP fallback

- **Template strings** - Auto-convert quotes to backticks in JS/TS/React

- **Blink completion** - Fast completion engine integrated with NvChad

- **Relative line numbers** - Enhanced navigation experience

- **Buffer switching** - Quick buffer navigation with g1-g9 keys



---



## ๐Ÿงฐ Prerequisites



### Required



- [Neovim v0.9+](https://neovim.io/) (v0.10+ recommended)

- [Git](https://git-scm.com/)

- [Node.js](https://nodejs.org/) and `npm` (for LSP servers and formatters)



### Optional but Recommended



- [LazyGit](https://github.com/jesseduffield/lazygit) - Git UI integration

- [Tmux](https://github.com/tmux/tmux) - Terminal multiplexer for navigation

- [Nerd Font](https://www.nerdfonts.com/) - For proper icon display



### Language Servers & Formatters



The following LSP servers are configured and can be installed via Mason:



```bash

# LSP Servers (install via :Mason or manually)

npm install -g typescript-language-server    # JavaScript/TypeScript

npm install -g vscode-langservers-extracted  # HTML, CSS, JSON

npm install -g @tailwindcss/language-server  # TailwindCSS

npm install -g emmet-ls                       # Emmet abbreviations

npm install -g bash-language-server          # Bash/Shell

npm install -g marksman                       # Markdown



# Formatters (for conform.nvim)

npm install -g prettier                       # JS/TS/HTML/CSS/JSON/MD/YAML

npm install -g @fsouza/prettierd             # Faster Prettier daemon

cargo install stylua                          # Lua formatting

npm install -g shfmt                          # Shell script formatting

```



---



## ๐Ÿš€ Installation



### Method 1: Fresh NvChad Installation



```bash

# Backup existing config (if any)

mv ~/.config/nvim ~/.config/nvim.backup



# Clone this config

git clone https://github.com/ahmad9059/nvim ~/.config/nvim



# Start Neovim (plugins will auto-install)

nvim



# Install LSP servers and formatters

:Mason

# Then install the servers you need, or run:

:MasonInstallAll



# Sync plugins if needed

:Lazy sync

```



### Method 2: VSCode-Neovim Users



This config includes dedicated VSCode compatibility. Simply install the [VSCode-Neovim extension](https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim) and point it to this config.



---



## ๐ŸŽฏ Usage Guide



### First Launch



1. Open Neovim - plugins will automatically install

2. Wait for Lazy.nvim to finish downloading plugins

3. Restart Neovim for full functionality

4. Run `:checkhealth` to verify everything is working



### Key Workflows



#### Git Integration



- `lg` - Open LazyGit for visual Git operations

- Use LazyGit's intuitive interface for staging, committing, and pushing



#### Code Formatting



- **Automatic** - Format on save (500ms timeout)

- **Manual** - Use LSP formatting commands

- **Supported** - JS, TS, HTML, CSS, JSON, Markdown, Lua



#### Terminal Usage



- `` - Toggle floating terminal with custom styling

- Terminal opens with 80% width, 70% height, rounded borders

- Positioned at 10% from top, 8% from left for optimal viewing



#### Tmux Integration



- `` - Navigate between Neovim and Tmux panes seamlessly

- `` - Go to previous Tmux pane



---



## ๐Ÿ”ง Troubleshooting



### Common Issues



**LSP not working?**



```bash

# Check if language servers are installed

:LspInfo



# Install missing servers via Mason

:Mason

```



**Formatting not working?**



```bash

# Check formatter availability

:ConformInfo



# Install formatters manually

npm install -g prettier @fsouza/prettierd

cargo install stylua

npm install -g shfmt

```



**Plugins not loading?**



```bash

# Check plugin status

:Lazy



# Force plugin sync

:Lazy sync

```



**Tmux navigation not working?**



- Ensure Tmux is installed and running

- Check if `christoomey/vim-tmux-navigator` plugin is loaded



---



## ๐Ÿ“ Project Structure



```

~/.config/nvim/

โ”œโ”€โ”€ init.lua                 # Main entry point with VSCode compatibility

โ”œโ”€โ”€ lazy-lock.json          # Plugin version lock file

โ”œโ”€โ”€ .stylua.toml            # Stylua formatter configuration

โ”œโ”€โ”€ lua/

โ”‚   โ”œโ”€โ”€ autocmds.lua        # Auto commands

โ”‚   โ”œโ”€โ”€ chadrc.lua          # NvChad theme and UI configuration

โ”‚   โ”œโ”€โ”€ mappings.lua        # Custom key mappings

โ”‚   โ”œโ”€โ”€ options.lua         # Neovim options (relative numbers, etc.)

โ”‚   โ”œโ”€โ”€ configs/

โ”‚   โ”‚   โ”œโ”€โ”€ conform.lua     # Formatter configuration (Prettier, Stylua, etc.)

โ”‚   โ”‚   โ”œโ”€โ”€ lazy.lua        # Lazy.nvim setup

โ”‚   โ”‚   โ””โ”€โ”€ lspconfig.lua   # LSP server configurations

โ”‚   โ””โ”€โ”€ plugins/

โ”‚       โ””โ”€โ”€ init.lua        # Plugin specifications

โ””โ”€โ”€ preview/

    โ”œโ”€โ”€ preview.png         # Screenshot 1

    โ””โ”€โ”€ preview-2.png       # Screenshot 2

```



---



## ๐ŸŽจ Customization



### Changing Theme



Edit `lua/chadrc.lua`:



```lua

M.base46 = {

  theme = "tokyonight", -- Current theme (change to your preferred theme)

  transparency = true,  -- Current setting (set to false to disable)

  hl_override = {

    Comment = { italic = true },

    ["@comment"] = { italic = true },

  },

}

```



### Adding New LSP



Edit `lua/configs/lspconfig.lua`:



```lua

-- Example: Python LSP

lspconfig.pyright.setup {

  on_attach = on_attach,

  capabilities = capabilities,

}

```



### Custom Key Mappings



Edit `lua/mappings.lua`:



```lua

-- Example: Add your custom mappings

map("n", "custom", "YourCommand", { desc = "Your description" })



-- Current custom mappings include:

-- Buffer navigation with g + numbers

-- Visual mode selections for brackets/quotes

-- Tmux navigation integration

-- Custom terminal toggle with styling

```



---



## ๐Ÿค Contributing



Feel free to:



- Report bugs or issues

- Suggest new features or improvements

- Submit pull requests

- Share your customizations



### Development Setup



1. Fork the repository

2. Create a feature branch

3. Test your changes thoroughly

4. Submit a pull request with clear description



---



## ๐Ÿ™Œ Credits & Acknowledgments



### Core Dependencies



- [NvChad](https://github.com/NvChad/NvChad) - Amazing Neovim configuration framework

- [Lazy.nvim](https://github.com/folke/lazy.nvim) - Modern plugin manager

- [Telescope](https://github.com/nvim-telescope/telescope.nvim) - Fuzzy finder and UI



### Key Plugins



- [conform.nvim](https://github.com/stevearc/conform.nvim) - Formatter integration

- [nvim-lspconfig](https://github.com/neovim/nvim-lspconfig) - LSP configuration

- [LazyGit](https://github.com/jesseduffield/lazygit) - Git terminal UI

- [template-string.nvim](https://github.com/axelvc/template-string.nvim) - Smart template strings

- [noice.nvim](https://github.com/folke/noice.nvim) - Enhanced UI components



### Community



- All the amazing open-source contributors

- NvChad community for the solid foundation

- Neovim core team for the incredible editor



---



## ๐Ÿ‘จโ€๐Ÿ’ป Author



**Ahmad Hassan**  

Full Stack Developer & Neovim Enthusiast



[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/ahmad9059/)

[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/ahmad9059)



---



## ๐Ÿ“„ License



This project is open source and available under the [MIT License](LICENSE).



```

MIT License - Feel free to use, modify, and distribute

```



---



## โญ Show Your Support



If this configuration helped you, please consider:



- โญ Starring the repository

- ๐Ÿด Forking for your own customizations

- ๐Ÿ“ข Sharing with fellow developers

- ๐Ÿ› Reporting issues or suggesting improvements



**Happy coding with Neovim! ๐Ÿš€**