Skip to content

Commit 43331c4

Browse files
infenginfeng
committed
core
1 parent 59d02ff commit 43331c4

File tree

6 files changed

+323
-1
lines changed

6 files changed

+323
-1
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
.DS_Store

‎README.md

+49-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,49 @@
1-
# vscode-react-typescript
1+
# vscode-react-typescript
2+
3+
-------------------
4+
5+
This extension contains code snippets for React with Typescript.
6+
7+
## Installation
8+
9+
In order to install an extension you need to launch the Command Pallete (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions.
10+
There you have either the option to show the already installed snippets or install new ones.
11+
12+
Launch VS Code Quick Open (Ctrl + P or Cmd + P), paste the following command, and press enter.
13+
14+
ext install vscode-react-typescript
15+
16+
Alternatively you can open the extensions panel and search for 'Typescript React code snippets'.
17+
18+
## Supported languages (file extensions)
19+
20+
* TypeScript (.ts)
21+
* TypeScript React (.tsx)
22+
23+
## Snippets
24+
25+
Below is a list of all available snippets and the triggers of each one. The **⇥** means the `TAB` key.
26+
27+
| Trigger | Content |
28+
| -------: | ------- |
29+
| `tsrcc→` | `class component skeleton` |
30+
| `tsrcjc→`| `class component skeleton without import and default export lines` |
31+
| `tsrpcc→`| `class purecomponent skeleton` |
32+
| `tsrpcjc→` | `class purecomponent without import and default export lines` |
33+
| `conc→` | `class default constructor with props and context` |
34+
| `cwm→` | `componentWillMount method` |
35+
| `ren→` | `render method` |
36+
| `cdm→` | `componentDidMount method` |
37+
| `cwrp→` | `componentWillReceiveProps method` |
38+
| `scu→` | `shouldComponentUpdate method` |
39+
| `cwu→` | `componentWillUpdate method` |
40+
| `cdu→` | `componentDidUpdate method` |
41+
| `cwum→` | `componentWillUnmount method` |
42+
| `sst→` | `this.setState with object as parameter` |
43+
| `bnd→` | `binds the this of method inside the constructor` |
44+
| `met→` | `simple method` |
45+
| `tsrrc→` | `react redux container skeleton` |
46+
47+
## License
48+
49+
MIT

‎images/react.png

12.1 KB
Loading

‎package.json

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "vscode-react-typescript",
3+
"version": "0.1.0",
4+
"description": "Code snippets for react in typescript",
5+
"displayName": "Typescript React code snippets",
6+
"publisher": "infeng",
7+
"icon": "images/react.png",
8+
"galleryBanner": {
9+
"theme": "light"
10+
},
11+
"repository": {
12+
"type": "git",
13+
"url": "git+https://github.com/infeng/vscode-react-typescript.git"
14+
},
15+
"engines": {
16+
"vscode": "0.10.x"
17+
},
18+
"categories": [
19+
"Snippets"
20+
],
21+
"keywords": [
22+
"react",
23+
"vscode",
24+
"typescript",
25+
"vscode-extension"
26+
],
27+
"author": "infeng",
28+
"license": "MIT",
29+
"bugs": {
30+
"url": "https://github.com/infeng/vscode-react-typescript/issues"
31+
},
32+
"homepage": "https://github.com/infeng/vscode-react-typescript#readme",
33+
"contributes": {
34+
"snippets": [
35+
{
36+
"language": "typescript",
37+
"path": "./snippets/snippets.json"
38+
},
39+
{
40+
"language": "typescriptreact",
41+
"path": "./snippets/snippets.json"
42+
}
43+
]
44+
}
45+
}

‎snippets/snippets.json

+221
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
{
2+
"React Component": {
3+
"prefix": "tsrcc",
4+
"body": [
5+
"import * as React from 'react';",
6+
"",
7+
"export interface ${1:App}Props {",
8+
"}",
9+
"",
10+
"class ${1:} extends React.Component<${1:}Props, any> {",
11+
" render() {",
12+
" return (",
13+
" <div>",
14+
" ${2:}",
15+
" </div>",
16+
" );",
17+
" }",
18+
"}",
19+
"",
20+
"export default ${1:}",
21+
""
22+
],
23+
"description": "Create a React Component with typescript."
24+
},
25+
"React Component without import and export": {
26+
"prefix": "tsrcjc",
27+
"body": [
28+
"export interface ${1:App}Props {",
29+
"}",
30+
"",
31+
"class ${1:} extends React.Component<${1:}Props, any> {",
32+
" render() {",
33+
" return (",
34+
" <div>",
35+
" ${2:}",
36+
" </div>",
37+
" );",
38+
" }",
39+
"}",
40+
""
41+
],
42+
"description": "Create a React Component without import and export."
43+
},
44+
"React PureComponent": {
45+
"prefix": "tsrpcc",
46+
"body": [
47+
"import * as React from 'react';",
48+
"",
49+
"export interface ${1:App}Props {",
50+
"}",
51+
"",
52+
"class ${1:} extends React.PureComponent<${1:}Props, any> {",
53+
" render() {",
54+
" return (",
55+
" <div>",
56+
" ${2:}",
57+
" </div>",
58+
" );",
59+
" }",
60+
"}",
61+
"",
62+
"export default ${1:}",
63+
""
64+
],
65+
"description": "Create a React PureComponent."
66+
},
67+
"React PureComponent without import and export": {
68+
"prefix": "tsrpcjc",
69+
"body": [
70+
"export interface ${1:App}Props {",
71+
"}",
72+
"",
73+
"class ${1:} extends React.PureComponent<${1:}Props, any> {",
74+
" render() {",
75+
" return (",
76+
" <div>",
77+
" ${2:}",
78+
" </div>",
79+
" );",
80+
" }",
81+
"}",
82+
""
83+
],
84+
"description": "Create a React PureComponent without import and export."
85+
},
86+
"constructor": {
87+
"prefix": "conc",
88+
"body": [
89+
"constructor(props) {",
90+
" super(props);",
91+
"}"
92+
],
93+
"description": "Add a constructor in class."
94+
},
95+
"componentWillMount": {
96+
"prefix": "cwm",
97+
"body": [
98+
"componentWillMount() {",
99+
" ${1:}",
100+
"}"
101+
],
102+
"description": "Invoked immediately before mounting occurs. It is called before render()."
103+
},
104+
"render": {
105+
"prefix": "ren",
106+
"body": [
107+
"render() {",
108+
"return (",
109+
" ${1:}",
110+
");",
111+
"}"
112+
],
113+
"description": "When called, it should examine this.props and this.state and return a single React element."
114+
},
115+
"componentDidMount": {
116+
"prefix": "cdm",
117+
"body": [
118+
"componentDidMount() {",
119+
" ${1:}",
120+
"}"
121+
],
122+
"description": "Invoked immediately after a component is mounted."
123+
},
124+
"componentWillReceiveProps": {
125+
"prefix": "cwrp",
126+
"body": [
127+
"componentWillReceiveProps(nextProps) {",
128+
" ${1:}",
129+
"}"
130+
],
131+
"description": "Invoked before a mounted component receives new props."
132+
},
133+
"shouldComponentUpdate": {
134+
"prefix": "scu",
135+
"body": [
136+
"shouldComponentUpdate(nextProps, nextState) {",
137+
" ${1:}",
138+
"}"
139+
],
140+
"description": "Invoked before rendering when new props or state are being received."
141+
},
142+
"componentWillUpdate": {
143+
"prefix": "cwu",
144+
"body": [
145+
"componentWillUpdate(nextProps, nextState) {",
146+
" ${1:}",
147+
"}"
148+
],
149+
"description": "Invoked immediately before rendering when new props or state are being received."
150+
},
151+
"componentDidUpdate": {
152+
"prefix": "cdu",
153+
"body": [
154+
"componentDidUpdate(prevProps, prevState) {",
155+
" ${1:}",
156+
"}"
157+
],
158+
"description": "Invoked immediately after updating occurs. This method is not called for the initial render"
159+
},
160+
"componentWillUnmount": {
161+
"prefix": "cwum",
162+
"body": [
163+
"componentWillUnmount() {",
164+
" ${1:}",
165+
"}"
166+
],
167+
"description": "Invoked immediately before a component is unmounted and destroyed"
168+
},
169+
"componentSetState": {
170+
"prefix": "sst",
171+
"body": [
172+
"this.setState(${1:});"
173+
],
174+
"description": "Performs a shallow merge of nextState into current state"
175+
},
176+
"bind method": {
177+
"prefix": "bnd",
178+
"body": [
179+
"this.${1:} = this.${1:}.bind(this)"
180+
],
181+
"description": "bind this in method"
182+
},
183+
"method": {
184+
"prefix": "met",
185+
"body": [
186+
"${1:methodName}(${2:e}) {",
187+
" ${3:}",
188+
"}"
189+
],
190+
"description": "Create a method"
191+
},
192+
"React redux container": {
193+
"prefix": "tsrrc",
194+
"body": [
195+
"import * as React from 'react';",
196+
"import { connect } from 'react-redux'",
197+
"",
198+
"export interface ${1:App}Props {",
199+
"}",
200+
"",
201+
"class ${1:} extends React.Component<${1:}Props, any> {",
202+
" render() {",
203+
" return (",
204+
" <div>",
205+
" ${2:}",
206+
" </div>",
207+
" );",
208+
" }",
209+
"}",
210+
"",
211+
"const mapState2Props = state => {",
212+
" return {",
213+
" };",
214+
"}",
215+
"",
216+
"export default connect(mapState2Props)(${1:})",
217+
""
218+
],
219+
"description": "React Redux container"
220+
}
221+
}

‎tsconfig.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"compilerOptions": {
3+
"jsx": "preserve",
4+
"moduleResolution": "node"
5+
}
6+
}

0 commit comments

Comments
 (0)