精华内容
下载资源
问答
  • 前言 开发RN的工具有很多,选择性也比较多,常见的有: WebStorm Sublime Text 3 ...使用Webstorm开发React Native 注:本文默认已配置好React Native开发环境,如:安装JDK,Android SDK,Python,Node,Reac...

    前言

    开发RN的工具有很多,选择性也比较多,常见的有:

    • WebStorm
    • Sublime Text 3
    • VS Code
    • Nuclide
    • 其他

    本文以Webstorm为例讲解

    使用Webstorm开发React Native

    注:本文默认已配置好React Native开发环境,如:安装JDK,Android SDK,Python,Node,React- Native-cli等,若不熟悉,请先看前文的React Native环境配置。

    Webstorm的安装破解请自行百度。

    新建React Native项目

    如下图,左侧选中React Native,右侧的New Project中有三个选项:

    • Location: 项目的存放位置
    • Node interpreter: node位置(安装后会默认选中)
    • React Native: react-native-cli位置(安装后会默认选中)

    React Native构建过程

    React Native构建时,下方会出现构建过程,如没有出错,出现Done,说明项目构建完成

    构建完成后,项目下会出现文件

    • Android文件夹:开发Android对应项目目录
    • IOS文件夹:开发IOS对应项目目录
    • node-modules: 项目依赖类库
      其他的如:App.js,app.json,package.json等将在后文讲解

    进行RN配置

    点击如图所示位置,在弹出的对话框中,修改Name(如本图名字为RN)

    • Name:修改后要展示的名字
    • Target platforms:要运行的平台:Android或IOS

    RN修改后如下图,出现可运行按钮

    点击如图按钮,运行项目

    注:请事先运行模拟器或手机

    运行效果

    原文发布时间:2018年03月02日 

    本文来源CSDN博客如需转载请紧急联系作者

    展开全文
  • Webstorm快捷操作

    2019-02-16 22:27:00
    设置和使用技巧:前端工具开发利器webstrom专篇...更新中 选中行上下移:cl+shift+上下箭头 展示文件结构图:view-tool_window-structure。具体的图标含义 生成注释目录 webstorm提供一个本地文件修改历史记录...

    设置和使用技巧:前端工具开发利器webstrom专篇...更新中

    选中行上下移:cl+shift+上下箭头

    展示文件结构图:view-tool_window-structure。具体的图标含义

    生成注释目录

    webstorm提供一个本地文件修改历史记录(快捷键:ALT+SHIFT+c,Mac中 ALT+Option+c)。也可以 Ctrl + E 弹出最近打开的文件。

     

    js提示比较迟缓:

    File -> Code Completion -> Autopopup in 下 1000改为0

    收藏夹功能:

    当工程目录很庞大时,有些子目录很经常打开,但层级又很深,这时候可以把目录添加到收藏夹里面,添加成功后,左侧有个“Favorites”菜单

    构造器界面:

    注释符合格式的话就会出现。如果是js文件则是js类的函数和对象;css文件的话则是这个css文件的概括;html文件的话则是节点的结构图。话说这几个就是为了方便查看代码的结构性.

    todo界面:

    给代码加todo注释就会出现这个界面

    双栏代码界面:

    右击代码选项卡上的文件,然后右键 -> spilt vertically(左右两屏)或者spilt horizontally(上下两屏)

     

    快捷键:

    ctrl+shift+alt+N:通过一个字符查找函数位置

    通过文件名快速查找工程内的文件:Ctrl + Shift + N

    文件内查找一套操作:ctrl+F  F3 shift+F3

    指定目录内查找:ctrl+shift+F

    文件内替换:ctrl+R

    指定目录内替换:ctrl+shift+F

    快速拆合功能界面模块:alt+[0-9]

    最大区域显示代码(会隐藏其他的功能界面模块):ctrl+shift+F12

    将当前文件加入收藏夹:alt+shift+F

    关闭当前代码选项卡:ctrl+F4

    复制当前行:ctrl+D

    减少缩进:shift+tab

    删除一行:ctrl+Y

    重新开始一行:shift+enter

    光标到代码块的前面或后面:ctrl+]/[

    上一个/下一个方法:alt+up/down

    找到使用/在文件找到使用:Alt + F7/Ctrl + F7 (在编辑器底部展示在哪里被用)

    查看函数源代码:cl+shift+i

    跳转到定义处:Ctrl + B or Ctrl + Click

    跳转到后一个/前一个错误:F2/ Shift + F2

    重新命名文件:Shift + F6

    展开或折叠所有区块:ctl+shift+ -/+,折叠当前ctl+alt+ -/+

    转载于:https://www.cnblogs.com/yaoyao-sun/p/10389554.html

    展开全文
  • 前言前文React Native开发之——Webstorm快捷开发介绍了使用Webstorm快捷开发React Native,本文介绍Webstorm开发RN配置。Webstorm开发RN配置配置文件编码格式注:为避免莫名其妙的问题,本文所使用的编码格式统一...

    前言

    前文React Native开发之——Webstorm快捷开发介绍了使用Webstorm快捷开发React Native,
    本文介绍Webstorm开发RN配置。

    Webstorm开发RN配置

    配置文件编码格式

    注:为避免莫名其妙的问题,本文所使用的编码格式统一设置为”UTF-8”,如图所示Setting->Editor->File Encodings有三处修改,统一改为”UTF-8”。

    设置.js文件默认以jsx的语法打开

    设置方法,File->Default Settings->Languages&Frameworks->JavaScript->Flow

    设置.js文件中支持react-native语法高亮

    设置方法,File->Settings->Languages&Frameworks->JavaScript->Libraries->Download
    在列表中找到react和react-native,Download and Install, 如红框选中,点击OK。


    设置后,如下图:

    设置React Native智能提示

    github有一个开源的插件:ReactNative-LiveTemplate,当输入时有提示效果。
    ReactNative的代码模板,包括:

    • 组件名称
    • Api 名称
    • 所有StyleSheets属性
    • 组件属性新增

    安装

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

    file -> import settings -> ReactNative.jar  
    

    点击OK后,重启Webstorm生效。

     

    验证是否成功

    如下图,当输入style时会有联想提示信息

    至此,Webstorm的配置已基本完成。

    如果您觉得我的文章对您有用,请随意赞赏!
    展开全文
  • 现在的前端开发过程中,难免需要在命令行中敲一些简单的命令;最常见的如npm run dev、npm run build、npm run test等,这些命令还算简单,每天敲十来次也勉强可以接受;但是某些复杂一点的命令,或者命令的参数每次...

    现在的前端开发过程中,难免需要在命令行中敲一些简单的命令;最常见的如npm run dev、npm run build、npm run test等,这些命令还算简单,每天敲十来次也勉强可以接受;但是某些复杂一点的命令,或者命令的参数每次敲的时候都是不定的,这就非常麻烦了。下面以eslint自动修复.vue文件中的错误为例,通过配置Webstorm来自动执行修复操作。

    如果你的项目中做了eslint的配置,鼠标右键点击js文件时,会多一个Fix Eslint Problems的选项,如下图所示;该选项可以根据eslint规则自动修复js文件中出现的常见错误。该选项本质上就是执行了eslint --fix filename.js。

    配置了eslint后,右键.vue文件却不会出现Fix Eslint Problems选项,如果我们希望自动修复.vue文件中的js代码,只能在命令行里操作,并且需要为eslint命令指定文件所在目录以及文件名,或者cd到文件所在目录执行,如eslint --fix 'src/pages/home.vue';每次要修复时,都要这样写,显然不能接受。

    配置Webstorm的Tools,打开settings -> Tools -> External Tools,点击添加按钮,做下图的配置

    $ProjectFileDir$ 指工程所在目录。

    $FilePathRelativeToProjectRoot$ 指文件相对于工程所在的路径。

    如果你全局安装了eslint,也可以将执行程序指定为全局安装目录下的eslint.cmd,需要注意的是,此时,eslint依赖的库也需要全局安装。

    配置完成后,右键点击.vue文件就会出现 External Tools -> eslint fix的选项,点击该选项,就完成了.vue文件的自动修复操作。

    通过配置Webstorm的External Tools,几乎所有命令都不需要自己手动敲了,只要点击两下鼠标。

    我们知道,如果你的项目是用git管理的,Webstorm会将git的一些常见操作集成到备选项中,如下图所示;可以猜测,其原理也和External Tools类似,因此我们完全可以通过类似的方式配置自定义的git命令。

    展开全文
  • 写在前面:该博文主要收录本人在Webstorm...一、Webstorm快捷设置 2.1 设置tab默认缩进值 2.2 设置Node.js智能提示 2.3 设置node_modules扫描忽略 2.4 设置js提示为ES6 二、Webstorm快捷键 1...
  • 现在的前端开发过程中,难免需要在命令行中敲一些简单的命令;最常见的如npm run dev、npm run build、npm run test等,这些命令还算简单,每天敲十来次也勉强可以接受;但是某些复杂一点的命令,或者命令的参数每次...
  • 第一步将ReactNative.xml文件复制到这个文件夹 第二步在setting里面看一下ReactNative是否打钩了~,需要打钩 第三步配置成功的提示 如何修改,记得改完保存
  • 在前端开发的过程中,大部分的工作是写 HTM L和 CSS 代码。手动编写代码的时候,效率会特别低下,因为需要敲打很多尖括号,尽管一些软件给开发者提供了一些能...目前,很多前端开发工具,包括 Webstorm,HBuilder,Dre
  • Webstorm是专用于web开发的编辑器,是一款JavaScript 开发工具 下载地址:http://www.jetbrains.com/webstorm/(官网) 安装步骤: create desktop shortcut是否创建桌面快捷方式,可根据需要选择; .js .css .html...
  • WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaSscript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ ...WebStorm快捷
  • 博主目前正在做前端的开发,使用到了一个十分实用的软件叫webstom,昨天做了一个破解教程的博客,但是审核没有通过,有兴趣的朋友可以私信我。webstom的实用之处就在于它数不胜数的快捷操作大大简化了写代码的繁琐...
  • 由于用eclipse习惯了,对快捷操作对编码代开的便捷也深有体会,对于前端开发工具Webstorm也不例外,网上搜了下,搜到一篇文章,非常感谢,对其部分内容作了修改和丰富(略微一点点)。 转载自原文地址如下,并做了...
  • webstorm模板快速生成

    2021-01-07 16:44:37
    我们在使用webstorm开发项目的时候,有时会重复写多个很相似的代码块,经常要从别的代码处复制粘贴后修修改改。那么能不能将这些重复经常写的代码块抽象出来输入一行命令就能展示呢? 可以,webstorm内置了这个功能...
  • WebStorm使用快速入门

    2020-02-09 21:23:18
    WebStorm建立在开源IntelliJ平台之上,JetBrains已经开发和完善了超过15年。其提供了统一的UI,可与许多流行的版本控制系统配合使用,确保在git,GitHub,SVN,Mercurial和Perforce之间提供一致的用户体验。WebStorm...
  • Webstorm本身是不支持小程序语法的,可以添加补丁包让开发快捷 点击 File ===> import Settings 选中补丁包(点击下载) 重启即可
  • vue: WebStorm设置快速编译运行

    万次阅读 2017-08-08 17:47:15
    WebSorm是一款优秀的前端开发工具,而Vue项目可以使用Node进行编译运行,平常我们可以通过命令行部署项目进行调试。本文介绍设置Webstorm进行快速部署Vue项目。第一步点击启动快捷按钮旁边的向下小箭头,在列表中...
  • webstorm 的安装及各种配置

    千次阅读 2018-07-29 14:33:00
    作为程序员,了解的前端编辑器的种类,和其功能特点必不可少,而笔者在此介绍的这个webstorm编辑器,更适合程序员进行模块化开发,能够建立自己的服务器,自己创建后台接口,访问方便快捷,粗暴,与VUE配合使用,...
  • WebStorm+Chrome开启Live Edit

    千次阅读 2018-05-28 15:12:58
    使用WebStorm做前端开发,Chrome+jb插件进行调试,可以实现Live Edit,所见即所得,极大的加快开发效率工具下载:WebStromChromeChrome JB插件步骤Chrome 配置jb插件安装完成后,桌面上有Chrome的快捷方式双击该快捷方式,...
  • WebStorm 2019下载和安装教程(已测有用)

    万次阅读 多人点赞 2019-07-26 17:08:04
    WebStorm2019是一款功能强大的开发工具,这款强大的web前端开发神器使用为用户提供 了完善的开发必备功能和工具,让大家以更加轻松快捷的方式进行开发编辑操作,WebStorm为您提供JavaScript和编译到JavaScript语言,...
  • 二、WebStorm2017.3安装使用说明

    千次阅读 2018-04-10 11:04:51
    网页编辑软件有很多种,Dreamweaver,Sublime,WebStorm,VS,文本编辑等等,我所使用的是WebStrom2017.3,个人感觉相对于其他编译软件较方便快捷;1.WebStorm简介:WebStorm是一款强大的HTML5/JavaScript的Web前端...
  • WebSorm是一款优秀的前端开发工具,而Vue项目可以使用Node进行编译运行,平常我们可以通过命令行部署项目进行调试。 本文介绍设置Webstorm进行快速部署Vue项目。 第一步 点击启动快捷按钮旁边的向下小箭头,在列表中...
  • Webstorm 中 SASS 环境配置的简易方法

    千次阅读 2018-01-25 11:56:24
    在很多关于 Webstorm 的文章中都提到安装 Ruby 然后配置 SASS 开发环境,但是对于我来说 Ruby 的安装配置太过麻烦,在查阅 NPM 后发现 SASS 其实有一个 Node 版本。叫 node-sass 。利用其搭建了 Webstorm 的 SASS...
  • WebStorm建立在开源IntelliJ平台之上,JetBrains已经开发和完善了超过15年。其提供了统一的UI,可与许多流行的版本控制系统配合使用,确保在git,GitHub,SVN,Mercurial和Perforce之间提供一致的用户体验。WebStorm...
  • 目录 目录 关于WebStorm 自定义各类操作 主题 快捷键 建议其他配置 取消safe write ...快捷链接 ...关于WebStorm ... WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开...
  • 记录一下Emmet语法的使用(开发真的是越来越简单快捷了。。。)

空空如也

空空如也

1 2 3
收藏数 59
精华内容 23
关键字:

webstorm快捷开发