Skip to content
🔦 [Vim script] JSX syntax pretty highlighting for vim.
Branch: master
Clone or download
Latest commit 007b85e May 11, 2019


The React syntax highlighting and indenting plugin for vim. Also supports the typescript tsx file.


  • 📦 Support JSX highlighting and indenting out of the box. No dependencies.
  • 💯 Fully implemented the JSX syntax specification.
  • Support React syntax highlighting and indenting for JSX and typescript TSX files.
  • 🏷 Support JSX syntax highlighting and indenting inside the tagged template string.
  • 🎨 Support highlighting the close tag separately from the open tag (set let g:vim_jsx_pretty_highlight_close_tag = 1 in your vimrc).
  • 💪 Many more corner test cases covered.
  • 💅 Reasonable syntax highlight groups, easy for customization.



(add colorful config)
vim-jsx-pretty mxw/vim-jsx
vim-jsx-pretty colorful vim-jsx-pretty vim-jsx

Auto indent

Auto indent demo

support typescript

typescript demo



your ~/.vimrc:

  • No dependencies

    Plug 'maxmellon/vim-jsx-pretty'
  • with: vim-javascript (Recommended but not required)

    Plug 'pangloss/vim-javascript'
    Plug 'maxmellon/vim-jsx-pretty'
  • if you want to highlight tsx files.

    Plug 'leafgarland/typescript-vim'
    Plug 'maxmellon/vim-jsx-pretty'
  • Execute command in vim:

    :so ~/.vimrc

Syntax group list

name place
jsxElement <tag id="sample">text</tag>
jsxTag <tag id="sample">
jsxTagName <tag id="sample">
jsxComponentName <Capitals>
jsxAttrib <tag id="sample">
jsxEqual <tag id="sample">
jsxString <tag id="sample">
jsxCloseTag </tag>
jsxCloseString <tag />
jsxDot <Parent.Child>
jsxNamespace <foo:bar>
jsxPunct <tag></tag>


name default description
g:vim_jsx_pretty_template_tags ['html', 'raw'] highlight JSX inside the tagged template string, set it to [] to disable this feature
g:vim_jsx_pretty_highlight_close_tag 0 highlight the close tag separately from the open tag
g:vim_jsx_pretty_colorful_config 0 colorful config flag

Colorful style (vim-javascript only)

let g:vim_jsx_pretty_colorful_config = 1 " default 0




You can’t perform that action at this time.