Skip to content

Commit 6a8534a

Browse files
matiasdelgadomatiasdelgado
committed
Merge branch 'develop'
2 parents 98c8bca + 134f63d commit 6a8534a

File tree

8 files changed

+379
-0
lines changed

8 files changed

+379
-0
lines changed

‎.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
indent_style = tab
5+
indent_size = 4
6+
charset = utf-8
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.vscode/launch.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// A launch configuration that launches the extension inside a new window
2+
{
3+
"version": "0.1.0",
4+
"configurations": [
5+
{
6+
"name": "Launch Extension",
7+
"type": "extensionHost",
8+
"request": "launch",
9+
"runtimeExecutable": "${execPath}",
10+
"args": ["--extensionDevelopmentPath=${workspaceRoot}" ]
11+
}
12+
]
13+
}

‎CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Change Log
2+
All notable changes to the "uruit-react-snippets" extension will be documented in this file.
3+
4+
Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
5+
6+
## [Unreleased]
7+
- Initial release

‎README.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# React Snippets for Visual Studio Code
2+
3+
Extension for Visual Studio Code to add snippets for React in ECMA Script 6.
4+
5+
![Extension demo](./images/snippet-demo.gif)
6+
7+
## Usage
8+
9+
Type the snippet prefix and press enter.
10+
11+
```javascript
12+
u-ci // console.info
13+
u-ctor // class constructor
14+
u-impt // import module statement
15+
u-rfc // functional component (stateless)
16+
u-rcc // class component (statefull)
17+
u-it // Jest test `it`
18+
u-desc // Jest test `describe`
19+
u-suite // Jest test suite (with imports)
20+
u-pt // Generic PropType
21+
u-pts // String PropType
22+
u-ptn // Number PropType
23+
u-ptb // Bool PropType
24+
u-ptf // Func PropType
25+
u-pta // Array PropType
26+
u-pto // Object PropType
27+
u-ptsymbol // Symbol PropType
28+
u-pte // Element PropType
29+
u-ptnode // Node PropType
30+
u-ptinstanceof // Instance Of (PropType)
31+
u-ptoneof // One Of (PropType)
32+
u-ptoneoftype // One Of Type (PropType)
33+
u-ptarrayof // Array Of (PropType)
34+
u-ptobjectof // Object Of (PropType)
35+
u-ptshape // Shape (PropType)
36+
u-ptany // Any PropType
37+
u-ptcustom // Custom PropType
38+
u-ptcustomarrayof // Custom ArrayOf PropType
39+
u-actions // Redux actions
40+
u-action // Redux action
41+
```
42+
43+
## Installation
44+
45+
Install through VS Code extensions. Search for UruIT React Snippets
46+
47+
[Visual Studio Code Market Place: UruIT React Snippets]()
48+
49+
Can also be installed using
50+
51+
```bash
52+
ext install uruit-react-snippets
53+
```

‎images/snippet-demo.gif

4.4 MB
Loading

‎images/uruit-logo.png

1.88 KB
Loading

‎package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "uruit-react-snippets",
3+
"displayName": "Uruit React Snippets",
4+
"description": "",
5+
"version": "0.0.1",
6+
"publisher": "UruIT",
7+
"icon": "./images/uruit-logo.png",
8+
"engines": {
9+
"vscode": "^1.13.0"
10+
},
11+
"categories": [
12+
"Snippets"
13+
],
14+
"homepage": "https://github.com/UruIT/vscode-react-snippets",
15+
"repository": {
16+
"type": "git",
17+
"url": "https://github.com/UruIT/vscode-react-snippets.git"
18+
},
19+
"bugs": {
20+
"url": "https://github.com/UruIT/vscode-react-snippets/issues"
21+
},
22+
"contributes": {
23+
"snippets": [
24+
{
25+
"language": "javascript",
26+
"path": "./snippets/snippets.json"
27+
}
28+
]
29+
}
30+
}

‎snippets/snippets.json

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
{
2+
"Print to console": {
3+
"prefix": "u-ci",
4+
"body": [
5+
"console.info('$1');"
6+
],
7+
"description": "Log output to console"
8+
},
9+
"Class Constructor": {
10+
"prefix": "u-ctor",
11+
"body": [
12+
"constructor(props) {",
13+
"\tsuper(props);",
14+
"\t$0",
15+
"}"
16+
],
17+
"description": "Class constructor"
18+
},
19+
"Import Statement": {
20+
"prefix": "u-impt",
21+
"body": [
22+
"import $2 from '$1';$0"
23+
],
24+
"description": "Import module"
25+
},
26+
"Stateless component": {
27+
"prefix": "u-rfc",
28+
"body": [
29+
"import React from 'react';",
30+
"import PropTypes from 'prop-types';",
31+
"import styles from './$1.scss';",
32+
"",
33+
"export default function $1({ $2 }) {",
34+
"\treturn (",
35+
"\t\t$0",
36+
"\t);",
37+
"}",
38+
"",
39+
"$1.propTypes = {",
40+
"\t$2: PropTypes.$3.isRequired",
41+
"};"
42+
],
43+
"description": "Stateless component"
44+
},
45+
"Stateful component": {
46+
"prefix": "u-rcc",
47+
"body": [
48+
"import React from 'react';",
49+
"import PropTypes from 'prop-types';",
50+
"import styles from './$1.scss';",
51+
"",
52+
"export default class $1 extends React.Component {",
53+
"\trender() {",
54+
"\t\t$0",
55+
"\t}",
56+
"}",
57+
"",
58+
"$1.propTypes = {",
59+
"",
60+
"};"
61+
],
62+
"description": "Stateful component"
63+
},
64+
"Test": {
65+
"prefix": "u-it",
66+
"body": [
67+
"it('$1', () => {",
68+
"\tconst wrapper = shallow(<$2 />);",
69+
"\texpect(wrapper.$0).toBeTruthy();",
70+
"});"
71+
],
72+
"description": "New unit test"
73+
},
74+
"Test Suite": {
75+
"prefix": "u-desc",
76+
"body": [
77+
"describe('$1', () => {",
78+
"\t$0",
79+
"});"
80+
],
81+
"description": "New test suite"
82+
},
83+
"Test Suite File": {
84+
"prefix": "u-suite",
85+
"body": [
86+
"import React from 'react';",
87+
"import $1 from './$1';",
88+
"import renderer from 'react-test-renderer';",
89+
"import { shallow } from 'enzyme';",
90+
"",
91+
"describe('$1', () => {",
92+
"\tit('should render', () => {",
93+
"\t\tconst wrapper = shallow(<$1 />);",
94+
"\t\texpect(wrapper.find('div').node).toBeTruthy();",
95+
"\t});",
96+
"});"
97+
],
98+
"description": "Jest Test Suite"
99+
},
100+
"PropTypes": {
101+
"prefix": "u-pt",
102+
"body": [
103+
"$1: PropTypes.$2.isRequired"
104+
],
105+
"description": "React PropType"
106+
},
107+
"PropTypes.String": {
108+
"prefix": "u-pts",
109+
"body": [
110+
"$1: PropTypes.string.isRequired$2"
111+
],
112+
"description": "React PropType String"
113+
},
114+
"PropTypes.Number": {
115+
"prefix": "u-ptn",
116+
"body": [
117+
"$1: PropTypes.number.isRequired$2"
118+
],
119+
"description": "React PropType Number"
120+
},
121+
"PropTypes.Bool": {
122+
"prefix": "u-ptb",
123+
"body": [
124+
"$1: PropTypes.bool.isRequired$2"
125+
],
126+
"description": "React PropType Bool"
127+
},
128+
"PropTypes.Func": {
129+
"prefix": "u-ptf",
130+
"body": [
131+
"$1: PropTypes.func.isRequired$2"
132+
],
133+
"description": "React PropType Func"
134+
},
135+
"PropTypes.Array": {
136+
"prefix": "u-pta",
137+
"body": [
138+
"$1: PropTypes.array.isRequired$2"
139+
],
140+
"description": "React PropType Array"
141+
},
142+
"PropTypes.Object": {
143+
"prefix": "u-pto",
144+
"body": [
145+
"$1: PropTypes.object.isRequired$2"
146+
],
147+
"description": "React PropType Object"
148+
},
149+
"PropTypes.Symbol": {
150+
"prefix": "u-ptsymbol",
151+
"body": [
152+
"$1: PropTypes.symbol.isRequired$2"
153+
],
154+
"description": "React PropType Symbol"
155+
},
156+
"PropTypes.Element": {
157+
"prefix": "u-pte",
158+
"body": [
159+
"$1: PropTypes.element.isRequired$2"
160+
],
161+
"description": "React PropType Element"
162+
},
163+
"PropTypes.Node": {
164+
"prefix": "u-ptnode",
165+
"body": [
166+
"$1: PropTypes.node.isRequired$2"
167+
],
168+
"description": "React PropType Node"
169+
},
170+
"PropTypes.InstanceOf": {
171+
"prefix": "u-ptinstanceof",
172+
"body": [
173+
"$1: PropTypes.instanceOf($2)$3"
174+
],
175+
"description": "React PropType InstanceOf"
176+
},
177+
"PropTypes.OneOf": {
178+
"prefix": "u-ptoneof",
179+
"body": [
180+
"$1: PropTypes.oneOf([$2])$3"
181+
],
182+
"description": "React PropType OneOf"
183+
},
184+
"PropTypes.OneOfType": {
185+
"prefix": "u-ptoneoftype",
186+
"body": [
187+
"$1: PropTypes.oneOfType([PropTypes.$2])$3"
188+
],
189+
"description": "React PropType OneOfType"
190+
},
191+
"PropTypes.ArrayOf": {
192+
"prefix": "u-ptarrayof",
193+
"body": [
194+
"$1: PropTypes.arrayOf(PropTypes.$2).isRequired$3"
195+
],
196+
"description": "React PropType ArrayOf"
197+
},
198+
"PropTypes.ObjectOf": {
199+
"prefix": "u-ptobjectof",
200+
"body": [
201+
"$1: PropTypes.objectOf(PropTypes.$2).isRequired$3"
202+
],
203+
"description": "React PropType Object"
204+
},
205+
"PropTypes.Shape": {
206+
"prefix": "u-ptshape",
207+
"body": [
208+
"$1: PropTypes.shape({$2}).isRequired$3"
209+
],
210+
"description": "React PropType Shape"
211+
},
212+
"PropTypes.Any": {
213+
"prefix": "u-ptany",
214+
"body": [
215+
"$1: PropTypes.any.isRequired$2"
216+
],
217+
"description": "React PropType Any"
218+
},
219+
"PropTypes.CustomProp": {
220+
"prefix": "u-ptcustom",
221+
"body": [
222+
"function (props, propName, componentName) {",
223+
"\tif (!/$1/.test(props[propName])) {",
224+
"\t\treturn new Error(`Invalid prop '${propName}' supplied to '${componentName}'. Validation $2`);",
225+
"\t}",
226+
"}"
227+
],
228+
"description": "React PropType Any"
229+
},
230+
"PropTypes.CustomArrayProp": {
231+
"prefix": "u-ptcustomarrayof",
232+
"body": [
233+
"PropTypes.arrayOf(function (propValue, key, componentName, location, propFullName) {",
234+
"\tif (!/$1/.test(propValue[key])) {",
235+
"\t\treturn new Error(`Invalid prop '${propFullName}' supplied to '${componentName}'. Validation $2`);",
236+
"\t}",
237+
"})"
238+
],
239+
"description": "React PropType Any"
240+
},
241+
"Redux actions": {
242+
"prefix": "u-actions",
243+
"body": [
244+
"import { call, put, takeLatest } from 'redux-saga/effects';",
245+
"",
246+
"export const $1 = '$1';",
247+
"export const $2 = () => ({",
248+
"\ttype: $1",
249+
"});",
250+
"",
251+
"export default function* watch$3() {",
252+
"\tyield takeLatest($1, $4);",
253+
"}"
254+
],
255+
"description": "Redux actions"
256+
},
257+
"Redux action": {
258+
"prefix": "u-action",
259+
"body": [
260+
"export const $1 = '$1';",
261+
"export const $2 = () => ({",
262+
"\ttype: $1",
263+
"});"
264+
],
265+
"description": "Redux action"
266+
}
267+
}

0 commit comments

Comments
 (0)