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.
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'.
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
- TypeScript (.ts)
- TypeScript React (.tsx)
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 |
MIT