My Neovim setup for React, TypeScript, Tailwind CSS, etc

Takuya Matsuyama - Aug 9 '22 - - Dev Community

Hi, it's Takuya here.
As you may know, I mainly use Neovim to code my app called Inkdrop, a cross-platform Markdown note-taking app.
It's built with Electron for desktop and React Native for mobile platforms.
It's been 1 year since I last posted my Neovim setup.
Neovim and its plugins have been evolved so well.
So, I'd like to share my latest setup for coding React and TypeScript based apps.
The main difference is that the config files are now written in Lua.
I switched from vim-plug to Packer.
I also made a tutorial video on how to set up Neovim from scratch on a new M2 MacBook Air.
If you have your own dotfiles already, you can cherry-pick my config.
I hope you enjoy it!

Ingredients

Here is a quick summary of my set up:

And here is my dotfiles repository:

GitHub logo craftzdog / dotfiles-public

My personal dotfiles

fish screenshot

nvim screenshot

Takuya's dotfiles

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

Looking for a Markdown note-taking app?

Check out my app called Inkdrop

Inkdrop

Contents

  • vim (Neovim) config
  • tmux config
  • git config
  • fish config
  • PowerShell config

Neovim setup

Requirements

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

Shell setup (macOS & Linux)

View on GitHub

A tutorial video:

Prerequisites — iTerm2 and Patched Nerd Font

iTerm2 is a fast terminal emulator for macOS.
Install one of Nerd Fonts for displaying fancy glyphs on your terminal.
My current choice is Hack.
And use it on your terminal app. For example, on iTerm2:

iTerm Preferences

Install Neovim via Homebrew 

brew install neovim
Enter fullscreen mode Exit fullscreen mode

Directory structure

Neovim conforms XDG Base Directory structure. Here is my config file structure:

📂 ~/.config/nvim
├── 📁 after
│  └── 📁 plugin
├── 📂 lua
│  └── 🌑 base.lua
├── 📁 plugin
└── 🇻 init.lua
Enter fullscreen mode Exit fullscreen mode

Neovim loads $HOME/.config/nvim/init.vim or init.lua first instead of $HOME/.vimrc.
Check out the quickstart guide for more detail:

https://github.com/nanotee/nvim-lua-guide

Install plugin manager: Packer

Install Packer by running the below command:

git clone --depth 1 https://github.com/wbthomason/packer.nvim \
 ~/.local/share/nvim/site/pack/packer/start/packer.nvim
Enter fullscreen mode Exit fullscreen mode

Then, make ./.config/nvim/lua/plugins.lua like so:

local status, packer = pcall(require, "packer")
if (not status) then
  print("Packer is not installed")
  return
end

vim.cmd [[packadd packer.nvim]]

packer.startup(function(use)
  use 'wbthomason/packer.nvim'
  -- Your plugins go here
end)
Enter fullscreen mode Exit fullscreen mode

Then, require it from init.lua like so:

require('plugins')
Enter fullscreen mode Exit fullscreen mode

Color scheme: Neosolarized

Neosolarized

I use svrana/neosolarized.nvim with some customizations.

local status, n = pcall(require, "neosolarized")
if (not status) then return end

n.setup({
  comment_italics = true,
})

local cb = require('colorbuddy.init')
local Color = cb.Color
local colors = cb.colors
local Group = cb.Group
local groups = cb.groups
local styles = cb.styles

Color.new('black', '#000000')
Group.new('CursorLine', colors.none, colors.base03, styles.NONE, colors.base1)
Group.new('CursorLineNr', colors.yellow, colors.black, styles.NONE, colors.base1)
Group.new('Visual', colors.none, colors.base03, styles.reverse)

local cError = groups.Error.fg
local cInfo = groups.Information.fg
local cWarn = groups.Warning.fg
local cHint = groups.Hint.fg

Group.new("DiagnosticVirtualTextError", cError, cError:dark():dark():dark():dark(), styles.NONE)
Group.new("DiagnosticVirtualTextInfo", cInfo, cInfo:dark():dark():dark(), styles.NONE)
Group.new("DiagnosticVirtualTextWarn", cWarn, cWarn:dark():dark():dark(), styles.NONE)
Group.new("DiagnosticVirtualTextHint", cHint, cHint:dark():dark():dark(), styles.NONE)
Group.new("DiagnosticUnderlineError", colors.none, colors.none, styles.undercurl, cError)
Group.new("DiagnosticUnderlineWarn", colors.none, colors.none, styles.undercurl, cWarn)
Group.new("DiagnosticUnderlineInfo", colors.none, colors.none, styles.undercurl, cInfo)
Group.new("DiagnosticUnderlineHint", colors.none, colors.none, styles.undercurl, cHint)
Enter fullscreen mode Exit fullscreen mode

Status line: Lualine

lualine

nvim-lualine/lualine.nvim provides a flexible way to configure statusline.

local status, lualine = pcall(require, "lualine")
if (not status) then return end

lualine.setup {
  options = {
    icons_enabled = true,
    theme = 'solarized_dark',
    section_separators = { left = '', right = '' },
    component_separators = { left = '', right = '' },
    disabled_filetypes = {}
  },
  sections = {
    lualine_a = { 'mode' },
    lualine_b = { 'branch' },
    lualine_c = { {
      'filename',
      file_status = true, -- displays file status (readonly status, modified status)
      path = 0 -- 0 = just filename, 1 = relative path, 2 = absolute path
    } },
    lualine_x = {
      { 'diagnostics', sources = { "nvim_diagnostic" }, symbols = { error = ' ', warn = ' ', info = ' ',
        hint = ' ' } },
      'encoding',
      'filetype'
    },
    lualine_y = { 'progress' },
    lualine_z = { 'location' }
  },
  inactive_sections = {
    lualine_a = {},
    lualine_b = {},
    lualine_c = { {
      'filename',
      file_status = true, -- displays file status (readonly status, modified status)
      path = 1 -- 0 = just filename, 1 = relative path, 2 = absolute path
    } },
    lualine_x = { 'location' },
    lualine_y = {},
    lualine_z = {}
  },
  tabline = {},
  extensions = { 'fugitive' }
}
Enter fullscreen mode Exit fullscreen mode

Lspconfig

Neovim has a built-in LSP support.
You can easily configure it by using neovim/nvim-lspconfig.
For example, to enable typescript language server on Neovim:

local status, nvim_lsp = pcall(require, "lspconfig")
if (not status) then return end

local protocol = require('vim.lsp.protocol')

local on_attach = function(client, bufnr)
  -- format on save
  if client.server_capabilities.documentFormattingProvider then
    vim.api.nvim_create_autocmd("BufWritePre", {
      group = vim.api.nvim_create_augroup("Format", { clear = true }),
      buffer = bufnr,
      callback = function() vim.lsp.buf.formatting_seq_sync() end
    })
  end
end

-- TypeScript
nvim_lsp.tsserver.setup {
  on_attach = on_attach,
  filetypes = { "typescript", "typescriptreact", "typescript.tsx" },
  cmd = { "typescript-language-server", "--stdio" }
}
Enter fullscreen mode Exit fullscreen mode

Don't forget to install typescript language server itself:

npm i -g typescript-language-server
Enter fullscreen mode Exit fullscreen mode

Auto-completion: Lspkind and cmp

lspkind and cmp

To get LSP-aware auto-completion feature with fancy pictograms, I use the following plugins:

Configure it like so:

local status, cmp = pcall(require, "cmp")
if (not status) then return end
local lspkind = require 'lspkind'

cmp.setup({
  snippet = {
    expand = function(args)
      require('luasnip').lsp_expand(args.body)
    end,
  },
  mapping = cmp.mapping.preset.insert({
    ['<C-d>'] = cmp.mapping.scroll_docs(-4),
    ['<C-f>'] = cmp.mapping.scroll_docs(4),
    ['<C-Space>'] = cmp.mapping.complete(),
    ['<C-e>'] = cmp.mapping.close(),
    ['<CR>'] = cmp.mapping.confirm({
      behavior = cmp.ConfirmBehavior.Replace,
      select = true
    }),
  }),
  sources = cmp.config.sources({
    { name = 'nvim_lsp' },
    { name = 'buffer' },
  }),
  formatting = {
    format = lspkind.cmp_format({ with_text = false, maxwidth = 50 })
  }
})

vim.cmd [[
  set completeopt=menuone,noinsert,noselect
  highlight! default link CmpItemKind CmpItemMenuDefault
]]
Enter fullscreen mode Exit fullscreen mode

Syntax highlightings: Treesitter

treesitter

Treesitter is a popular language parser for syntax highlightings.
First, install it:

brew install tree-sitter
Enter fullscreen mode Exit fullscreen mode

Install nvim-treesitter/nvim-treesitter with Packer and configure it like so:

local status, ts = pcall(require, "nvim-treesitter.configs")
if (not status) then return end

ts.setup {
  highlight = {
    enable = true,
    disable = {},
  },
  indent = {
    enable = true,
    disable = {},
  },
  ensure_installed = {
    "tsx",
    "toml",
    "fish",
    "php",
    "json",
    "yaml",
    "swift",
    "css",
    "html",
    "lua"
  },
  autotag = {
    enable = true,
  },
}

local parser_config = require "nvim-treesitter.parsers".get_parser_configs()
parser_config.tsx.filetype_to_parsername = { "javascript", "typescript.tsx" }
Enter fullscreen mode Exit fullscreen mode

Autotag and Autopair

For React apps, you often want to close tags quickly.
windwp/nvim-ts-autotag is exactly what you want.

local status, autotag = pcall(require, "nvim-ts-autotag")
if (not status) then return end

autotag.setup({})
Enter fullscreen mode Exit fullscreen mode

windwp/nvim-autopairs is for closing brackets.

local status, autopairs = pcall(require, "nvim-autopairs")
if (not status) then return end

autopairs.setup({
  disable_filetype = { "TelescopePrompt" , "vim" },
})
Enter fullscreen mode Exit fullscreen mode

Fuzz finder: Telescope

telescope

telescope.nvim provides an interactive fuzzy finder over lists, built on top of the latest Neovim features.
I also use telescope-file-browser.nvim as a filer.

It’s so useful because you can search files while viewing the content of the files without actually opening them. It supports various sources like Vim, files, Git, LSP, and Treesitter. Check out the showcase of Telescope.

Install kyazdani42/nvim-web-devicons to get file icons on Telescope, statusline, and other supported plugins.

The configuration would look like so:

local status, telescope = pcall(require, "telescope")
if (not status) then return end
local actions = require('telescope.actions')
local builtin = require("telescope.builtin")

local function telescope_buffer_dir()
  return vim.fn.expand('%:p:h')
end

local fb_actions = require "telescope".extensions.file_browser.actions

telescope.setup {
  defaults = {
    mappings = {
      n = {
        ["q"] = actions.close
      },
    },
  },
}

-- keymaps
vim.keymap.set('n', ';f',
  function()
    builtin.find_files({
      no_ignore = false,
      hidden = true
    })
  end)
vim.keymap.set('n', ';r', function()
  builtin.live_grep()
end)
vim.keymap.set('n', '\\\\', function()
  builtin.buffers()
end)
vim.keymap.set('n', ';t', function()
  builtin.help_tags()
end)
vim.keymap.set('n', ';;', function()
  builtin.resume()
end)
vim.keymap.set('n', ';e', function()
  builtin.diagnostics()
end)
Enter fullscreen mode Exit fullscreen mode

file browser

Use the telescope browser extension:

telescope.setup {
  defaults = {
    mappings = {
      n = {
        ["q"] = actions.close
      },
    },
  },
  extensions = {
    file_browser = {
      theme = "dropdown",
      -- disables netrw and use telescope-file-browser in its place
      hijack_netrw = true,
      mappings = {
        -- your custom insert mode mappings
        ["i"] = {
          ["<C-w>"] = function() vim.cmd('normal vbd') end,
        },
        ["n"] = {
          -- your custom normal mode mappings
          ["N"] = fb_actions.create,
          ["h"] = fb_actions.goto_parent_dir,
          ["/"] = function()
            vim.cmd('startinsert')
          end
        },
      },
    },
  },
}
telescope.load_extension("file_browser")

vim.keymap.set("n", "sf", function()
  telescope.extensions.file_browser.file_browser({
    path = "%:p:h",
    cwd = telescope_buffer_dir(),
    respect_gitignore = false,
    hidden = true,
    grouped = true,
    previewer = false,
    initial_mode = "normal",
    layout_config = { height = 40 }
  })
end)
Enter fullscreen mode Exit fullscreen mode

Tabs: Bufferline

bufferline

I use akinsho/nvim-bufferline.lua to get better looking of tabs.
Make some customizations to make it look better with Solarized theme:

local status, bufferline = pcall(require, "bufferline")
if (not status) then return end

bufferline.setup({
  options = {
    mode = "tabs",
    separator_style = 'slant',
    always_show_bufferline = false,
    show_buffer_close_icons = false,
    show_close_icon = false,
    color_icons = true
  },
  highlights = {
    separator = {
      guifg = '#073642',
      guibg = '#002b36',
    },
    separator_selected = {
      guifg = '#073642',
    },
    background = {
      guifg = '#657b83',
      guibg = '#002b36'
    },
    buffer_selected = {
      guifg = '#fdf6e3',
      gui = "bold",
    },
    fill = {
      guibg = '#073642'
    }
  },
})

vim.keymap.set('n', '<Tab>', '<Cmd>BufferLineCycleNext<CR>', {})
vim.keymap.set('n', '<S-Tab>', '<Cmd>BufferLineCyclePrev<CR>', {})
Enter fullscreen mode Exit fullscreen mode

LSP Uls: Lspsaga

lsp_finder

rename action

definition preview

glepnir/lspsaga.nvim is one of my favorite LSP plugins.
It provides beautiful UIs for various LSP-related features like hover doc, definition preview, and rename actions.
My configuration is simple:

local status, saga = pcall(require, "lspsaga")
if (not status) then return end

saga.init_lsp_saga {
  server_filetype_map = {
    typescript = 'typescript'
  }
}

local opts = { noremap = true, silent = true }
vim.keymap.set('n', '<C-j>', '<Cmd>Lspsaga diagnostic_jump_next<CR>', opts)
vim.keymap.set('n', 'K', '<Cmd>Lspsaga hover_doc<CR>', opts)
vim.keymap.set('n', 'gd', '<Cmd>Lspsaga lsp_finder<CR>', opts)
vim.keymap.set('i', '<C-k>', '<Cmd>Lspsaga signature_help<CR>', opts)
vim.keymap.set('n', 'gp', '<Cmd>Lspsaga preview_definition<CR>', opts)
vim.keymap.set('n', 'gr', '<Cmd>Lspsaga rename<CR>', opts)
Enter fullscreen mode Exit fullscreen mode

Code formatter: Prettier and null-ls

I heavily rely on Prettier to format TypeScript/JavaScript/CSS files.
Use jose-elias-alvarez/null-ls.nvim and MunifTanjim/prettier.nvim to accomplish that.

First, you need prettierd:

brew install prettierd
Enter fullscreen mode Exit fullscreen mode

Then, configure null-ls as following:

local status, null_ls = pcall(require, "null-ls")
if (not status) then return end

null_ls.setup({
  sources = {
    null_ls.builtins.diagnostics.eslint_d.with({
      diagnostics_format = '[eslint] #{m}\n(#{c})'
    }),
    null_ls.builtins.diagnostics.fish
  }
})
Enter fullscreen mode Exit fullscreen mode

Prettier:

local status, prettier = pcall(require, "prettier")
if (not status) then return end

prettier.setup {
  bin = 'prettierd',
  filetypes = {
    "css",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "json",
    "scss",
    "less"
  }
}
Enter fullscreen mode Exit fullscreen mode

Git markers: gitsigns

gitsigns

lewis6991/gitsigns.nvim provides git decorations for current buffers.
It helps you know which lines are currently changed.
It works out of the box.

require('gitsigns').setup {}
Enter fullscreen mode Exit fullscreen mode

git

git

I often view the code on GitHub.
dinhhuy258/git.nvim helps open GitHub right from Neovim, and provides git blame view in split view, which are super handy.

local status, git = pcall(require, "git")
if (not status) then return end

git.setup({
  keymaps = {
    -- Open blame window
    blame = "<Leader>gb",
    -- Open file/folder in git repository
    browse = "<Leader>go",
  }
})
Enter fullscreen mode Exit fullscreen mode

LSP tool: mason

mason

If you need additional LSP support for specific libraries, you may need williamboman/mason.nvim and williamboman/mason-lspconfig.nvim.
I use them for getting Tailwind CSS language server to work on Neovim.

local status, mason = pcall(require, "mason")
if (not status) then return end
local status2, lspconfig = pcall(require, "mason-lspconfig")
if (not status2) then return end

mason.setup({

})

lspconfig.setup {
  ensure_installed = { "sumneko_lua", "tailwindcss" },
}
Enter fullscreen mode Exit fullscreen mode

Add lspconfig:

local nvim_lsp = require "lspconfig"
nvim_lsp.tailwindcss.setup {}
Enter fullscreen mode Exit fullscreen mode

That’s pretty much it!
I hope it’s helpful for improving your Neovim environment.

Follow me online

Image
Buy verified BYBIT account
Image
Complete module federation example with rspack
Image
Week 2: Building Interactive Games
Image
First post and AMA
Image
Understanding Reconciliation and the Virtual DOM in React
Image
Custom RxJS Operators to Improve your Angular Apps
Image
Using both Bootstrap and Tailwind CSS in a single React project
Image
Mastering Web Development: A Comprehensive Collection of Free Online Tutorials
Image
In Theory: Self-Correcting Software
Image
Finally, a Tool to Convert Tailwind to CSS Instantly

tailwindcss, css, frontend, webdev
Image
Mastering the Arcane Arts of Linux: A Captivating Collection of Programming Tutorials
Image
Diary of Software Developer #5 - Learning Report

webdev, programming, devjournal, frontend
Image
Streamline Your Projects: A Cutting-Edge Neon Task Management Starter Kit

devchallenge, neonchallenge, postgres, database
Image
Spread and Rest Operator in Javascript with EXAMPLE
Image
Practical Guide to Apache Camel with Quarkus: Building an ETL Application
Image
Mastering Deep Linking and Universal Links in React Native: OpenGraph Share & Node.js Integration
Image
SQLAlchemy: The Powerhouse of ORMs
Image
Onboarding with posgress
Image
5 Simple Steps to Create a Stunning UI Element Card

ui, css, uiux, animation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player