{"id":13485300,"url":"https://github.com/MaxMEllon/vim-jsx-pretty","last_synced_at":"2025-03-27T17:30:56.223Z","repository":{"id":41534443,"uuid":"62515758","full_name":"MaxMEllon/vim-jsx-pretty","owner":"MaxMEllon","description":":flashlight: [Vim script] JSX and TSX syntax pretty highlighting for vim.","archived":false,"fork":false,"pushed_at":"2021-01-12T07:51:13.000Z","size":177,"stargazers_count":976,"open_issues_count":12,"forks_count":38,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-21T00:07:20.665Z","etag":null,"topics":["jsx","jsx-syntax","react-syntax","tsx","typescript-tsx","vim-javascript","vim-jsx","vim-jsx-pretty"],"latest_commit_sha":null,"homepage":"","language":"Vim script","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MaxMEllon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-03T21:24:33.000Z","updated_at":"2025-03-11T11:25:24.000Z","dependencies_parsed_at":"2022-09-19T21:54:36.609Z","dependency_job_id":null,"html_url":"https://github.com/MaxMEllon/vim-jsx-pretty","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaxMEllon%2Fvim-jsx-pretty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaxMEllon%2Fvim-jsx-pretty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaxMEllon%2Fvim-jsx-pretty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaxMEllon%2Fvim-jsx-pretty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MaxMEllon","download_url":"https://codeload.github.com/MaxMEllon/vim-jsx-pretty/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245892510,"owners_count":20689509,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jsx","jsx-syntax","react-syntax","tsx","typescript-tsx","vim-javascript","vim-jsx","vim-jsx-pretty"],"created_at":"2024-07-31T17:01:54.504Z","updated_at":"2025-03-27T17:30:55.944Z","avatar_url":"https://github.com/MaxMEllon.png","language":"Vim script","readme":"# vim-jsx-pretty\n\nThe React syntax highlighting and indenting plugin for vim. Also supports the typescript tsx file.\n\n## Features\n\n- 📦 Support JSX highlighting and indenting out of the box. No dependencies.\n- 💯 Fully implemented the JSX syntax specification. [https://github.com/facebook/jsx](https://github.com/facebook/jsx)\n- ✨ Support React syntax highlighting and indenting for JSX and typescript TSX files.\n- 🏷 Support JSX syntax highlighting and indenting inside the [tagged template](https://github.com/developit/htm) string.\n- 🎨 Support highlighting the close tag separately from the open tag (set `let g:vim_jsx_pretty_highlight_close_tag = 1` in your vimrc).\n- 💪 Many more [corner test cases](test.jsx) covered.\n- 💅 [Reasonable syntax highlight groups](#syntax-group-list), easy for customization.\n\n## Demo\n\n### Syntax\n\n|vim-jsx-pretty\u003cbr /\u003e(add colorful config)|vim-jsx-pretty|\n|---|---|\n|![vim-jsx-pretty colorful](https://raw.githubusercontent.com/MaxMEllon/demos/master/vim-jsx-pretty/vim-jsx-pretty-colorful.png)|![vim-jsx-pretty](https://raw.githubusercontent.com/MaxMEllon/demos/master/vim-jsx-pretty/vim-jsx-pretty.png)|\n\n### Auto indent\n\n![Auto indent demo](https://raw.githubusercontent.com/MaxMEllon/demos/master/vim-jsx-pretty/auto-indent.gif)\n\n### Support typescript\n\n![typescript demo](https://user-images.githubusercontent.com/9594376/32855974-beb2432a-ca86-11e7-99a4-85c2630aa5d5.png)\n\n## Installation\n\n### vim-plug [https://github.com/junegunn/vim-plug](https://github.com/junegunn/vim-plug)\n\nyour `~/.vimrc`:\n\n- No dependencies\n\n    ```vim\n    Plug 'maxmellon/vim-jsx-pretty'\n    ```\n\n- with: [yuezk/vim-js](https://github.com/yuezk/vim-js) (**Recommended but not required**)\n\n    ```vim\n    Plug 'yuezk/vim-js'\n    Plug 'maxmellon/vim-jsx-pretty'\n    ```\n\n- if you want to highlight tsx files.\n\n    ```vim\n    Plug 'HerringtonDarkholme/yats.vim'\n    \" or Plug 'leafgarland/typescript-vim'\n    Plug 'maxmellon/vim-jsx-pretty'\n    ```\n    \n- Execute command in vim:\n\n    ```vim\n    :so ~/.vimrc\n    :PlugInstall\n    ```\n\n### Using Vim8's package manager\n\n```sh\nmkdir -p ~/.vim/pack/vim-jsx-pretty/start\ncd $_\ngit clone git@github.com:MaxMEllon/vim-jsx-pretty.git\n```\n\n#### For Neovim\n\n```sh\nmkdir -p ~/.local/share/nvim/site/vim-jsx-pretty/start\ncd $_\ngit clone git@github.com:MaxMEllon/vim-jsx-pretty.git\n```\n\n## ⚠️ Work with `vim-polyglot`\n\nSince `vim-polyglot` has already embedded this plugin, if you have installed `vim-polyglot`, you don't need to install this plugin anymore. But the bugfix for this plugin may not ship in `vim-polyglot` in time.\n\nIf you still want to use this plugin, make sure that you put this plugin **ahead** of `vim-polyglot`, and add `let g:polyglot_disabled = ['jsx']` to your `vimrc`.\n\n## Syntax group list\n\n|name|place|\n|---|---|\n|jsxElement| `\u003ctag id=\"sample\"\u003etext\u003c/tag\u003e`\u003cbr /\u003e`~~~~~~~~~~~~~~~~~~~~~~~~~~~`|\n|jsxTag| `\u003ctag id=\"sample\"\u003e`\u003cbr /\u003e`~~~~~~~~~~~~~~~~~`|\n|jsxTagName| `\u003ctag id=\"sample\"\u003e`\u003cbr /\u003e`_~~~_____________`|\n|jsxComponentName| `\u003cCapitals\u003e`\u003cbr /\u003e`_~~~~~~~~_` |\n|jsxAttrib| `\u003ctag id=\"sample\"\u003e`\u003cbr /\u003e`_____~~__________`|\n|jsxEqual| `\u003ctag id=\"sample\"\u003e`\u003cbr /\u003e`_______~_________`|\n|jsxString| `\u003ctag id=\"sample\"\u003e`\u003cbr /\u003e`________~~~~~~~~_`|\n|jsxCloseTag| `\u003c/tag\u003e`\u003cbr /\u003e`~~~~~~` |\n|jsxCloseString| `\u003ctag /\u003e`\u003cbr /\u003e`_____~~` |\n|jsxDot| `\u003cParent.Child\u003e`\u003cbr /\u003e`_______~______` |\n|jsxNamespace| `\u003cfoo:bar\u003e`\u003cbr /\u003e`____~____` |\n|jsxPunct| `\u003ctag\u003e\u003c/tag\u003e`\u003cbr /\u003e`~___~~~___~` |\n\n\n## Configuration\n\n|name|default|description|\n|---|---|---|\n|`g:vim_jsx_pretty_disable_js`|0|Disable the syntax highlighting for js files|\n|`g:vim_jsx_pretty_disable_tsx`|0|Disable the syntax highlighting for tsx files|\n|`g:vim_jsx_pretty_template_tags`|`['html', 'jsx']`|highlight JSX inside the tagged template string, set it to `[]` to disable this feature|\n|`g:vim_jsx_pretty_highlight_close_tag`|0|highlight the close tag separately from the open tag|\n|`g:vim_jsx_pretty_colorful_config`|0|colorful config flag|\n\nColorful style (**vim-javascript only**)\n\n```vim\nlet g:vim_jsx_pretty_colorful_config = 1 \" default 0\n```\n\n## Inspiration\n\n- [vim-jsx](https://github.com/mxw/vim-jsx)\n\n## LICENSE\n\n[MIT](./LICENSE.txt)\n","funding_links":[],"categories":["Vim Script"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMaxMEllon%2Fvim-jsx-pretty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMaxMEllon%2Fvim-jsx-pretty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMaxMEllon%2Fvim-jsx-pretty/lists"}