Converts copied HTML to JSX before pasting into JavaScript/TypeScript code.
Just copy HTML from anywhere and paste it into any JavaScript or TypeScript file. It has automagically been converted to JSX!
Sometimes the automatic JSX-conversion can be annoying, for example when working on hybrid projects that use both JSX and HTML.
If you want to control the conversion by yourself, there is an on-demand mode,
which can be activated by setting the paste-html-as-jsx.mode setting to
on-demand.
When the on-demand mode is active, copied HTML will NOT be automatically
converted. A command is added to the palette that can convert your clipboard
contents from HTML to JSX at any point.
Since the VSCode extension API does not offer an interception point to modify clipboard content before pasting, this has to rely on changing the clipboard text at potentially relevant times.
The extension kicks in when one of the following events happen:
- You focus the VSCode window and the current editor has a relevant language id
- You focus a different editor that has a relevant language id
The relevant language ids are:
javascriptjavascriptreacttypescriptreact
The extension then checks if the clipboard is HTML by checking if the first
non-whitespace character is < and the last is > (I know, it is not very
accurates). If that is true, it convert your clipboard contents to JSX and
writes it back.
If you experience any issues or have ideas on how to improve the extension, feel free to open an issue.
Paste HTML as JSX, a VSCode extension by leodriesch.
If you like this extension and would like to know about more cool stuff I do, check out my Twitter @leodriesch!
