---

Ⅰ. 插件描述

A Vim plugin that provides functions that modify React source files

Ⅱ. 基本信息

创建日期：  2017-01-15 使用用户：  6 Github星：  25 插件作者：  Mark Volkmann

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:

Plugin 'mvolkmann/vim-react-who-speaks'

… 然后在Vim中运行以下命令:

:source %
:PluginInstall

对于Vundle版本 < 0.10.2，请用上面的Bundle替换Plugin。

使用NeoBundle管理器安装

在你的.vimrc下添加:

NeoBundle 'mvolkmann/vim-react-who-speaks'

… 然后在Vim中运行以下命令:

:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:

Plug 'mvolkmann/vim-react-who-speaks'

… 然后在Vim中运行以下命令:

:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:

cd ~/.vim/bundle
git clone https://github.com/mvolkmann/vim-react

Ⅳ. 文档说明

# vim-react

This plugin provides several functions.

ReactToggleComponent

This function toggles the implementation of a React component
between class-based and functional.
It is mapped to <leader>rt unless that key is already mapped.
Just place the cursor on the first line of an existing
React component definition and run the function to toggle it.

Here is an example of a functional React component.

const Foo = ({bar, baz}) => {
  return (
    <div>
      <div>bar = {bar}</div>
      <div>baz = {baz}</div>
    </div>
  );
};

Foo.displayName = 'Foo';

Foo.propTypes = {
  bar: number,
  baz: string
};

Here is an example of an equivalent class-based React component.

class Foo extends Component {
  static displayName = 'Foo';

  static propTypes = {
    bar: number,
    baz: string
  };

  render() {
    const {bar, baz} = this.props;
    return (
      <div>
        <div>bar = {bar}</div>
        <div>baz = {baz}</div>
      </div>
    );
  }
}

ReactToggleComponent will convert either of these forms to the other.

JSXCommentAdd

This function adds a JSX comment {/* ... */}
around the lines selected in visual mode.
It is mapped to <leader>jc in visual mode
unless that key is already mapped.

JSXCommentRemove

This function removes the JSX comment {/* ... */}
surrounding the current line in normal mode.
It is mapped to <leader>jc in normal mode
unless that key is already mapped.

These functions makes certain assumptions about the code
and the result to be produced.
If you are unhappy with the results, please open an issue and
I will consider making this more configurable.