How do you set up autocompletion for components in TSX or astro files?

[KeebCat]

I'm unsure if this is an LSP issue with how I set up ts_ls or a problem with my blink.cmp config, but unlike for instance IntelliJ or VSCode, if I try to use a custom component I made it won't show in my auto completions and thus also won't auto import it, which really hurts when you're using a lot of custom components.

This is inside an astro project and applies to both .astro and .tsx React files. Since astro defers to the typescript lsp, I am not sure if this means it's a systematic issue with my setup for blink, nvim-lspconfig, or just affecting one language server. If I, say, make a CustomButton component either as an Astro or React component and then try typing <Cus it doesn't suggest it. Even if I manually import the component it doesn't show up in the completions.

I spent a whole afternoon trying to look for answers to this and either I don't know how to google it, this issue is super hard to solve, or it's so simple nobody ever bothered to ask. I even ended up trying an LLM and that, as expected, was of very little use.

I'd be very happy about any advice!

The following are my blink.lua and lsp.lua:

blink.lua

return {
	"saghen/blink.cmp",
	-- optional: provides snippets for the snippet source
	dependencies = { "rafamadriz/friendly-snippets" },

	-- use a release tag to download pre-built binaries
	version = "1.*",
	-- AND/OR build from source, requires nightly: https://rust-lang.github.io/rustup/concepts/channels.html#working-with-nightly-rust
	-- build = 'cargo build --release',
	-- If you use nix, you can build from source using latest nightly rust with:
	-- build = 'nix run .#build-plugin',

	---@module 'blink.cmp'
	---@type blink.cmp.Config
	opts = {
		-- 'default' (recommended) for mappings similar to built-in completions (C-y to accept)
		-- 'super-tab' for mappings similar to vscode (tab to accept)
		-- 'enter' for enter to accept
		-- 'none' for no mappings
		--
		-- All presets have the following mappings:
		-- C-space: Open menu or open docs if already open
		-- C-n/C-p or Up/Down: Select next/previous item
		-- C-e: Hide menu
		-- C-k: Toggle signature help (if signature.enabled = true)
		--
		-- See :h blink-cmp-config-keymap for defining your own keymap
		keymap = {
			-- Each keymap may be a list of commands and/or functions
			preset = "enter",
			-- Select completions
			["<Up>"] = { "select_prev", "fallback" },
			["<Down>"] = { "select_next", "fallback" },
			["<Tab>"] = { "select_next", "fallback" },
			["<S-Tab>"] = { "select_prev", "fallback" },
			-- Scroll documentation
			["<C-b>"] = { "scroll_documentation_up", "fallback" },
			["<C-f>"] = { "scroll_documentation_down", "fallback" },
			-- Show/hide signature
			["<C-k>"] = { "show_signature", "hide_signature", "fallback" },
		},
		appearance = {
			-- 'mono' (default) for 'Nerd Font Mono' or 'normal' for 'Nerd Font'
			-- Adjusts spacing to ensure icons are aligned
			nerd_font_variant = "mono",
		},

		completion = {
			-- The keyword should only matchh against the text before
			keyword = { range = "prefix" },
			menu = {
				-- Use treesitter to highlight the label text for the given list of sources
				draw = {
					treesitter = { "lsp" },
				},
			},
			-- Show completions after tying a trigger character, defined by the source
			trigger = { show_on_trigger_character = true },
			documentation = {
				-- Show documentation automatically
				auto_show = true,
			},
		},
		-- Default list of enabled providers defined so that you can extend it
		-- elsewhere in your config, without redefining it, due to `opts_extend`
		sources = {
			default = { "lsp", "path", "snippets", "lazydev" }, -- for existing text add "buffer"
			providers = {
				lazydev = {
					name = "LazyDev",
					module = "lazydev.integrations.blink",
					-- make lazydev completions top priority (see `:h blink.cmp`)
					score_offset = 100,
				},
			},
		},

		-- (Default) Rust fuzzy matcher for typo resistance and significantly better performance
		-- You may use a lua implementation instead by using `implementation = "lua"` or fallback to the lua implementation,
		-- when the Rust fuzzy matcher is not available, by using `implementation = "prefer_rust"`
		--
		-- See the fuzzy documentation for more information
		fuzzy = { implementation = "prefer_rust_with_warning" },
		signature = { enabled = true },
	},
	opts_extend = { "sources.default" },
}

lsp.lua

return {
	{
		"mason-org/mason.nvim",
		opts = {
			ui = {
				icons = {
					package_installed = "✓",
					package_pending = "➜",
					package_uninstalled = "✗",
				},
			},
		},
	},
	{
		"mason-org/mason-lspconfig.nvim",
		opts = { ensure_installed = { "pylsp", "lua_ls", "rust_analyzer", "bashls", "tinymist", "astro", "ts_ls", "yamlls", "tailwindcss", "eslint" } },
	},
	{
		"neovim/nvim-lspconfig",
		dependencies = { "saghen/blink.cmp" },
		opts = {
			servers = {
				lua_ls = { settings = { Lua = { diagnostics = { globals = { "vim" } } } } },
				pylsp = {},
				rust_analyzer = { settings = { ["rust-analyzer"] = { check = { command = "clippy" } } } }, -- check used to be checkOnSave
				bashls = {},
				gdscript = { name = "godot", cmd = vim.lsp.rpc.connect("127.0.0.1", 6005) },
				tinymist = { settings = { formatterMode = "typstyle", exportPdf = "onType", semanticTokens = "disable" } },
				astro = { init_options = { typescript = { tsdk = "./node_modules/typescript/lib" } } },
				ts_ls = {},
				yamlls = {},
				tailwindcss = {},
				mdx_analyzer = {},
			},
		},
		config = function(_, opts)
			local lspconfig = require("lspconfig")
			-- Use an on_attach function to map additional LSP-specific keys when the server attaches
			local on_attach = function(_, bufnr)
				-- Enable completion triggered by <c-x><c-o> (blink should take care of it though)
				vim.api.nvim_buf_set_option(bufnr, "omnifunc", "v:lua.vim.lsp.omnifunc")

				-- LSP key mappings for this buffer
				vim.keymap.set("n", "gD", vim.lsp.buf.declaration, { desc = "Go to declaration", buffer = bufnr })
				vim.keymap.set("n", "gd", vim.lsp.buf.definition, { desc = "Go to definition", buffer = bufnr })
				vim.keymap.set("n", "K", vim.lsp.buf.hover, { desc = "LSP hover info", buffer = bufnr })
				vim.keymap.set("n", "gi", vim.lsp.buf.implementation, { desc = "List all implementations", buffer = bufnr })
				vim.keymap.set("n", "<C-k>", vim.lsp.buf.signature_help, { desc = "LSP signature help", buffer = bufnr })
				vim.keymap.set("n", "<Leader>wa", vim.lsp.buf.add_workspace_folder, { desc = "Add folder to workspace folders", buffer = bufnr })
				vim.keymap.set("n", "<Leader>wr", vim.lsp.buf.remove_workspace_folder, { desc = "Remove folder from workspace folders", buffer = bufnr })
				vim.keymap.set("n", "<Leader>wl", function()
					print(vim.inspect(vim.lsp.buf.list_workspace_folders()))
				end, { desc = "List workspace folders", buffer = bufnr })
				vim.keymap.set("n", "<Leader>D", vim.lsp.buf.type_definition, { desc = "LSP type definition", buffer = bufnr })
				vim.keymap.set("n", "<Leader>rn", vim.lsp.buf.rename, { desc = "LSP rename", buffer = bufnr })
				vim.keymap.set("n", "<Leader>ca", vim.lsp.buf.code_action, { desc = "LSP code actions", buffer = bufnr })
				vim.keymap.set("n", "gr", vim.lsp.buf.references, { desc = "LSP list references", buffer = bufnr })
			end
			-- Set up servers
			for server, config in pairs(opts.servers) do
				-- passing config.capabilities to blink.cmp merges with the capabilities in your
				-- `opts[server].capabilities, if you've defined it
				config.capabilities = require("blink.cmp").get_lsp_capabilities(config.capabilities)
				config.on_attach = on_attach
				lspconfig[server].setup(config)
			end
		end,
	},
}