How to add JavaScript and JSX comments in the same .js file

Question

I've been using Neovim to do the majority of my dev work for most of 2018 however something that has eluded me is being able to quickly toggle JSX comments

{/* JSX */}

and regular Javascript comments in the same .js file.

// single line JavaScript comment

Until last night I had been using vim-commentary to quickly toggle / comment a line of source in whatever language I was working with using the below mapping

noremap <leader>c :Commentary<cr>

which works great for 99% of the languages I work with, however when I have to work with a JavaScript file that is a react based component and has JSX in it, <leader>c will place // when trying to comment a line of JSX within the render method. I scanned through some of the issues of vim-commentary over at GitHub, and didn't really see a concrete example on how a single .js file could use // and {/* JSX */} within the same file using the same mapping. However, I did come across this issue and didn't really see a solution presented within the issue thread. One of the posters suggested tcomment_vim which oddly enough has this open issue but once again the author of the plugin suggests reading the source of the plugin which references a deprecated method in the plugin source. Anyways, not really sure where to go from here 🤷‍♂️, as always, any and all help would greatly be appreciated.

Answer 1

You need the following plugins:

• vim-commentary
• vim-jsx, to distinguish javascript and jsx files
• vim-context-commentstring, to change commentstring depending on the (syntax?) region.

Now, depending of the position within the file, either // or {/* */} style comments are used.

Update: Note that this sometimes tricky. Assume you have the following code:

const element = (
  <div>
    <h1>Hello!</h1>
  </div>
);

If the cursor is on the word Hello and you hit gci) to comment the inner part of the () you get

const element = (
  {/* <div> */}
  {/*   <h1>Hello!</h1> */}
  {/* </div> */}
);

If you would want the entire element commented you could hit gca). You get:

{/* const element = ( */}
{/*   <div> */}
{/*     <h1>Hello!</h1> */}
{/*   </div> */}
{/* ); */}

If the cursor is on the opening bracket in the first line and you hit gca) you get:

// const element = (
//   <div>
//     <h1>Hello!</h1>
//   </div>
// );