https://github.com/samuelsimoes/vim-jsx-utils

Plugin with some utilities (like extract partial render, rename tag, select self close tags) to folks who work with JSX on Vim.
https://github.com/samuelsimoes/vim-jsx-utils

closing-tags jsx productivity vim vim-jsx-utils vim-plugin

Last synced: about 4 hours ago
JSON representation

Plugin with some utilities (like extract partial render, rename tag, select self close tags) to folks who work with JSX on Vim.

• Host: GitHub
• URL: https://github.com/samuelsimoes/vim-jsx-utils
• Owner: samuelsimoes
• License: mit
• Created: 2016-04-09T21:55:16.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-22T18:09:41.000Z (over 7 years ago)
• Last Synced: 2024-04-16T00:52:29.096Z (7 months ago)
• Topics: closing-tags, jsx, productivity, vim, vim-jsx-utils, vim-plugin
• Language: Vim script
• Homepage:
• Size: 150 KB
• Stars: 73
• Watchers: 6
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vim-jsx-utils

Plugin with some utilities to folks who work with **[JSX](https://facebook.github.io/jsx/)** on Vim.

:warning: This plugin only expose a [set of functions](#functions). You need create your own mappings to this, like:

```

nnoremap ja :call JSXEncloseReturn()

nnoremap ji :call JSXEachAttributeInLine()

nnoremap je :call JSXExtractPartialPrompt()

nnoremap jc :call JSXChangeTagPrompt()

nnoremap vat :call JSXSelectTag()

```

:warning: All functions must be invoked on the first component line.

## Installation

You can install this plugin with [Pathogen](https://github.com/tpope/vim-pathogen), [Vundle](https://github.com/VundleVim/Vundle.vim) and other plugin loaders.

## Functions

### JSXSelectTag

Select the whole tag, like `vat`, but with a little improvement to select self-closing tags.

### JSXEncloseReturn

Put the current tag on a return statement with parenthesis.

![](examples/enclose-vim.gif)

### JSXEachAttributeInLine

Put each tag attribute's on its own line to better readability.

![](examples/eachline-vim.gif)

### JSXExtractPartialPrompt

:warning: Only ES6 classes

Extract some tag on its own method on a ES6 class.

![](examples/partial-vim.gif)

### JSXChangeTagPrompt

Change the tag name

![](examples/change-vim.gif)

-------

Samuel Simões ~ [@samuelsimoes](https://twitter.com/samuelsimoes) ~ [Blog](http://blog.samuelsimoes.com/)