React + Typescript Code Snippets
Forked from https://github.com/infeng/vscode-react-typescript
This extension contains opinionated code snippets for React with Typescript.
VS Marketplace link: https://marketplace.visualstudio.com/items?itemName=weffe.vscode-react-ts-snippets
Installation
In order to install an extension you need to launch the Command Pallete (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. There you have either the option to show the already installed snippets or install new ones.
Launch VS Code Quick Open (Ctrl + P or Cmd + P), paste the following command, and press enter.
ext install weffe.vscode-react-ts-snippets
Alternatively you can open the extensions panel and search for 'React + Typescript Code Snippets'.
Alternative Installation
If you want to manually install the snippets then simply copy the snippets.json content from here: https://raw.githubusercontent.com/Weffe/vscode-react-ts-snippets/master/snippets/snippets.json
Next, in VS Code go to File -> Preferences -> User Snippets
In the popup window, search for typescriptreact and click on the option.
Finally, this will take you to a new window where you can paste in the copied snippets and then save!
Now, you will have access to the snippets across VS Code.
Supported languages (file extensions)
- TypeScript (.ts)
- TypeScript React (.tsx)
Snippets
Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.
| Trigger | Content |
|---|---|
tsrcc → |
class component skeleton |
tsrcfull → |
class component skeleton with Props, State, and constructor |
tsrcjc → |
class component skeleton without import and default export lines |
tsrpcc → |
class purecomponent skeleton |
tsrpcjc → |
class purecomponent without import and default export lines |
tsrpfc → |
pure function component skeleton |
tsrpfcwh → |
pure function component skeleton with hooks |
tsrfc → |
functional component skeleton |
conc → |
class default constructor with props and context |
cwm → |
componentWillMount method |
ren → |
render method |
cdm → |
componentDidMount method |
cwrp → |
componentWillReceiveProps method |
scu → |
shouldComponentUpdate method |
cwu → |
componentWillUpdate method |
cdu → |
componentDidUpdate method |
cwum → |
componentWillUnmount method |
gdsfp → |
getDerivedStateFromProps method |
gsbu → |
getSnapshotBeforeUpdate method |
sst → |
this.setState with object as parameter |
bnd → |
binds the this of method inside the constructor |
met → |
simple method |
imt → |
import a dependency |
imta → |
import everything from a dependency |
imtd → |
import default object from a dependency |
tsrcm → |
Create a React + MobX Component |
tsrcmfull → |
Create a stateful React + MobX Component |
tsrcmrr → |
Create a React + MobX + React-Router Component |
tsrcmrrfull → |
Create a stateful React + MobX + React-Router Component |
License
MIT