Introduction
I’m a big fan of speeding up every part of your development. If you shave off seconds here and there multiple times a day, you’ll save a ton of time over the course of a year.
This involves using the keyboard as often as possible and reaching for the mouse as little as possible. It’s a goal of mine to do an entire day without touching the mouse. Still haven’t gotten there.
Learning vim is a big part of being productive in your editor. Even putting vim in your browser with Vimium helps a ton.
Snippets are another way to save time on development. Simple React Snippets for Visual Studio Code by Burke Holland is a great way to speed up development.
Here’s imrc
expanded to import React, { Component } from 'react';
Simple React Snippets can be found in the VS Code Extension Marketplace.
A Quick Example
Whenever starting a new React file, I’ll use the imr
snippet:
imr
Expands to:
import React from 'react'
And the imrc
snippet:
imrc
Expands to:
import React, { Component } from 'react'
After installing the VS Code Extension, you can use the snippets by typing the shortcut and hitting Tab
or Enter
.
Here are the ones I think are most helpful when starting new files:
imr
– Import React
import React from 'react';
imrc
– Import React and Component
import React, { Component } from 'react';
cc
– Make a Class Component and export
class | extends Component {
state = { | },
render() {
return ( | );
}
}
export default |;
sfc
– Make a stateless function component
const | = props => {
return ( | );
};
export default |;
cdm
– componentDidMount
componentDidMount() {
|
}
cdu
– componentDidUpdate
componentDidUpdate(prevProps, prevState) {
|
}
ss
– setState
this.setState({ | : | });
ren
– render
render() {
return (
|
);
}
There are a few more snippets that you can use that you can find on the official page.