react ntive snippet的妙用

最新推荐文章于 2024-09-21 09:14:34 发布

曾梦轩

最新推荐文章于 2024-09-21 09:14:34 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/u013751625/article/details/53066970

版权

我们知道很多开发工具新建文件时，在新建的文件里面会多很多默认的代码，这些代码无疑会提升开发效率，今天我谈谈如何在Visual studio code里面添加模板代码。

我们当前默认新建一个文件是空的文本文件和js空文件，所以为了提高效率，改为代码模板的形式：

1.新建代码模板command+shift+P弹出下拉选项输入snippet选择第二项

2.在新的下拉列表中选择“纯文本”在新出现的文本文件的{}中添加如下内容：

"Print to console": {

        "prefix": "react native New",

        "body": [

            "import React, { Component } from 'react';\r\nimport {\r\n  Text,\r\n  View,\r\n  Image,\r\n  StyleSheet\r\n} from 'react-native';",

            "export default class YourComponentName extends Component {",

            "    constructor(props) {",

            "        super(props);",

            "    }",

            "    componentWillMount(){",

            "    }",

            "    componentDidMount(){",

            "    }",

            "    componentWillReceiveProps(nextProps){",

            "    }",

            "    shouldComponentUpdate(){",

            "    }",

            "    componentWillUpdate(){",

            "    }",

            "    componentDidUpdate(){",

            "    }",

            "    componentWillUnmount(){",

            "    }",

            "    render(){",

            "        return(",

            "            <View></View>",

            "        )",

            "    }",

            "}",

            "const styles = StyleSheet.create({",

            "})",

            "$2"

        ],

        "description": "Log output to console"

    }

点击保存，

3.新建文件在文件中输入react native New，选择提示enter一下就把reactnative的生命周期和模板代码都加进去了。