Paste HTML as JSX
Converts copied HTML to JSX before pasting into JavaScript/TypeScript code.
Overview
Get Started
Just copy HTML from anywhere and paste it into any JavaScript or TypeScript
file. It has automagically been converted to JSX!
on-demand Mode
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.
How It Works
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.
Problems or Suggestions
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!
