Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Typescript React + JSS code snippetsNew to Visual Studio Code? Get it now.
Typescript React + JSS code snippets

Typescript React + JSS code snippets

Pedro Israel

|
2,809 installs
| (0) | Free
Code snippets for react in typescript with JSS
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft