Unable To Multiline Comment typescriptreact Through Comment.nvim

[DennisTheMenace780]

I have followed the setup guide using Comment.nvim

Comment.nvim

local status_ok, comment = pcall(require, "Comment")
if not status_ok then
  return
end

comment.setup {
    pre_hook = require('ts_context_commentstring.integrations.comment_nvim').create_pre_hook()
}

Treesitter.nvim

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

configs.setup({
	ensure_installed = "all", -- one of "all", "maintained", or list of languages.
	sync_install = false, -- install languages synchronously
	ignore_install = { "" }, -- List of parsers to ignore installing
	highlight = {
		enable = true, --  false will disable whole extension
		disable = { "" },
		additional_vim_regex_highlighting = true,
	},
	indent = { enable = true, disable = { "yaml" } },
	autopairs = {
		enable = true,
	},
	context_commentstring = {
		enable = true,
		enable_autocmd = false,
	},
})

From everything I have been reading, this is really all that is needed to get going with the plugin. However when I try to do any Visual Line comments i'll get // and Visual Block comments give me a /* */, so it appears to be missing the curly braces. I have also configured Tree Sitter to pick up the context_commentstring, but still not working.

It seems like it won't accept the tsx nodes at all, even if I modify the config option of context_commentstring to include tsx.

I am not sure what I can provide to help diagnose the issue, but happy to upon request.

[DennisTheMenace780]

Alright so this sucked to figure out, but I figured it out for anyone who comes across this.

Tl;DR the reason I could not get this plugin to work was because my cursor was not on an appropriate Tree Sitter node.

It felt like the plugin was just not hitting the appropriate nodes no matter what I tried, so I installed NvimTreesitter Playground to actually see what was happening behind the scenes. My problem was that I had my cursor at the start of whitespace but on the same line a JSX Element would be, and I thought that would allow me to just comment out what I wanted.

What needed to happen is that the cursor must be placed, literally, on the JSX tag or element for the commenting to work. Once I discovered that, everything worked beautifully.

[JoosepAlviste]

Hey @DennisTheMenace780! This issue seems a bit odd since this plugin should definitely handle the case where your cursor is not exactly on the JSX node. For example, in this case:

(
  <div>
    <h1>Hello</h1>
^ -- cursor
  </div>
)

The comment character should be calculated based on the first non-whitespace character in the line:

(
  <div>
    <h1>Hello</h1>
    ^ -- this position is used to calculate the commentstring
  </div>
)

This should result in the {/* %s */} commentstring.

Could you maybe give a specific example of an unexpected use case?