HTML JSX Script

Syntax highlighting and formatting for JSX inside HTML script blocks using type="jsx".

Features

• JSX syntax highlighting inside <script type="jsx"> blocks in regular .html files
• Support for <script type="jsx">, <script type="text/jsx">, and <script type="text/babel">
• Built-in Format Document support powered by Prettier
• Format Selection support
• Snippets for JSX script blocks and React patterns
• Commands to convert between text/babel and jsx

Example

<script type="jsx">
  const App = () => <h1>Hello JSX</h1>;
</script>

Usage

Open any .html file. The extension activates automatically and highlights JSX inside <script type="jsx"> blocks.

No configuration or language mode changes needed.

Format Document

Run:

Format Document

or use:

Option + Shift + F

on macOS.

The formatter preserves:

<script type="jsx">

It temporarily converts JSX script blocks internally for formatting and restores them back to type="jsx" afterward.

Commands

Command	Description
HTML JSX Script: Format Document	Formats the current document
HTML JSX Script: Insert JSX Script Block	Inserts a ready-to-use JSX script block
HTML JSX Script: Convert text/babel to jsx	Converts Babel script blocks to JSX script blocks
HTML JSX Script: Convert jsx to text/babel	Converts JSX script blocks to Babel script blocks

Snippets

Prefix	Description
jsxscript	Inserts a <script type="jsx"> block
jsxroot	Inserts a React root render snippet
jsxcomponent	Inserts a functional JSX component
jsxapp	Inserts a small HTML React app structure

Settings

Setting	Default	Description
htmlJsxScript.formatter.enabled	true	Enables the formatter
htmlJsxScript.formatter.printWidth	80	Formatter line width
htmlJsxScript.formatter.singleQuote	false	Use single quotes
htmlJsxScript.formatter.trailingComma	es5	Trailing comma behavior
htmlJsxScript.formatter.bracketSameLine	false	Controls multiline JSX closing bracket behavior
htmlJsxScript.formatter.htmlWhitespaceSensitivity	css	Controls HTML whitespace behavior

Example:

{
  "htmlJsxScript.formatter.printWidth": 100,
  "htmlJsxScript.formatter.singleQuote": true
}

Important Note

This extension provides editor support only.

It does not transpile JSX in the browser. If you want runtime JSX support in a plain HTML file, you still need Babel Standalone, a build tool, or another JSX transform setup.

Repository

https://github.com/romerodiesan/html-jsx-script

License

MIT

Development Workflow

This repository follows a production-oriented workflow:

• main is the stable branch.
• Feature work should be done on short-lived branches and merged through Pull Requests.
• Commit messages must follow Conventional Commits.

Examples:

feat(grammar): support jsx and text/jsx script types
fix(formatter): preserve script type=jsx after formatting
docs(readme): document html injection workflow

Before publishing:

npm ci
npm run lint
npm run package

See CONTRIBUTING.md for full contribution and commit policy.

Project Structure

src/
  core/
    constants.js
    document.js
    logger.js
  features/
    commands/
      index.js
    formatting/
      providers.js
    transforms/
      scriptTypeTransforms.js
  formatter/
    index.js
  extension.js

syntaxes/
snippets/
samples/

Architecture responsibilities:

• src/extension.js: composition root and VS Code activation lifecycle.
• src/core/*: shared low-level utilities.
• src/features/commands/*: user-triggered commands.
• src/features/formatting/*: formatting providers.
• src/features/transforms/*: pure text transformations.
• src/formatter/*: Prettier integration and JSX script preservation.