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"
}]
}
验证效果
随便打开一个js文件,输入react,回车
自动生成设定的模板,成功!