zl程序教程

您现在的位置是:首页 >  其他

当前栏目

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

2023-04-18 16:59:15 时间

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!"
	}