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