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

1. 知识点

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

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

2.1 方法一

  1. 点击【设置】
  2. 点击【用户代码片段】
    【taro react】---- VSCode 配置用户代码片段_第1张图片

2.2 方法二

  1. 点击【文件】
  2. 点击【首选项】
  3. 点击【用户片段】
    【taro react】---- VSCode 配置用户代码片段_第2张图片

3. 生成配置文件

  1. 点击【新代码片段】
  2. 输入【jsx.json】
  3. 回车生成文件【jsx.json.code-snippets】
  4. 这里生成的是全局代码片段,也可以生成针对本项目的代码片段
    【taro react】---- VSCode 配置用户代码片段_第3张图片

4. 编辑配置文件

  1. 复制一个print配置模板
  2. prefix 是代码片段快捷输入字符
  3. body 是输出的代码片段
  4. description 对代码片段的说明
  5. 注意:scope 字段需要删除,否则再jsx文件中,配置的代码片段不会提示
    【taro react】---- VSCode 配置用户代码片段_第4张图片

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 (",
      "      ",
      "        ",
      "      ",
      "    )",
      "  }",
      "}"
		],
		"description": "Log output to taro react!"
	}

WXRUI体验二维码

WXRUI体验码

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

下载

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

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

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

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

微信小程序实例列表

前端笔记列表

游戏列表

你可能感兴趣的:(taro,React,----VSCode,vscode,react.js)