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
aitems alitems alignitems align-items	align-items:
animation	animation:
bground background	background:
bgcolor backcolor bcolor backgroundcolor background-color	background-color:
bgimage backimage bimage backgroundimage background-image	background-image:
bgposition backposition bposition backgroundposition background-position	background-position:
bgrepeat backrepeat brepeat backgroundrepeat background-repeat	background-repeat:
bgsize backsize backgroundsize background-size	background-size:
border	border:
bbottom borbottom borderbottom border-bottom	border-bottom:
bbwidth borderbottomwidth border-bottom-width	border-bottom-width:
bcollapse borcollapse collapse bordercollapse border-collapse	border-collapse:
bcolor bocolor borcolor bordercolor border-color	border-color:
borimage borderimage border-image	border-image:
bleft borleft borderleft border-left	border-left:
blwidth borderleftwidth border-left-width	border-left-width:
bradius boradius borderradius border-radius	border-radius:
bright borright borderright border-right	border-right:
brwidth borderrightwidth border-right-width	border-right-width:
btop bortop bordertop border-top	border-top:
btwidth bordertopwidth border-top-width	border-top-width:
bwidth borderwidth border-width	border-width:
bottom	bottom:
bshadow boshadow boxshadow box-shadow	box-shadow:
bsizing bsize boxsize boxsizing box-sizing	box-sizing:
clear	clear:
color	color:
content	content:
cursor	cursor:
direction	direction:
display	display:
flex	flex:
fdirection fldirection fledirection flexdirection flex-direction	flex-direction:
fgrow flgrow flegrow flexgrow flex-grow	flex-grow:
fshrink flshrink fleshrink flexshrink flex-shrink	flex-shrink:
fwrap flwrap flewrap flexwrap flex-wrap	flex-wrap:
float	float:
font	font:
ffamily family fontfamily font-family	font-family:
fsize fosize fontsize font-size	font-size:
fstyle fostyle fontstyle font-style	font-style:
fvariant fovariant fontvariant font-variant	font-variant:
fweight foweight fontweight font-weight	font-weight:
height	height:
jcontent jucontent juscontent justcontent justifycontent justify-content	justify-content:
left	left:
lspacing lespacing letterspacing letter-spacing	letter-spacing:
lheight liheight lineheight line-height	line-height:
margin	margin:
mbottom marbottom marginbottom margin-bottom	margin-bottom:
mleft marleft marginleft margin-left	margin-left:
mright marright marginright margin-right	margin-right:
mtop martop margintop margin-top	margin-top:
xheight mxheight maxheight max-height	max-height:
xwidth mxheight maxwidth max-width	max-width:
mheight minheight min-height	min-height:
mwidth minwidth min-width	min-width:
opacity	opacity:
order	order:
outline	outline:
oflow overflow	overflow:
ox overflowx overflow-x	overflow-x:
oy overflowy overflow-y	overflow-y:
padding	padding:
pbottom padbottom paddingbottom padding-bottom	padding-bottom:
pleft padleft paddingleft padding-left	padding-left:
pright padright paddingright padding-right	padding-right:
ptop padtop paddingtop padding-top	padding-top:
pbafter pagebreakafter page-break-after	page-break-after:
pbbefore pagebreakbefore page-break-before	page-break-before:
perspective	perspective:
porigin perspectiveorigin perspective-origin	perspective-origin:
position	position:
quotes	quotes:
right	right:
tlayout talayout tablelayout table-layout	table-layout:
talign textalign text-align	text-align:
tdecoration textdecoration text-decoration	text-decoration:
tdline textdecorationline text-decoration-line	text-decoration-line:
tindent textindent text-indent	text-indent:
tshadow teshadow textshadow text-shadow	text-shadow:
ttransform texttransform text-transform	text-transform:
top	top:
tform xform transform	transform:
trans tn tsition transition	transition:
tduration transitionduration transition-duration	transition-duration:
valign verticalalign vertical-align	vertical-align:
visibility	visibility:
wspace whispace whspace wispace whitespace white-space	white-space:
width	width:
wbreak wordbreak word-break	word-break:
zindex z-index	z-index:
zoom	zoom:

Statements

Trigger	Content
aicenter	align-items: center
aiend	align-items: flex-end
aistart	align-items: flex-start
aistretch	align-items: stretch
brnorepeat norepeat	background-repeat: no-repeat
brx rx bgrx repeatx	background-repeat: repeat-x
bry ry bgry repeaty	background-repeat: repeat-y
contain	background-size: contain
cover	background-size: cover
bccollapse	border-collapse: collapse
bcseparate	border-collapse: separate
b0	border: 0
bsbox	box-sizing: border-box
bscontent	box-sizing: content-box
bspadding	box-sizing: padding-box
cboth	clear: both
cleft	clear: left
cright	clear: right
content	content: ''
cubusy curbusy	cursor: busy
cupointer curpointer	cursor: pointer
cutext curtext	cursor: text
cuwait curwait	cursor: wait
ltr dirltr	direction: ltr
rtl dirrtl	direction: rtl
dblock	display: block
dflex flex	display: flex
dinline	display: inline
diblock	display: inline-block
diflex	display: inline-flex
dnone	display: none
dtable table	display: table
dtcell cell tablecell table-cell	display: table-cell
dtrow row tablerow table-row	display: table-row
fdcolumn	flex-direction: column
fdcreverse	flex-direction: column-reverse
fdrow	flex-direction: row
fdrreverse	flex-direction: row-reverse
fnowrap	flex-wrap: nowrap
fwrap flexwrap	flex-wrap: wrap
flauto	flex: auto
fleft flleft floleft	float: left
fnone flnone flonone	float: none
fright flright floright	float: right
fsitalic italic	font-style: italic
fnormal	font-style: normal
f100 fw100	font-weight: 100
f200 fw200	font-weight: 200
f300 fw300	font-weight: 300
f400 fw400	font-weight: 400
f500 fw500	font-weight: 500
f600 fw600	font-weight: 600
f700 fw700	font-weight: 700
f800 fw800	font-weight: 800
f900 fw900	font-weight: 900
fwbold bold	font-weight: bold
fwnormal	font-weight: normal
hauto	height: auto
jccenter	justify-content: center
jcend	justify-content: flex-end
jcstart	justify-content: flex-start
mlauto	margin-left: auto
mrauto	margin-right: auto
m0 mo	margin: 0
m0a moa	margin: 0 auto
mauto	margin: auto
oxauto	overflow-x: auto
oxhidden	overflow-x: hidden
oxscroll	overflow-x: scroll
oxvisible	overflow-x: visible
oyauto	overflow-y: auto
oyhidden	overflow-y: hidden
oyscroll	overflow-y: scroll
oyvisible	overflow-y: visible
oauto	overflow: auto
ohidden	overflow: hidden
oscroll	overflow: scroll
ovisible	overflow: visible
p0 po	padding: 0
poabsolute pabsolute absolute	position: absolute
pofixed pfixed fixed	position: fixed
porelative prelative relative	position: relative
postatic pstatic static	position: static
tlauto	table-layout: auto
tlfixed	table-layout: fixed
tacenter center	text-align: center
tajustify justify	text-align: justify
taleft	text-align: left
taright	text-align: right
tdnone	text-decoration: none
tdunderline underline	text-decoration: underline
elip ellipsis toellipsis	text-overflow: ellipsis
tsnone teshnone	text-shadow: none
ttcap	text-transform: capitalize
ttfull	text-transform: full-width
ttlower	text-transform: lowercase
ttnone	text-transform: none
ttupper uppercase	text-transform: uppercase
vabline vabaseline baseline	vertical-align: baseline
vabottom	vertical-align: bottom
vamiddle	vertical-align: middle
vasub	vertical-align: sub
vasuper	vertical-align: super
vattbottom	vertical-align: text-bottom
vattop	vertical-align: text-top
vatop	vertical-align: top
vcollapse viscollapse vicollapse	visibility: collapse
vhidden vishidden vihidden hidden hide	visibility: hidden
vvisible visible	visibility: visible
nowrap	white-space: nowrap
wauto	width: auto