0

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.

1

You need the following plugins:

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>
// );
  • wow Ralf, i'll totally give that a go here in a few, thanks for sharing. 🙏 – ipatch Dec 22 '18 at 21:56
  • Any reason several vim configuration lines were removed from this answer in the past 24 hours? As installing all three plugins alone is not enough of a solution to achieve the functionality I would like have. – ipatch Dec 23 '18 at 21:49
  • @ipatch Removed as it works for me without the additional vimrc-cfg. The lines are already contained in vim-context-commentstring here. – Ralf Dec 24 '18 at 7:41
  • Ralf just confirmed the steps above you describe do in fact distinguish between regular JS // comments and JSX {/* */} comments. – ipatch Dec 27 '18 at 18:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.