vsCode配置用户代码片段（react）_vscode react代码片段

react类组件代码片段配置
设置—配置用户代码片段—新建全局代码片段

选择新建全局代码片段

输入xxx.js（xxx自定义，我这里用react.js）

然后复制以下代码粘贴到文件中

{
    "Print to console": [{
		"prefix": "react",
		"body": [
			"// 类组件",
			"// 快捷键Ctrl+Win+i 添加注释",
			"import React from 'react';",
			"",
			"class Com extends React.Component {",
			"	constructor(props) {",
			"		super(props)",
			"		this.state = {}",
			"	}",
				"",
			"	// 初始化会执行 相当于componentWillMount",
			"	// 更新会执行 相当于componentWillUpdate",
			"	static getDerivedStateFromProps(nextProps, nextState) {",
			"		return { // 规定要返回数据，和state进行合并更新, state中有同名，否则新增到state中",
			"			// xxx: nextProps.xxx,",
			"		}",
			"	}",
				"",
			"	componentDidMount() {}",
				"",
			"	render() {",
			"		return (",
			"			<div className='content'>",
			"			</div>",
			"		)",
			"	}",
			"}",
			"",
			"export default Com"
		],
		"description": "Log output to console"
	}, {
		"prefix": "reactf",
		"body": [
			"// 函数组件",
			"// 快捷键Ctrl+Win+i 添加注释",
			"import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';"
			"",
			"function Com(props) {",
			"    const [xxx, setXxx] = useState('')",
			"",
			"    useEffect(() => {",
			"        console.log('函数组件来咯')",
			"    }, [])",
			"",
			"    return (",
			"        <div className='content'>",
			"        </div>",
			"    )",
			"}",
			"",
			"export default Com"
		],
		"description": "Log output to console"
	}]
}
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

验证效果
随便打开一个js文件，输入react，回车

自动生成设定的模板，成功！