WebStorm 开发配置

  1. 云栖社区>
  2. 博客>
  3. 正文

WebStorm 开发配置

凌浩雨 2018-06-08 11:39:00 浏览574
展开阅读全文

1. require黄线问题

img_0c9bf54db0105797a3c6cf3cfc120e71.png
图1.png

配置:
File->Settings...->Lanaguages & Frameworks -> JavaScript -> Libraries -> Add...
img_a58a1acd09a23d197436fc1601cab116.png
图2.png

按图2填写,点击ok,效果图3所示,点击ok即可。
img_2f10321ae8d63e31c129ce8d4de9d8b5.png
图3.png

2. 设置代码缩进

File -> Settings... -> Editor -> Code Style -> JavaScript,设置数据如下


img_b11b33737264cdce3eea2dcb50c5ca5c.png
图3.png

3. 代码提示插件

ReactNative-LiveTemplate
file -> import settings -> ReactNative.jar

4. 设置JavaScript模板

File -> Settings... -> Editor -> File and Code Templates -> Files -> JavaScript File,设置模板内容为

import React, { PureComponent } from 'react';
import {
    StyleSheet,
    View
} from 'react-native';

/**
 * @FileName: ${NAME}
 * @Author: ${USER} 
 * @Date: ${DATE}
 * @Description: ${CONTENT}
 */
class ${NAME} extends PureComponent {
    render() {
        return(
            <View style={styles.container}>
            
            </View>
        )
    }
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#DDD'
    }
});

/**
 * 导出当前Module
 */
module.exports = ${NAME};

5. 自定义注释

File -> Settings... -> Editor -> Live Templates -> JavaScript, 点击右侧加号,

/**
 * 
 * @author mazaiting
 */
img_34ac632747ff33ff50f49bfecac1cbe8.png
图4.png

使用: Windows下Ctrl+J,调出快捷输入框,选择对应的即可

网友评论

登录后评论
0/500
评论
凌浩雨
+ 关注