vscode-react-typescript-jss

This extension contains code snippets for React with Typescript with JSS. It was forked and modified from infeng's https://github.com/infeng/vscode-react-typescript.

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 vscode-react-typescript-jss

Alternatively you can open the extensions panel and search for 'Typescript React + JSS code snippets'.

Assumptions

The code generated by the snippets assumes that you are using Typescript + React + JSS for styling

The component has its own folder, with the style and react code in it.
The react file is named "index.tsx"
The style file is named "index.jss.ts"
The style uses a theme kept in a separated file, shared by all components

Ex:

- button
    + index.tsx
    + index.jss.ts 
- sidebar
    + index.tsx
    + index.jss.ts
...
+ theme.ts
...

This code organization is actually used in https://melhorplano.net

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 boilerplate`
`tsjss→`	`component style boilerplate`
`tsrcsc→`	`class component boilerplate with Props, State, and constructor`
`tsrfc`	`function component boilerplate`
`tsrcrdx`	`react component with redux boilerplate`
`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`
`sst→`	`this.setState with object as parameter`
`bnd→`	`binds the this of method inside the constructor`
`met→`	`simple method`
`imt`	`create a import`

License

MIT

Typescript React + JSS code snippets