WebStrom开发ReactNative设置代码自动提示

最新推荐文章于 2025-04-10 23:30:38 发布
转载 最新推荐文章于 2025-04-10 23:30:38 发布 · 2k 阅读 · 1

本文详细介绍如何在不同版本的WebStorm中安装React Native Live Template，包括从ReactNative.jar更新到XML文件的方法，以及如何利用这些模板提高开发效率。

安装

方法一 由于ReactNative.jar更新不方便而且过于陈旧，强烈建议使用方法二进行安装，ReactNative.jar 也会删除

file -> import settings -> ReactNative.jar

方法二

Mac下安装

提示：如果没有templates 文件夹，你可以手动创建一个

webstorm11安装路径

将ReactNative.xml复制到 ~/Library/Preferences/WebStorm11/templates

webstorm2016.2安装路径

将ReactNative.xml复制到 ~/Library/Preferences/WebStorm2016.2/templates

webstorm2017.1安装路径

将ReactNative.xml复制到 ~/Library/Preferences/WebStorm2017.1/templates

webstorm2017.2安装路径

将ReactNative.xml复制到 ~/Library/Preferences/WebStorm2017.2/templates

重启 WebStorm

使用方法

通用方法

直接输入 组件 或 Api 名称的首字母，比如想要 View，只要输入 V 自动提示代码里就会看到 View

StyleSheet属性提示

首先按下 command + J，然后输入属性名的 首字母

如：输入 f，会自动提示 fontSize, fontFamily, fontStyle...等等

 

转自一下

https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

React Native —— webstorm搭建React Native开发环境
且听风吟的博客
04-25 763
1、下载安装node.js 安装之前检查是否已有node.js环境： cmd 命令下输入node -v, 出现版本号，说明已经成功安装了node.js环境 ，如下图所示： 2、安装 react native 脚手架工具 如果之前全局安装过旧的react-native-cli命令行工具，先使用npm uninstall -g react-native-cli 命令卸载掉，再进行全局安装它，以避免产生一些冲突问题。 安装成功后会有提示 验证： 3、安装 Webstorm 官网下载 Webstorm 安装包：
精选资源
ReactNative-LiveTemplate-Webstorm.zip
05-25
"ReactNative-LiveTemplate-Webstorm.zip"这个压缩包文件是为WebStorm定制的React Native开发环境配置，包含了特定的代码模板和设置，旨在提升React Native开发者在WebStorm中的编码效率。 在解压这个文件后，用户...
WebStorm开发工具设置React Native代码智能提醒
{竹子}
03-04 726
在做React Native开发时，最常用的开发工具有 webStorm ,sublime ,appcode等，很多人都希望开发工具有智能提醒功能，然而我们使用上述开发工具进行React Native开发时并没有较好的提示功能。今天给大家介绍一款插件Webstrom live template  使webStrom支持React Native开发智能提醒。下面进入正题 插件下载地址htt
ReactNative智能提示.jar(WebStorm)
03-09
ReactNative智能提示.jar(WebStorm)
WebStorm 集成 ReactNative 插件
01-13
WebStorm 集成 ReactNative 插件,reactnative 代码提示 ReactNative的代码模板,包括: 1. 组件名称 2. Api 名称 3. 所有StyleSheets属性 4. 组件属性 [2015-12-25]新增
WebStorm下ReactNative代码提示设置
weixin_30501857的博客
03-03 117
ReactNative 代码智能提醒 （Webstrom live template） https://github.com/virtoolswebplayer/ReactNative-LiveTemplate ReactNative的代码模板,包括: 1.组件名称 2.Api 名称 3.所有StyleSheets属性 4.React组件 安装 方法一 file -> ...
ReactNative 代码智能提醒(webstorm开发工具)
飞翔的熊blabla
07-22 399
ReactNative 代码智能提醒 （Webstrom live template） git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate 说明 ReactNative的代码模板,包括: 1.组件名称 2.Api 名称 3.所有StyleSheets属性 4.React组件 安装 方法...
解决webstrom开发RN不能智能提示的问题React-native.jar包7z
03-24
解决webstrom开发react-native不能智能提示的问题，下载本包ReactNative.jar File-Manage IDE Settings-import Settings选择下载的包即可。
webstorm中react-native插件
08-29
windows使用方法：file -> import settings -> ReactNative.jar
webstorm 中 ReactNative 设置代码智能提示
梦家之家
05-24 2461
ReactNative 代码智能提醒 （Webstrom live template）git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate 说明ReactNative的代码模板,包括:组件名称Api 名称所有StyleSheets属性React组件 安装 方法一 file -> import sett...
ReactNative环境的配置和webstorm的使用
03-21
ReactNative环境的配置（包括windows版本和ios版本）和webstorm的使用
react native 专用 android studio
01-14
react native 专用 android studio 共6个 6个一起解压
React Native代码提示工具
weixin_33871366的博客
07-19 746
使用WebStorm编写RN程序，尤其是写JSX语法部分时候，对于刚刚接触RN开发的我来说是很
react-native Alert组件
热门推荐
卓原的进化之旅
06-26 1万+
Alert是一个提示对话框，包含对应的标题和信息。 RN有默认的alert方法可以使用，例如：alert('哈哈哈')但是太过单一，只能弹出一个文字 如果想弹出稍微复杂点的，例如原生的有很多按钮的提示框则需要Alert组件。 首先来看一下文档的描述： iOS： 在iOS上你可以指定任意数量的按钮。每个按钮还都可以指定自己的样式，此外还可以指定提示的类别。参阅AlertIOS来了解更多细节
ReactNative——仿微信toast提示
TaoLee
10-23 2922
首先看一下微信的带图片的toast 是什么样子的： 没错就是这个样子，不得不说微信的提示窗口还是比较设计的实用+美观的。一个方形带图片和文字的提示窗；实现之前需要考虑的内容：1提示组件必须是全局的任何地方都可以调用； 2样式如何实现；首先看一个开源库react-native-root-siblings这个库解决了我们要考虑的第一个问题。它可以给root组件添加兄弟组件。这就实现在app 显示
react-native中的toast提示框
AnitaSun的博客
03-28 1429
Toast 在common文件夹下新建Toast文件夹，把这里面的两个文件放进去（Toast） Toast.js// Toast.js 'use strict'; import React, { Component } from 'react'; import { View } from 'react-native'; import Overlay from '../Overlay/Overlay'; import ToastView from './ToastView'; export defa
react-native-popper：打造自定义弹出提示的利器
最新发布
gitblog_00666的博客
04-10 690
react-native-popper：打造自定义弹出提示的利器 在现代移动应用开发中，用户交互体验的重要性日益凸显。良好的交互设计能够显著提升用户满意度，而弹窗（Popover）和工具提示（Tooltip）是其中不可或缺的元素。今天，我们就来介绍一个开源项目——react-native-popper，它可以帮助开发者轻松创建完全自定义的弹窗和工具提示。 项目介绍 react-native-pop...
WebStrom配置React-Native开发环境
libinbin147256369的博客
07-23 1184
WebStrom配置React-Native开发环境 1.配置语法 打开file->settings->Languages&Frameworks->JavaScript->React JSX 2.下载react和react-native库 打开settings->Languages&Framewor...
React-native 无法智能提示代码
weixin_44403301的博客
02-27 1055
无法智能提示代码 解决办法： #1.全局安装typings npm install -g typings #2.进入react-native项目 根目录下 ： typings install dt~react-native --save 函数式组件及其特点 #1.组件不会被实例化,整体渲染性能得到提升 #2.组件不能访问this对象 #3.组件无法访问生命周期的方法 #4.组件只能访问输入的pro...
webstrom的frida代码提示
07-09
WebStorm是一款集成开发环境（IDE），它集成了Frida插件，使得开发者可以在编写JavaScript代码时获得Frida相关的智能提示。Frida是一个动态代码插桩工具，允许你在运行时修改、调试和 hook 应用程序。当你在WebStorm...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值