JavaScript and TypeScript Setup

Required Tools

# LSP server
npm install -g typescript typescript-language-server

# Linters
npm install -g eslint eslint_d   # eslint_d is faster daemon

# Formatters
npm install -g prettier

# Mason installation
:MasonInstall ts_ls eslint_d prettier

TypeScript LSP Configuration

lspconfig.ts_ls.setup({
  on_attach = on_attach,
  capabilities = capabilities,
  settings = {
    typescript = {
      inlayHints = {
        includeInlayParameterNameHints = "all",
        includeInlayParameterNameHintsWhenArgumentMatchesName = false,
        includeInlayFunctionParameterTypeHints = true,
        includeInlayVariableTypeHints = true,
        includeInlayPropertyDeclarationTypeHints = true,
        includeInlayFunctionLikeReturnTypeHints = true,
        includeInlayEnumMemberValueHints = true,
      },
    },
    javascript = {
      inlayHints = {
        includeInlayParameterNameHints = "all",
      },
    },
    completions = {
      completeFunctionCalls = true,
    },
  },
})

ESLint LSP

lspconfig.eslint.setup({
  on_attach = function(client, bufnr)
    on_attach(client, bufnr)
    -- Auto-fix on save
    vim.api.nvim_create_autocmd("BufWritePre", {
      buffer = bufnr,
      command = "EslintFixAll",
    })
  end,
  capabilities = capabilities,
})

Formatters and Linters (none-ls)

null_ls.setup({
  sources = {
    null_ls.builtins.formatting.prettier.with({
      filetypes = {
        "javascript", "javascriptreact",
        "typescript", "typescriptreact",
        "css", "html", "json", "yaml", "markdown",
      },
    }),
    null_ls.builtins.diagnostics.eslint_d,
    null_ls.builtins.code_actions.eslint_d,
  },
})

.prettierrc Config

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

sconfig.json Integration

Pyright and ts_ls automatically detect sconfig.json. Place it in the project root.

Running npm Scripts from Neovim

custom keymap

vim.keymap.set("n", "<leader>ns", function()
  local scripts = vim.fn.systemlist("cat package.json | jq -r '.scripts | keys[]'")
  vim.ui.select(scripts, { prompt = "Select npm script: " }, function(choice)
    if choice then
      vim.cmd("split | terminal npm run " .. choice)
    end
  end)
end, { desc = "Run npm script" })

In LazyVim

LazyVim Context

Setting up JS/TS manually can be tedious because of the dance between s_ls, eslint, and prettier. LazyVim handles this gracefully via Extras, ensuring formatters run properly without conflicting with the LSP.

Aspect	Vanilla Neovim	LazyVim
TS LSP	Manual s_ls	Enable via :LazyExtras → lang.typescript (uses tsls natively)
Linting	Manual eslint LSP and config	Enable linting.eslint via :LazyExtras
Formatting	Manual prettier via
ull-ls	Enable ormatting.prettier via :LazyExtras
Tailwind CSS	Manual setup required	Enable lang.tailwind via :LazyExtras

Enabling JS/TS Support in LazyVim

1. Open Neovim.
2. Run :LazyExtras.
3. Enable lang.typescript (provides TypeScript/JavaScript LSP support via tsls).
4. Enable ormatting.prettier (provides robust Prettier integration).
5. Enable linting.eslint (provides ESLint support and auto-fix capabilities).

LazyVim will automatically configure conform.nvim for Prettier formatting and vim-lint for ESLint, ensuring your TS/JS files are instantly ready for modern frontend development without conflicting formatting rules.

Related

• LazyVim Overview
• LazyVim Extras

What's Next

• PHP and WordPress Setup