What Are The Best Vim Auto-Indent Settings For JavaScript?

Okay, this is the hot take I give my friends when they ask how to stop JavaScript files from turning into a jagged mess: treat indentation as a filetype thing, not a global, and use 2 spaces plus an actual JS-aware indent engine. I usually put this in my vimrc (or better, in ftplugin/javascript.vim):

filetype plugin indent on
autocmd FileType javascript,typescript setlocal shiftwidth=2 softtabstop=2 tabstop=2 expandtab
autocmd FileType javascript,typescript setlocal autoindent smartindent

Those lines give you consistent 2-space soft tabs (the de facto style for many JS projects) and rely on Vim's smartindent for basic braces. But honestly, for real-world code with ES6/JSX/template literals, install a javascript-indent plugin (like the popular one that provides an indentexpr) and let it set indentexpr for you; it handles arrow functions, template literals and some weird edge cases better than plain smartindent. I also map = to re-indent visually: vmap = = or use gg=G to reformat a whole file.

Finally, I pair this with an on-save formatter — 'prettier' is my go-to — so even when teammates differ, my local formatting is predictable. If you want the exact plugin names or a sample ftplugin that runs Prettier on save, I can paste that too.

I've been noodling with tiny projects and configs between classes, and my minimalist setup works great: keep it simple and local. In my ~/.vim/ftplugin/javascript.vim I have a few lines:

setlocal expandtab
setlocal shiftwidth=2
setlocal softtabstop=2
setlocal tabstop=2
setlocal autoindent
setlocal smartindent

This gives me 2-space indentation and uses spaces, which keeps diffs cleaner when submitting PRs. If I open JSX or modern files, I sometimes switch smartindent off and rely on a plugin's indentexpr because smartindent can mess up multiline JSX. I also use an .editorconfig file across projects — it’s the easiest way to enforce consistent settings among different editors. For quick tidy-ups, I run gg=G, and for more disciplined formatting I call Prettier through an external tool or plugin, because it handles semicolons, trailing commas, and complex indentation reliably.

Honestly, when I tinker late at night, my aim is predictability with minimal fuss. My go-to is a tiny ftplugin that forces 2-space soft tabs and enable autoindent locally — no global side effects. Example essentials:

setlocal expandtab
setlocal shiftwidth=2
setlocal softtabstop=2
setlocal tabstop=2
setlocal autoindent

If you prefer tabs, change expandtab off and set tabstop appropriately, but beware mixing tabs and spaces. For harder JS constructs I rely on a small indent plugin so Vim knows how to handle template literals and JSX; otherwise I reformat with Prettier on save. One last tip: keep editorconfig in the repo so contributors get the same behavior — it saves so many tiny style arguments.

If I were to outline a checklist for someone who wants clean auto-indent for JavaScript in Vim, I'd do it like this: first, enable filetype indenting; second, set local tab/spaces policy; third, choose an indent engine (smartindent vs cindent vs plugin); fourth, add formatter integration.

Concretely, start with:

filetype plugin indent on

Then use local settings so other filetypes don't inherit JS rules:

autocmd FileType javascript,jsx setlocal expandtab shiftwidth=2 softtabstop=2 tabstop=2

Now pick an engine: avoid cindent for modern JS — it’s more C-focused. smartindent is fine for simple code, but for arrow functions, template literals, and JSX I recommend installing a dedicated indent script (search for 'vim-javascript' or 'vim-js-indent'). Those plugins typically set indentexpr for you and handle tricky cases.

I always couple indentation with a formatter: set up an autocommand to run Prettier or ESLint --fix on BufWritePre. That way, even if Vim's indenting slips on odd syntax, the formatter normalizes everything. Also, if you collaborate, respect the project's .editorconfig or package.json style fields to avoid formatting fights.