React-Native-WebStorm代码模版

在React-
Native日常开发中,新建文件或者组件是最常用的操作。可是,在我们新建不同的文件或者组件时,一些代码固定不变,此时,需要重新写一遍就费事费力了,而最常用的操作就是复制,粘贴,修改,重复而无趣。若是不想重复如此无聊的机械动作,又想快速高效的来完成任务,编写代码,那怎么办呢?此时,解决方案出现了。–File
and Code Templates

使用此配置,可减省重复无用的劳动力,真正提升效率。

如果你觉得有用,请点个赞,或者分享给其他朋友。

一:配置有两种方式(以mac配置为例):

一:

1-: 选择Preferences;

2-:搜索框输入Templates;

3-:点击File and Code Templates

4-:选中JavaScript File

5-:删除里面的代码,把以下代码复制进去(此代码可以自定义):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React, { Component } from 'react';



import {



  StyleSheet,



  Text,



  View,



  Image,



} from 'react-native';



export default class  ${NAME}  extends Component {



  render() {



    return (



      <View style={styles.container}>








      </View>



    );



  }



}



const styles = StyleSheet.create({



  container: {



    flex: 1,



  },



});

6-:点击Apply

示例图如下:

二:

1-: 选择Preferences;

2-:搜索框输入Templates;

3-:点击File and Code Templates

4-:点击左上角“+”号按钮

示例图如下:

注意点:

1-:注意新建文件的名字,本例子中取名为:React-Native;

2-:注意Extension的输入框填写为js;

三:使用方式:

分为两种,与上面配置方式一一对应:

一:

1-:点击New ,选择Java Script File;

2-:输入新建文件的名字,并点击OK;

3-:查看新建文件内容为填写的模版内容

二:

1-:点击New ,选择React-Native文件类型(与使用第二中配置方式时新建的名字一一对应);

2-:输入新建文件的名字,并点击OK;

3-:查看新建文件内容为填写的模版内容

四:使用效果截图:

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×