---

Ⅰ. 插件描述

React Native code snippets for vim

Ⅱ. 基本信息

创建日期：  2016-10-08 使用用户：  4 Github星：  3 插件作者：  Joël Matelli

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:

Plugin 'tellijo/vim-react-native-snippets'

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

:source %
:PluginInstall

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

使用NeoBundle管理器安装

在你的.vimrc下添加:

NeoBundle 'tellijo/vim-react-native-snippets'

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

:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:

Plug 'tellijo/vim-react-native-snippets'

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

:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:

cd ~/.vim/bundle
git clone https://github.com/tellijo/vim-react-native-snippets

Ⅳ. 文档说明

# Vim React Native Snippets

A Vim snippet library for React Native in ES6. You may also want to check out vim-es2015-snippets.

Requires UltiSnips.

Installation

Using vim-plug:

" React Native code snippets
Plug 'tellijo/vim-react-native-snippets'

Usage

In a JavaScript or JSX file, type a trigger name while in Insert mode, then press Ultisnips trigger key. In my case I have it mapped to <C-l>.

For example, let's say we have ListItem.js

In Insert mode

rncc<C-l>

Will expand to

import React, { Component } from 'react'
import { PropTypes } from 'prop-types'
import { View, StyleSheet } from 'react-native'
import styles from './ListItem.css'

class ListItem expends Component {
    static propTypes = {
        children: PropTypes.node,
        className: PropTypes.string
    }
    
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {}
})

export default ListItem

Snippets

Skeleton

Trigger	Content
rncc→	React Native Class Component