DEV Community

Cover image for My Modern (but Retro) Web Dev Setup with Vim on Windows
Bruno Ciccarino λ
Bruno Ciccarino λ

Posted on

My Modern (but Retro) Web Dev Setup with Vim on Windows

Hey there! Let me tell you about my journey into the world of minimalist (yet powerful) web development with Vim on Windows. If you think this is just another boring setup guide, think again! This is about nostalgia meeting practicality, with a modern twist.

My Dotfiles: The Secret Sauce

Before we dive into the specifics, let me point you to the heart of my setup: my dotfiles. These guys have configs for everything—Windows Terminal, .bashrc, Neovim, Emacs, WezTerm, you name it. It’s basically my entire development environment in one neat repository. If you’re curious about how I tie all these tools together, that’s the place to check out. Feel free to fork or steal ideas for your own setup!

Why Vim?

First off, why am I even using Vim in 2025 when there are IDEs like VSCode that come with all the bells and whistles? Simple: speed and focus. Vim is like that old reliable friend who’s always there for you, doesn’t crash, and doesn’t hog your RAM. Sure, it takes some time to get used to, but once you do, there’s no going back.

Image description

The Terminal: Enter WezTerm

Before we dive into my Vim config, let me introduce you to my terminal emulator of choice: WezTerm. This is hands-down the best terminal I’ve used on Windows. It’s fast, super customizable, and feels snappy as hell. No disrespect to Windows Terminal or other options, but WezTerm just clicked for me. It’s perfect for running Vim, Git, Node.js, and whatever else I throw at it.

Image description

The Vim Setup

Okay, now for the main event: my Vim config. I’ve kept it clean and focused on what I actually need for web development—none of those bloated plugin setups or endless configs. It’s all about keeping things efficient while still being powerful.

Here’s the core of my .vimrc:

set runtimepath+=C:\Users\Usuario\.vim\bundle\Vundle.vim
set runtimepath+=%USERPROFILE%\.vim\bundle\YouCompleteMe

syntax on
set nocompatible
set number
set expandtab
set shiftwidth=4
set tabstop=4
set autoindent
set smartindent
set mouse=a
set cursorline
set clipboard=unnamedplus
set guicursor=n-v-c:block,i:block,r-cr:hor20,o:hor50
set history=500

call vundle#begin('C:\Users\Usuario\.vim\bundle\')
Plugin 'VundleVim/Vundle.vim'
Plugin 'neko-night/Vim'
Plugin 'tpope/vim-commentary'
Plugin 'preservim/nerdtree'
Plugin 'jiangmiao/auto-pairs'
Plugin 'pangloss/vim-javascript'
Plugin 'mxw/vim-jsx'
Plugin 'dense-analysis/ale'
Plugin 'prettier/vim-prettier', {'do': 'npm install'}
call vundle#end()

let mapleader = "\\"

set backspace=indent,eol,start
set termguicolors

inoremap jk <ESC>
nnoremap <C-c> :%y+<CR>
nnoremap <C-s> :w<CR>
nnoremap <Leader>t :terminal<CR>
nnoremap <C-v> "+p
nnoremap <C-z> u
vnoremap <C-v> "+p
nnoremap <C-f> :NERDTreeFind<CR>
nnoremap <leader>n :NERDTreeFocus<CR>
nnoremap <C-n> :NERDTree<CR>
nnoremap <C-t> :NERDTreeToggle<CR>
nnoremap <Leader>p :Prettier<CR>
inoremap <C-v> <Esc>"+pa
inoremap <A-Up> <Esc>:m-2<CR>a
inoremap <A-Down> <Esc>:m+<CR>a
inoremap <C-Up> <Esc>v<Up>
inoremap <C-Down> <Esc>v<Down>

colorscheme nekonight-night

let g:ycm_global_ycm_extra_conf = '%USERPROFILE%\.vim\bundle\YouCompleteMe\third_party\ycmd\examples\ycm_extra_conf.py'
set completeopt=menuone,noinsert,noselect

let g:ale_linters = {
\   'javascript': ['eslint'],
\   'javascriptreact': ['eslint'],
\}
let g:ale_fixers = {
\   'javascript': ['prettier'],
\   'javascriptreact': ['prettier'],
\}
let g:ale_fix_on_save = 1

let g:prettier#exec_cmd_async = 1
let g:prettier#autoformat = 1
let g:prettier#autoformat_require_pragma = 0
Enter fullscreen mode Exit fullscreen mode

Highlights of the Config

  • Vundle: Keeping plugins minimal and organized. Vundle just works.
  • NERDTree: Because sometimes you do need a file explorer.
  • ALE: My linter and fixer of choice. ESLint + Prettier integration for JavaScript.
  • YouCompleteMe: Powerful autocomplete for coding efficiency.
  • Prettier: Auto-formatting on save keeps my code looking sharp.

Why No Live Server?

That’s right—no live server here. I’m rocking it old-school. I’ll manually refresh the browser, thank you very much. There’s something oddly satisfying about coding this way—it forces me to focus on writing good code instead of relying on instant feedback.

Key Mappings to Love

One of my favorite things about this setup is the key mappings:

  • jk to escape insert mode: No more reaching for Esc!
  • <C-s> to save: Muscle memory from modern editors.
  • <C-c> to copy the entire file: Instant sharing.
  • <Leader>t for terminal: Integrated terminal goodness.
  • <C-n> and <C-t> for NERDTree: Toggling the file explorer couldn’t be easier.

The Retro Experience

Developing in Vim on Windows feels nostalgic yet modern. Sure, I don’t have all the fancy tools like live servers or extensions popping up every other second, but that’s the point. It’s a distraction-free environment where I can actually focus on coding.

Closing Thoughts

If you’re looking for a lightweight, snappy development setup on Windows, give this a shot. Pairing Vim with WezTerm gives you a robust environment that’s both efficient and fun to use. It’s a bit of a throwback, sure, but it’s got all the modern tools you need to get the job done. Happy coding!

Top comments (1)

Collapse
 
gokayburuc profile image
gokayburuc.dev

Just an advice, next time try comments for newbies :

" Add Vundle and YouCompleteMe to the runtime path for plugin management
set runtimepath+=C:\Users\Usuario\.vim\bundle\Vundle.vim
set runtimepath+=%USERPROFILE%\.vim\bundle\YouCompleteMe

" Enable syntax highlighting for better code readability
syntax on

" Disable vi compatibility mode to use Vim-specific features
set nocompatible

" Display line numbers for easier navigation
set number

" Convert tabs to spaces for consistent indentation
set expandtab
" Set width for auto-indentation
set shiftwidth=4
" Set display width for tabs
set tabstop=4

" Enable automatic indentation
set autoindent
" Enable smart indentation based on file type
set smartindent

" Enable mouse support in all modes
set mouse=a

" Highlight the cursor line horizontally
set cursorline

" Use Windows clipboard (unnamedplus register) for copy/paste operations
set clipboard=unnamedplus

" Configure cursor shape in different modes
set guicursor=n-v-c:block,i:block,r-cr:hor20,o:hor50

" Increase command history size to 500 entries
set history=500

" Initialize Vundle plugin manager
call vundle#begin('C:\Users\Usuario\.vim\bundle\')

" Define plugins to install and manage
Plugin 'VundleVim/Vundle.vim'           " Plugin manager itself
Plugin 'neko-night/Vim'                 " Theme plugin
Plugin 'tpope/vim-commentary'           " Easy comment toggling
Plugin 'preservim/nerdtree'             " File explorer
Plugin 'jiangmiao/auto-pairs'           " Automatic bracket pairing
Plugin 'pangloss/vim-javascript'        " JavaScript syntax support
Plugin 'mxw/vim-jsx'                    " JSX syntax support
Plugin 'dense-analysis/ale'             " Async linting engine
Plugin 'prettier/vim-prettier', {'do': 'npm install'}  " Code formatter

" End Vundle initialization
call vundle#end()

" Set backslash (\) as the leader key for custom commands
let mapleader = "\\"

" Configure backspace behavior
set backspace=indent,eol,start

" Enable true color support
set termguicolors

" Custom keyboard mappings
inoremap jk <ESC>                     " Exit insert mode quickly
nnoremap <C-c> :%y+<CR>              " Copy entire file to clipboard
nnoremap <C-s> :w<CR>                " Save file
nnoremap <Leader>t :terminal<CR>     " Open terminal
nnoremap <C-v> "+p                    " Paste from clipboard
nnoremap <C-z> u                      " Undo
vnoremap <C-v> "+p                    " Paste in visual mode
nnoremap <C-f> :NERDTreeFind<CR>     " Find file in NERDTree
nnoremap <Leader>n :NERDTreeFocus<CR>" Focus on NERDTree
nnoremap <C-n> :NERDTree<CR>         " Toggle NERDTree
nnoremap <C-t> :NERDTreeToggle<CR>   " Toggle NERDTree
nnoremap <Leader>p :Prettier<CR>     " Format code with Prettier
inoremap <C-v> <Esc>"+pa              " Paste in insert mode
inoremap <A-Up> <Esc>:m-2<CR>a       " Move line up
inoremap <A-Down> <Esc>:m+<CR>a      " Move line down
inoremap <C-Up> <Esc>v<Up>           " Select up
inoremap <C-Down> <Esc>v<Down>       " Select down

" Set the colorscheme
colorscheme nekonight-night

" Configure YouCompleteMe path
let g:ycm_global_ycm_extra_conf = '%USERPROFILE%\.vim\bundle\YouCompleteMe\third_party\ycmd\examples\ycm_extra_conf.py'

" Configure autocomplete options
set completeopt=menuone,noinsert,noselect

" Configure ALE linters for JavaScript
let g:ale_linters = {
\   'javascript': ['eslint'],          " Use ESLint for JS
\   'javascriptreact': ['eslint']      " Use ESLint for JSX
\}

" Configure ALE fixers
let g:ale_fixers = {
\   'javascript': ['prettier'],        " Format JS with Prettier
\   'javascriptreact': ['prettier']    " Format JSX with Prettier
\}

" Enable auto-fix on save
let g:ale_fix_on_save = 1

" Configure Prettier settings
let g:prettier#exec_cmd_async = 1      " Enable async formatting
let g:prettier#autoformat = 1          " Enable auto-formatting
let g:prettier#autoformat_require_pragma = 0  " Don't require prettier pragma

Enter fullscreen mode Exit fullscreen mode