【taro react】---- VSCode 配置用户代码片段

1. 知识点

1. 生成用户的全局代码片段 json 文件；
2. 快捷键生成代码片段；

2. 生成代码片段配置文件

2.1 方法一

1. 点击【设置】
2. 点击【用户代码片段】
   

2.2 方法二

1. 点击【文件】
2. 点击【首选项】
3. 点击【用户片段】
   

3. 生成配置文件

1. 点击【新代码片段】
2. 输入【jsx.json】
3. 回车生成文件【jsx.json.code-snippets】
4. 这里生成的是全局代码片段，也可以生成针对本项目的代码片段
   

4. 编辑配置文件

1. 复制一个print配置模板
2. prefix 是代码片段快捷输入字符
3. body 是输出的代码片段
4. description 对代码片段的说明
5. 注意：scope 字段需要删除，否则再jsx文件中，配置的代码片段不会提示
   

5. 配置示例

"Print to taro react": {
		"prefix": "treact",
		"body": [
			"import React, { Component } from 'react'",
      "import { View, Text, Image } from '@tarojs/components'",
      "import RuiCustom from '../../component/RuiCustom/RuiCustom'",
      "import Taro from '@tarojs/taro'",
      "",
      "export default class $1 extends Component {",
      "  constructor(props) {",
      "    super(props)",
      "  }",
      "  state = {}",
      "",
      "  componentDidMount(){",
      "    ",
      "  }",
      "  render () {",
      "    return (",
      "      <View>",
      "        <RuiCustom title=\"$2\" showBack={true}></RuiCustom>",
      "      </View>",
      "    )",
      "  }",
      "}"
		],
		"description": "Log output to taro react!"
	}

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

下载

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表