Skip to content

A VSCode extension that converts copied HTML to JSX before pasting into JavaScript/TypeScript code.

License

Notifications You must be signed in to change notification settings

leodr/paste-html-as-jsx

Repository files navigation

Paste HTML as JSX

Converts copied HTML to JSX before pasting into JavaScript/TypeScript code.

Visual Studio Marketplace Version Visual Studio Marketplace Downloads


Overview

Get Started

Just copy HTML from anywhere and paste it into any JavaScript or TypeScript file. It has automagically been converted to JSX!

Demo of Paste HTML as 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:

  • javascript
  • javascriptreact
  • typescriptreact

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!