├── .editorconfig ├── README.md └── UltiSnips └── javascript.snippets /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | indent_size = 2 6 | end_of_line = lf 7 | max_line_length = 100 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vim React Snippets 2 | 3 | A Vim snippet library for React in ES6. You may also want to check out [vim-es2015-snippets](https://github.com/epilande/vim-es2015-snippets). 4 | 5 | Requires [UltiSnips](https://github.com/SirVer/ultisnips). 6 | 7 | ![vim-react-snippets](http://i.imgur.com/ImgaW2k.gif) 8 | 9 | ## Installation 10 | 11 | Using [vim-plug](https://github.com/junegunn/vim-plug): 12 | 13 | ```vim 14 | " ES2015 code snippets (Optional) 15 | Plug 'epilande/vim-es2015-snippets' 16 | 17 | " React code snippets 18 | Plug 'epilande/vim-react-snippets' 19 | 20 | " Ultisnips 21 | Plug 'SirVer/ultisnips' 22 | 23 | " Trigger configuration (Optional) 24 | " let g:UltiSnipsExpandTrigger="" 25 | ``` 26 | 27 | ## Usage 28 | 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 ``. 29 | 30 | For example, let's say we have `ListItem.js` 31 | 32 | In Insert mode 33 | 34 | ```javascript 35 | rfc 36 | ``` 37 | 38 | Will expand to 39 | 40 | ```javascript 41 | import React from 'react'; 42 | import PropTypes from 'prop-types'; 43 | import styles from './ListItem.css'; 44 | 45 | function ListItem({ ...props }) { 46 | return ( 47 |
48 | 49 |
50 | ); 51 | } 52 | 53 | ListItem.defaultProps = { 54 | }; 55 | 56 | ListItem.propTypes = { 57 | }; 58 | 59 | export default ListItem; 60 | ``` 61 | 62 | Check out [`UltiSnips/javascript.snippets`](UltiSnips/javascript.snippets) to see all snippets. 63 | 64 | 65 | ## Snippets 66 | 67 | #### Skeleton 68 | 69 | | Trigger | Content | 70 | | -------: | ------- | 71 | | `rrcc→` | React Redux Class Component | 72 | | `rcc→` | React Class Component | 73 | | `rfc→` | React Functional Component | 74 | | `rsc→` | React Styled Component | 75 | | `rsci→` | React Styled Component Interpolation | 76 | 77 | 78 | #### Lifecycle 79 | 80 | | Trigger | Content | 81 | | -------: | ------- | 82 | | `cwm→` | `componentWillMount() {...}` | 83 | | `cdm→` | `componentDidMount() {...}` | 84 | | `cwrp→` | `componentWillReceiveProps(nextProps) {...}` | 85 | | `scup→` | `shouldComponentUpdate(nextProps, nextState) {...}` | 86 | | `cwup→` | `componentWillUpdate(nextProps, nextState) {...}` | 87 | | `cdup→` | `componentDidUpdate(prevProps, prevState) {...}` | 88 | | `cwu→` | `componentWillUnmount() {...}` | 89 | | `ren→` | `render() {...}` | 90 | 91 | 92 | #### PropTypes 93 | 94 | | Trigger | Content | 95 | | -------: | ------- | 96 | | `pt→` | `propTypes {...}` | 97 | | `pt.a→` | `PropTypes.array` | 98 | | `pt.b→` | `PropTypes.bool` | 99 | | `pt.f→` | `PropTypes.func` | 100 | | `pt.n→` | `PropTypes.number` | 101 | | `pt.o→` | `PropTypes.object` | 102 | | `pt.s→` | `PropTypes.string` | 103 | | `pt.no→` | `PropTypes.node` | 104 | | `pt.e→` | `PropTypes.element` | 105 | | `pt.io→` | `PropTypes.instanceOf` | 106 | | `pt.one→` | `PropTypes.oneOf` | 107 | | `pt.onet→` | `PropTypes.oneOfType (Union)` | 108 | | `pt.ao→` | `PropTypes.arrayOf (Instances)` | 109 | | `pt.oo→` | `PropTypes.objectOf` | 110 | | `pt.sh→` | `PropTypes.shape` | 111 | | `ir→` | `isRequired` | 112 | 113 | #### Others 114 | 115 | | Trigger | Content | 116 | | -------: | ------- | 117 | | `props→` | `this.props` | 118 | | `state→` | `this.state` | 119 | | `set→` | `this.setState(...)` | 120 | | `dp→` | `defaultProps {...}` | 121 | | `cn→` | `className` | 122 | | `ref→` | `ref` | 123 | | `pp→` | `${props => props}` | 124 | 125 | #### Hooks 126 | 127 | | Trigger | Content | 128 | | -------: | ------- | 129 | | `us.s→` | `const [state, setState] = useState('');` | 130 | | `us.e→` | `useEffect(() => { });` | 131 | | `us.er→` | `useEffect(() => { return () => {}; });` | 132 | | `us.c→` | `const context = useContext(ctx);` | 133 | | `us.r→` | `const [store, dispatch] = useReducer(storeReducer, initialState);` | 134 | | `us.cb→` | `useCallback(() => { }, []);` | 135 | | `us.m→` | `const memo = useMemo(() => { }, []);` | 136 | -------------------------------------------------------------------------------- /UltiSnips/javascript.snippets: -------------------------------------------------------------------------------- 1 | # React & JSX 2 | snippet rrcc "React Redux Class Component" b 3 | import React, { Component } from 'react'; 4 | import PropTypes from 'prop-types'; 5 | import { connect } from 'react-redux'; 6 | import styles from './${2:$1}.css'; 7 | 8 | class ${1:`!v expand('%:t:r')`} extends Component { 9 | static propTypes = { 10 | children: PropTypes.node, 11 | className: PropTypes.string, 12 | dispatch: PropTypes.func.isRequired, 13 | }; 14 | 15 | constructor(props) { 16 | super(props); 17 | } 18 | 19 | render() { 20 | return ( 21 |
22 | $3 23 |
24 | ); 25 | } 26 | } 27 | 28 | function mapStateToProps(state) { 29 | return {}; 30 | } 31 | 32 | export default connect(mapStateToProps)($1); 33 | endsnippet 34 | 35 | snippet rcc "React Class Component" b 36 | import React, { Component } from 'react'; 37 | import PropTypes from 'prop-types'; 38 | import styles from './${2:$1}.css'; 39 | 40 | class ${1:`!v expand('%:t:r')`} extends Component { 41 | static propTypes = { 42 | ${2:children: PropTypes.node, 43 | className: PropTypes.string,} 44 | }; 45 | 46 | constructor(props) { 47 | super(props); 48 | } 49 | 50 | render() { 51 | return ( 52 | <${3:div} className={styles.base}> 53 | $0 54 | 55 | ); 56 | } 57 | } 58 | 59 | export default $1; 60 | endsnippet 61 | 62 | snippet rfc "React Functional Component" b 63 | import React from 'react'; 64 | import PropTypes from 'prop-types'; 65 | import styles from './${2:$1}.css'; 66 | 67 | function ${1:`!v expand('%:t:r')`}({ $3 }) { 68 | return ( 69 | <${5:div} className={styles.base}> 70 | $0 71 | 72 | ); 73 | } 74 | 75 | $1.defaultProps = {$4}; 76 | 77 | $1.propTypes = {`!p 78 | props = t[3] 79 | 80 | if props: 81 | snip >> 1 82 | for prop in props.split(', '): 83 | snip += prop + ': PropTypes.any,' 84 | ` 85 | }; 86 | 87 | export default $1; 88 | endsnippet 89 | 90 | snippet rsc "React Styled Component" b 91 | import styled from 'styled-components'; 92 | 93 | const ${1:`!v expand('%:t:r')`} = styled.${2:div}\` 94 | $3 95 | \`; 96 | 97 | export default $1; 98 | endsnippet 99 | 100 | snippet rsci "React Styled Component Interpolation" b 101 | import styled, { css } from 'styled-components'; 102 | 103 | const ${1:`!v expand('%:t:r')`} = styled.${2:div}\`${props => css\` 104 | ${3:${props.$4 && \` 105 | $5 106 | \`}} 107 | \`}\`; 108 | 109 | export default $1; 110 | endsnippet 111 | 112 | snippet pp "Get Props" 113 | ${props => props.${1}}; 114 | endsnippet 115 | 116 | snippet cn "className" 117 | className="$1" 118 | endsnippet 119 | 120 | snippet dp "Default Props" b 121 | ${1:`!v expand('%:t:r')`.}defaultProps = { 122 | $2 123 | }; 124 | endsnippet 125 | 126 | snippet set "Set State" 127 | this.setState({ 128 | ${1}: ${2} 129 | }); 130 | endsnippet 131 | 132 | snippet props "Get Property" i 133 | this.props.${1} 134 | endsnippet 135 | 136 | snippet state "Get State" i 137 | this.state.${1} 138 | endsnippet 139 | 140 | snippet ref "Ref" i 141 | ref={${1:ref} => { this.${2:name} = $1; }} 142 | endsnippet 143 | 144 | 145 | # Component Lifecycle 146 | snippet cwm "Component Will Mount" b 147 | componentWillMount() { 148 | $1 149 | } 150 | endsnippet 151 | 152 | snippet cdm "Component Did Mount" b 153 | componentDidMount() { 154 | $1 155 | } 156 | endsnippet 157 | 158 | snippet cwrp "Component Will Receive Props" b 159 | componentWillReceiveProps(nextProps) { 160 | $1 161 | } 162 | endsnippet 163 | 164 | snippet scup "Should Component Update" b 165 | shouldComponentUpdate(nextProps, nextState) { 166 | $1 167 | } 168 | endsnippet 169 | 170 | snippet cwup "Component Will Update" b 171 | componentWillUpdate(nextProps, nextState) { 172 | $1 173 | } 174 | endsnippet 175 | 176 | snippet cdup "Component Did Update" b 177 | componentDidUpdate(prevProps, prevState) { 178 | $1 179 | } 180 | endsnippet 181 | 182 | snippet cwu "Component Will Unmount" b 183 | componentWillUnmount() { 184 | $1 185 | } 186 | endsnippet 187 | 188 | snippet ren "Render" 189 | render() { 190 | return ${1:( 191 | ${2:
${3}
} 192 | );} 193 | } 194 | endsnippet 195 | 196 | 197 | # PropTypes 198 | snippet pt "PropTypes Definition" b 199 | ${1:`!v expand('%:t:r')`.}propTypes = { 200 | ${2:className}: ${3:PropTypes.string}, 201 | }; 202 | endsnippet 203 | 204 | snippet pt.a "PropTypes Array" w 205 | PropTypes.array${1:,} 206 | endsnippet 207 | 208 | snippet pt.b "PropTypes Boolean" w 209 | PropTypes.bool${1:,} 210 | endsnippet 211 | 212 | snippet pt.f "PropTypes Function" w 213 | PropTypes.func${1:,} 214 | endsnippet 215 | 216 | snippet pt.n "PropTypes Number" w 217 | PropTypes.number${1:,} 218 | endsnippet 219 | 220 | snippet pt.o "PropTypes Object" w 221 | PropTypes.object${1:,} 222 | endsnippet 223 | 224 | snippet pt.s "PropType String" w 225 | PropTypes.string${1:,} 226 | endsnippet 227 | 228 | snippet pt.no "PropTypes Node" w 229 | PropTypes.node${1:,} 230 | endsnippet 231 | 232 | snippet pt.e "PropTypes Element" w 233 | PropTypes.element${1:,} 234 | endsnippet 235 | 236 | snippet pt.io "PropTypes instanceOf" w 237 | PropTypes.instanceOf(${2:PropTypes.string})${1:,} 238 | endsnippet 239 | 240 | snippet pt.one "PropTypes oneOf" w 241 | PropTypes.oneOf(['$2'$3])${1:,} 242 | endsnippet 243 | 244 | snippet pt.onet "PropTypes oneOfType" w 245 | PropTypes.oneOfType([ 246 | $2 247 | ])${1:,} 248 | endsnippet 249 | 250 | snippet pt.ao "PropTypes arrayOf" w 251 | PropTypes.arrayOf(${2:PropTypes.string})${1:,} 252 | endsnippet 253 | 254 | snippet pt.oo "PropTypes objectOf" w 255 | PropTypes.objectOf(${2:PropTypes.string})${1:,} 256 | endsnippet 257 | 258 | snippet pt.sh "PropTyes Shape" w 259 | PropTypes.shape({ 260 | $2 261 | })${1:,} 262 | endsnippet 263 | 264 | snippet ir "isRequired" w 265 | isRequired, 266 | endsnippet 267 | 268 | snippet us.s "useState" w 269 | const [$1, set${1/\w+\s*/\u$0/g}] = useState(${3:''})${0:;} 270 | endsnippet 271 | 272 | snippet us.e "useEffect" w 273 | useEffect(() => { 274 | $1 275 | })${0:;} 276 | endsnippet 277 | 278 | snippet us.er "useEffect with return" w 279 | useEffect(() => { 280 | $1 281 | return () => { 282 | $2 283 | }; 284 | })${0:;} 285 | endsnippet 286 | 287 | snippet us.c "useContext" w 288 | const $1 = useContext($2)${0:;} 289 | endsnippet 290 | 291 | snippet us.r "useReducer" w 292 | const [$1, dispatch] = useReducer($1Reducer, ${2:${VISUAL:initialState}}) 293 | const $1Reducer = (state, action) => { 294 | switch (action.type) { 295 | default: 296 | return state; 297 | } 298 | }${0:;} 299 | endsnippet 300 | 301 | snippet us.cb "useCallback" w 302 | useCallback( 303 | () => { 304 | $1 305 | }, 306 | [$2], 307 | )${0:;} 308 | endsnippet 309 | 310 | snippet us.m "useMemo" w 311 | const $1 = useMemo(() => { 312 | $2 313 | }, [$3])${0:;} 314 | endsnippet 315 | 316 | snippet us.rf "useRef" w 317 | const $1 = useRef($2)${0:;} 318 | endsnippet 319 | --------------------------------------------------------------------------------