vogelino's dotfiles

Vim, Zsh and other terminal tools, configs and sugar.

Tips

Vim

Vim built in

Bring next line up: shift + J

vim-surround

Replace surrounding characters: cs<toReplace><replaceWith>

Move cursor inside quotes or brackets, type cs + the existing surround character + the character you which to replace with.

Tip: For brackets, use closing brackets as a replacement character if you want to avoid surrounding spaces.

Wrap selection with surrounding characters: In selection mode > S<surroundWith>

Select the text you wish to wrap, type S + the existing surround character + the character you which to replace with.

Tip: in both cases it is possible to use xml-like syntaxes such as HTML or JSX

Vim argumentative

Shifting arguments with <, and >,
Moving between argument boundaries with [, and ],
New text objects a, and i,

tComment

Press leader + m to toggle comments on a line, multiple lines or selected text

Vim utilsnips

In insert mode, type the snippet trigger and hit → (tab key)

vim-es2015-snippets

Trigger	Content
`=>`	Arrow function
`=>>`	Inline arrow function
`c=>`	Arrow function in a constant
`:`	Key-value pair in object
`c(onst)?`	A const
`l(et)?`	A let
`i(mport\|mp\|m)?`	import statement
`e(xport\|xp\|x)?`	export statement
`e(xport\|xp\|x)?`	import & export statements at once
`expf`	non-arrow function export
`fun*`	generator function
`class`	class
`cl`	console.log
`r`	return statement
`:f`	method in object
`.(map\|filter\|forEach\|reduce)`	FP method on an array
`.(map\|filter\|forEach\|reduce)=`	Inline FP method on an array

vim-react-snippets

Snippets

Skeleton

Trigger	Content
`rrcc→`	React Redux Class Component
`rcc→`	React Class Component
`rfc→`	React Functional Component
`rsc→`	React Styled Component
`rsci→`	React Styled Component Interpolation

Lifecycle

Trigger	Content
`cwm→`	`componentWillMount() {...}`
`cdm→`	`componentDidMount() {...}`
`cwrp→`	`componentWillReceiveProps(nextProps) {...}`
`scup→`	`shouldComponentUpdate(nextProps, nextState) {...}`
`cwup→`	`componentWillUpdate(nextProps, nextState) {...}`
`cdup→`	`componentDidUpdate(prevProps, prevState) {...}`
`cwu→`	`componentWillUnmount() {...}`
`ren→`	`render() {...}`

PropTypes

Trigger	Content
`pt→`	`propTypes {...}`
`pt.a→`	`PropTypes.array`
`pt.b→`	`PropTypes.bool`
`pt.f→`	`PropTypes.func`
`pt.n→`	`PropTypes.number`
`pt.o→`	`PropTypes.object`
`pt.s→`	`PropTypes.string`
`pt.no→`	`PropTypes.node`
`pt.e→`	`PropTypes.element`
`pt.io→`	`PropTypes.instanceOf`
`pt.one→`	`PropTypes.oneOf`
`pt.onet→`	`PropTypes.oneOfType (Union)`
`pt.ao→`	`PropTypes.arrayOf (Instances)`
`pt.oo→`	`PropTypes.objectOf`
`pt.sh→`	`PropTypes.shape`
`ir→`	`isRequired`

Others

Trigger	Content
`props→`	`this.props`
`state→`	`this.state`
`set→`	`this.setState(...)`
`dp→`	`defaultProps {...}`
`cn→`	`className`
`ref→`	`ref`
`pp→`	`${props => props}`

Hooks

Trigger	Content
`us.s→`	`const [state, setState] = useState('');`
`us.e→`	`useEffect(() => { });`
`us.er→`	`useEffect(() => { return () => {}; });`
`us.c→`	`const context = useContext(ctx);`
`us.r→`	`const [store, dispatch] = useReducer(storeReducer, initialState);`
`us.cb→`	`useCallback(() => { }, []);`
`us.m→`	`const memo = useMemo(() => { }, []);`

vim-hyperstyle

Properties

Trigger	Content
`ai`tems `al`items alignitems align-items	align-items:
`an`imation	animation:
`bg`round `ba`ckground	background:
`bgc`olor `backc`olor `bc`olor backgroundcolor background-color	background-color:
`bgi`mage `backi`mage `bi`mage backgroundimage background-image	background-image:
`bgp`osition `backp`osition `bp`osition backgroundposition background-position	background-position:
`bgre`peat `backr`epeat `bre`peat backgroundrepeat background-repeat	background-repeat:
`bgs`ize `backs`ize backgroundsize background-size	background-size:
`bo`rder	border:
`bb`ottom `borb`ottom borderbottom border-bottom	border-bottom:
`bbw`idth borderbottomwidth border-bottom-width	border-bottom-width:
`bcoll`apse borcollapse `coll`apse bordercollapse border-collapse	border-collapse:
bcolor `boc`olor `borc`olor bordercolor border-color	border-color:
`bori`mage borderimage border-image	border-image:
`bl`eft `borl`eft borderleft border-left	border-left:
`blw`idth borderleftwidth border-left-width	border-left-width:
`bra`dius `bora`dius borderradius border-radius	border-radius:
`bri`ght `borr`ight borderright border-right	border-right:
`brw`idth borderrightwidth border-right-width	border-right-width:
`bt`op `bort`op bordertop border-top	border-top:
`btw`idth bordertopwidth border-top-width	border-top-width:
`bw`idth borderwidth border-width	border-width:
`bot`tom	bottom:
`bs`hadow `bos`hadow `box`shadow box-shadow	box-shadow:
`bsi`zing `bsize` `boxsi`ze boxsizing box-sizing	box-sizing:
`cl`ear	clear:
`c`olor	color:
`con`tent	content:
`cu`rsor	cursor:
`dir`ection	direction:
`d`isplay	display:
`fle`x	flex:
`fd`irection `fld`irection `fled`irection `flexd`irection flex-direction	flex-direction:
`fg`row `flg`row `fleg`row `flexg`row `flex-`grow	flex-grow:
`fsh`rink `fls`hrink `fles`hrink `flexs`hrink flex-shrink	flex-shrink:
`fwr`ap `flw`rap `flew`rap `flexw`rap flex-wrap	flex-wrap:
`fl`oat	float:
`f`ont	font:
`ff`amily `fa`mily `fontf`amily font-family	font-family:
`fs`ize `fos`ize `fonts`ize `font-`size	font-size:
`fst`yle `fost`yle fontstyle font-style	font-style:
`fv`ariant `fov`ariant `fontv`ariant font-variant	font-variant:
`fw`eight `fow`eight `fontw`eight font-weight	font-weight:
`h`eight	height:
`j`content jucontent juscontent justcontent justifycontent justify-content	justify-content:
`l`eft	left:
`ls`pacing `les`pacing `let`terspacing letter-spacing	letter-spacing:
`lh`eight `lih`eight `lin`eheight line-height	line-height:
`m`argin	margin:
`mb`ottom `marb`ottom marginbottom margin-bottom	margin-bottom:
`ml`eft `marl`eft marginleft margin-left	margin-left:
`mr`ight `marr`ight marginright margin-right	margin-right:
`mt`op `mart`op margintop margin-top	margin-top:
`x`height `mx`height `max`height max-height	max-height:
`xw`idth `m`xheight `maxw`idth `max-w`idth	max-width:
`mh`eight `mi`nheight min-height	min-height:
`mw`idth `minw`idth `min-w`idth	min-width:
`op`acity	opacity:
`or`der	order:
`o`utline	outline:
`of`low `ov`erflow	overflow:
`ox` overflowx overflow-x	overflow-x:
`oy` overflowy overflow-y	overflow-y:
`pa`dding	padding:
`pb`ottom `padb`ottom paddingbottom padding-bottom	padding-bottom:
`pl`eft `padl`eft paddingleft padding-left	padding-left:
`pr`ight `padr`ight paddingright padding-right	padding-right:
`pt`op `padt`op paddingtop padding-top	padding-top:
`pba`fter `pag`ebreakafter page-break-after	page-break-after:
`pbb`efore pagebreakbefore page-break-before	page-break-before:
`pe`rspective	perspective:
`por`igin perspectiveorigin perspective-origin	perspective-origin:
`po`sition	position:
`q`uotes	quotes:
`r`ight	right:
`tl`ayout `tala`yout `tab`lelayout table-layout	table-layout:
`ta`lign `te`xtalign text-align	text-align:
`td`ecoration `textd`ecoration text-decoration	text-decoration:
`tdl`ine textdecorationline text-decoration-line	text-decoration-line:
`ti`ndent `texti`ndent text-indent	text-indent:
`tsh`adow `tes`hadow `texts`hadow text-shadow	text-shadow:
`tt`ransform `textt`ransform text-transform	text-transform:
`t`op	top:
`tf`orm `xf`orm transform	transform:
`tr`ans `tn` `ts`ition transition	transition:
`tdu`ration transitionduration transition-duration	transition-duration:
`v`align verticalalign vertical-align	vertical-align:
`vi`sibility	visibility:
`ws`pace `wh`ispace whspace `wis`pace whitespace white-space	white-space:
`w`idth	width:
`wb`reak `wo`rdbreak word-break	word-break:
`z`index z-index	z-index:
`zo`om	zoom:

Statements

Trigger	Content
`aic`enter	align-items: center
`aie`nd	align-items: flex-end
`ai`start	align-items: flex-start
`aistr`etch	align-items: stretch
`brn`orepeat `n`orepeat	background-repeat: no-repeat
`brx` `rx` `bg`rx `re`peatx	background-repeat: repeat-x
`bry` `ry` `bgry` repeaty	background-repeat: repeat-y
`con`tain	background-size: contain
`co`ver	background-size: cover
`bc`collapse	border-collapse: collapse
`bcs`eparate	border-collapse: separate
`b0`	border: 0
`bs`box	box-sizing: border-box
`bsc`ontent	box-sizing: content-box
`bsp`adding	box-sizing: padding-box
`cb`oth	clear: both
`cl`eft	clear: left
`cr`ight	clear: right
`conte`nt	content: ''
`cub`usy `curb`usy	cursor: busy
`cu`pointer curpointer	cursor: pointer
`cut`ext `curt`ext	cursor: text
`cuw`ait `curw`ait	cursor: wait
`l`tr `dir`ltr	direction: ltr
`rt`l `dirr`tl	direction: rtl
`d`block	display: block
`df`lex `flex`	display: flex
`di`nline	display: inline
`dib`lock	display: inline-block
`dif`lex	display: inline-flex
`dn`one	display: none
`dt`able `t`able	display: table
`dtc`ell `c`ell tablecell table-cell	display: table-cell
`dtr`ow `r`ow tablerow table-row	display: table-row
`fdc`olumn	flex-direction: column
`fdcr`everse	flex-direction: column-reverse
`fd`row	flex-direction: row
`fdrr`everse	flex-direction: row-reverse
`fnow`rap	flex-wrap: nowrap
`fwr`ap `flexw`rap	flex-wrap: wrap
`fla`uto	flex: auto
`f`left flleft floleft	float: left
`fn`one `fln`one `flon`one	float: none
`fr`ight `flr`ight `flor`ight	float: right
`fs`italic `it`alic	font-style: italic
`fnor`mal	font-style: normal
`f1`00 `fw1`00	font-weight: 100
`f2`00 `fw2`00	font-weight: 200
`f3`00 `fw3`00	font-weight: 300
`f4`00 `fw4`00	font-weight: 400
`f5`00 `fw5`00	font-weight: 500
`f6`00 `fw6`00	font-weight: 600
`f7`00 `fw7`00	font-weight: 700
`f8`00 `fw8`00	font-weight: 800
`f9`00 `fw9`00	font-weight: 900
`fwb`old `bo`ld	font-weight: bold
`fw`normal	font-weight: normal
`ha`uto	height: auto
`jc`center	justify-content: center
`jce`nd	justify-content: flex-end
`jcs`tart	justify-content: flex-start
`ml`auto	margin-left: auto
`mr`auto	margin-right: auto
`m`0 `mo`	margin: 0
`m0a` `moa`	margin: 0 auto
`ma`uto	margin: auto
`oxa`uto	overflow-x: auto
`ox`hidden	overflow-x: hidden
`oxs`croll	overflow-x: scroll
`oxv`isible	overflow-x: visible
`oya`uto	overflow-y: auto
`oy`hidden	overflow-y: hidden
`oys`croll	overflow-y: scroll
`oyv`isible	overflow-y: visible
`oa`uto	overflow: auto
`o`hidden	overflow: hidden
`os`croll	overflow: scroll
`ov`isible	overflow: visible
`p0` `po`	padding: 0
`poa`bsolute `pa`bsolute `ab`solute	position: absolute
`pof`ixed `pf`ixed `fi`xed	position: fixed
`por`elative `pr`elative `rel`ative	position: relative
`pos`tatic `ps`tatic `s`tatic	position: static
`tla`uto	table-layout: auto
`tl`fixed	table-layout: fixed
`tac`enter `cen`ter	text-align: center
`taj`ustify `j`ustify	text-align: justify
`tal`eft	text-align: left
`tar`ight	text-align: right
`tdn`one	text-decoration: none
`td`underline `un`derline	text-decoration: underline
`e`lip ellipsis `to`ellipsis	text-overflow: ellipsis
`ts`none `te`shnone	text-shadow: none
`ttc`ap	text-transform: capitalize
`ttf`ull	text-transform: full-width
`ttl`ower	text-transform: lowercase
`ttn`one	text-transform: none
`tt`upper `u`ppercase	text-transform: uppercase
`vabl`ine `vaba`seline `ba`seline	vertical-align: baseline
`vab`ottom	vertical-align: bottom
`v`amiddle	vertical-align: middle
`vas`ub	vertical-align: sub
`vasup`er	vertical-align: super
`vattb`ottom	vertical-align: text-bottom
`vatt`op	vertical-align: text-top
`vat`op	vertical-align: top
`vc`ollapse `visc`ollapse `vic`ollapse	visibility: collapse
`vh`idden `vish`idden `vih`idden `h`idden `hide`	visibility: hidden
`vv`isible `vi`sible	visibility: visible
`now`rap	white-space: nowrap
`w`auto	width: auto

vogelino / dotfiles