tips-tricks-tools/react-snippets.json at main · cloudcity/tips-tricks-tools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
{
	"functional component": {
		"prefix": "fc",
		"body": [
			"import React from 'react'",
			"import PropTypes from 'prop-types'",
			"",
			"export function $TM_FILENAME_BASE(props) {",
			"return (",
			"$0",
			")",
			"}",
			"",
			"$TM_FILENAME_BASE.propTypes = {}"
		],
		"description": "boilerplate for a React functional component"
	},
	"useEffect": {
		"prefix": "useEffect",
		"body": [
			"useEffect(() => {",
			"$0",
			"}, [])"
		],
		"description": "useEffect block"
	},
	"useState": {
		"prefix": "usestate",
		"body": [
			"const [${1:stateName}, set${1/(.)/${1:/upcase}/}] = useState([$2])"
		]
	},
	"disable exhaustive deps": {
		"prefix": "eslexh",
		"body": [
			"//eslint-disable-line react-hooks/exhaustive-deps"
		],
		"description": "ignore eslint warning for hook dependencies"
	},
  	"testFile": {
		"prefix": "test",
		"body": [
			"import React from 'react'",
			"import { ${TM_FILENAME/(.*)\\.test\\..+$/$1/} } from '../${TM_FILENAME/(.*)\\.test\\..+$/$1/}'",
			"",
			"describe('${TM_FILENAME/(.*)\\.test\\..+$/$1/}', () => {",
			"  beforeEach(() => {",
			"    $2",
			"  })",
			"",
			"  describe('render', () => {",
			"    it('renders correctly', () => {",
			"     $3",
			"    })",
			"  })",
			"})"
		],
		"description": "boilerplate for a component test"
	}
}