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

README.md

vim-jsx-pretty

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

Features

  • 📦 Support JSX highlighting and indenting out of the box. No dependencies.
  • 💯 Fully implemented the JSX syntax specification. https://github.com/facebook/jsx
  • 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.

Demo

Syntax

vim-jsx-pretty
(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

Installation

vim-plug https://github.com/junegunn/vim-plug

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
    :PlugInstall

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>
~___~~~___~

Configuration

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

Inspiration

LICENSE

MIT

You can’t perform that action at this time.