163

GitHub - MaxMEllon/vim-jsx-pretty: [Vim script] React JSX syntax pretty highligh...

 5 years ago
source link: https://github.com/MaxMEllon/vim-jsx-pretty
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

vim-jsx-pretty

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 (with vim-javascript)

Auto indent demo

  • support typescript

typescript demo

Requirement

or

Installation

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

your ~/.vimrc:

  • with: vim-javascript (Recommendation)

    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'

  • with: yajs.vim (If you use neovim, doesn't work.)

    Plug 'othree/yajs.vim'
Plug 'maxmellon/vim-jsx-pretty'

    If you want to use yajs.vim, you have to manually install indent config. Because, yajs.vim not include indent config.

    $ mkdir -p ~/.vim/after/indent # if you use `nvim`, then ~/.config/nvim/after/indent
$ wget https://github.com/pangloss/vim-javascript/blob/master/indent/javascript.vim -O ~/.vim/after/indent/javascript.vim

  • Execute command in vim:

    :so ~/.vimrc
:PlugInstall

Configuration

name default description g:vim_jsx_pretty_enable_jsx_highlight 1 jsx highlight flag g:vim_jsx_pretty_colorful_config 0 colorful config flag

If you set g:vim_jsx_pretty_enable_jsx_highlight, Disable jsx highlight. But highlight group is set to jsx syntax. So you should set manual highlight setting.

let g:vim_jsx_pretty_enable_jsx_highlight = 0 " default 1

Colorful style (vim-javascript only)

let g:vim_jsx_pretty_colorful_config = 1 " default 0

Syntax group list

name place jsxTag <tag id="sample">
~~~~~~~~~~~~~~~~~ jsxTagName <tag id="sample">
_~~~_____________ jsxjsxAttrib <tag id="sample">
_____~~__________ jsxEqual <tag id="sample">
_______~_________ jsxString <tag id="sample">
________~~~~~~~~_ jsxCloseTag </tag> ｜ <tag />
~~~~~~ ｜ _____~~

Inspiration

LICENSE

MIT


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK