WebStorm 开发配置

简介: 1. require黄线问题图1.png配置:File->Settings...->Lanaguages & Frameworks -> JavaScript -> Libraries -> Add...图2.png按图2填写,点击ok,效果图3所示,点击ok即可。

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,调出快捷输入框,选择对应的即可

目录
相关文章
|
5月前
|
JavaScript
使用Webstorm快速启动Vue项目配置
使用Webstorm快速启动Vue项目配置
66 0
|
4月前
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
|
8月前
|
小程序
webstorm开发微信小程序
webstorm开发微信小程序
324 0
|
6月前
|
JavaScript
WebStorm配置代码模板【以vue模板为例,提供vue代码模板】
WebStorm配置代码模板【以vue模板为例,提供vue代码模板】
74 0
|
11月前
|
前端开发
《智能前端技术与实践》——第1章 开发环境配置——1.5 使用 WebStorm
《智能前端技术与实践》——第1章 开发环境配置——1.5 使用 WebStorm
|
11月前
|
前端开发 JavaScript IDE
JavaScript-WebStorm中配置Github并将代码托管到Github
JavaScript-WebStorm中配置Github并将代码托管到Github
74 0
|
JavaScript 前端开发
WebStorm配置【设置左侧及其代码编辑区最舒服的字体】
WebStorm配置【设置左侧及其代码编辑区最舒服的字体】
466 0
WebStorm配置【设置左侧及其代码编辑区最舒服的字体】
|
前端开发 开发工具 Android开发
好用不卡,这些插件和配置让你的 Webstorm 更牛逼!(下)
作为前端开发者,最趁手的搬砖工具无外乎 Webstorm 和 VSCode,Webstorm 像苹果系统,闭源、收费、官方有良好而强大的开发能力、智能索引和补全功能无出其右者,VSCode 就像安卓,开源、持续迭代更新、社区充满活力。 Webstorm 的 2021.3 版更新后,以往卡顿的情况缓解了很多,就算重新安装 node_modules 也不会像以前一样卡死半天,因为卡顿退坑 Webstorm 的小伙伴可以回来看看 😂 在下使用 Webstorm 较多,总结了一些不错的插件和实用 Tips,希望能帮到你~
好用不卡,这些插件和配置让你的 Webstorm 更牛逼!(下)
|
机器学习/深度学习 JavaScript 前端开发
好用不卡,这些插件和配置让你的 Webstorm 更牛逼!(上)
作为前端开发者,最趁手的搬砖工具无外乎 Webstorm 和 VSCode,Webstorm 像苹果系统,闭源、收费、官方有良好而强大的开发能力、智能索引和补全功能无出其右者,VSCode 就像安卓,开源、持续迭代更新、社区充满活力。 Webstorm 的 2021.3 版更新后,以往卡顿的情况缓解了很多,就算重新安装 node_modules 也不会像以前一样卡死半天,因为卡顿退坑 Webstorm 的小伙伴可以回来看看 😂 在下使用 Webstorm 较多,总结了一些不错的插件和实用 Tips,希望能帮到你~
好用不卡,这些插件和配置让你的 Webstorm 更牛逼!(上)
|
存储 前端开发 安全
小马带你认识前端开发神器WebStorm(WebStorm及Git的相关配置与使用)
小马带你认识前端开发神器WebStorm(WebStorm及Git的相关配置与使用)
312 1
小马带你认识前端开发神器WebStorm(WebStorm及Git的相关配置与使用)