精华内容
下载资源
问答
  • 前言 开发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博客如需转载请紧急联系作者

    展开全文
  • Sublime Text、webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: 一、快速编写HTML代码 1. ...

    Sublime Text、webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:

    一、快速编写HTML代码

    1.  初始化 

    HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键: 

    • html:5 或!:用于HTML5文档类型
    • html:xt:用于XHTML过渡文档类型
    • html:4s:用于HTML4严格文档类型

    2.  轻松添加类、id、文本和属性

    连续输入元素名称和ID,编译器会自动为你补全,比如输入p#foo:

    连续输入类和id,比如p.bar#foo,会自动生成:

        <p class="bar" id="foo"></p>  

    下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#],就可以自动生成如下代码:

    <h1>foo</h1>  <a href="#"></a>  

    3.  嵌套 

    现在你只需要1行代码就可以实现标签的嵌套。

    • >:子元素符号,表示嵌套的元素
    • +:同级标签符号
    • ^:可以使该符号前的标签提升一行

    效果如下图所示: 

    4.  分组 

    你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码: 

    <div class="foo">      <h1></h1>  </div>  <div class="bar">       <h2></h2>  </div>  

    5.  隐式标签 

    声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。

    在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。现在如果只输入.item,编译器会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。 

    下面是所有的隐式标签名称: 

      • li:用于ul和ol中
      • tr:用于table、tbody、thead和tfoot中
      • td:用于tr中
      • option:用于select和optgroup中

     

    6.  定义多个元素 

    要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码:

    <ul>        <li></li>        <li></li>        <li></li>  </ul>

    7.  定义多个带属性的元素 

    如果输入 ul>li.item$*3,将会生成如下代码: 

    <ul>        <li class="item1"></li>        <li class="item2"></li>        <li class="item3"></li>  </ul>  

    二、CSS缩写

    1.  值

    比如要定义元素的宽度,只需输入w100,即可生成 

    width: 100px;  

    除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下:

    height: 10%;   margin: 5em;  

    单位别名列表: 

      • p 表示%
      • e 表示 em
      • x 表示 ex

    2.  附加属性

    可能你之前已经了解了一些缩写,比如 @f,可以生成:

    @font-face {    font-family:;    src:url();  } 

    一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成:

        @font-face {        font-family: 'FontName';        src: url('FileName.eot');        src: url('FileName.eot?#iefix') format('embedded-opentype'),           url('FileName.woff') format('woff'),           url('FileName.ttf') format('truetype'),           url('FileName.svg#FontName') format('svg');        font-style: normal;        font-weight: normal;      }  

    3.  模糊匹配

    如果有些缩写你拿不准,编译器会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:

    overflow: hidden;  

    4.  供应商前缀

    如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入trs,则会生成:

        -webkit-transform: ;      -moz-transform: ;      -ms-transform: ;      -o-transform: ;      transform: ;  

    你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:

        -webkit-super-foo: ;      -moz-super-foo: ;      -ms-super-foo: ;      -o-super-foo: ;      super-foo: ;  

    如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:

    -webkit-transform: ;  -moz-transform: ;  transform: ; 

    前缀缩写如下: 

      • w 表示 -webkit-
      • m 表示 -moz-
      • s 表示 -ms-
      • o 表示 -o-

    5.  渐变

    输入lg(left, #fff 50%, #000),会生成如下代码:

    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));  background-image: -webkit-linear-gradient(left, #fff 50%, #000);  background-image: -moz-linear-gradient(left, #fff 50%, #000);  background-image: -o-linear-gradient(left, #fff 50%, #000);  background-image: linear-gradient(left, #fff 50%, #000);

     

    =========================================================================================

     

    如在 “网络开发方面“ 遇到问题的  或  有项目需求,可加我微信:

    (专注:SEO优化营销、网站定制【PC站、微站、手机站、商城】、网络系统定制、微信小程序开发;10年技术经验)

    转载于:https://www.cnblogs.com/yeYu168/p/9424957.html

    展开全文
  • webstorm默认的快捷键   Alt+F2 可以选择打开的浏览器种类,上下键或者鼠标选择 Ctrl+/或者Ctrl+Shift+/ 注释 Ctrl+Shift+A  快速查找并使用编辑器所有功能 Ctrl+Alt+S 打开编辑器的配置窗口 ...

    webstorm默认的快捷键

     

    Alt+F2可以选择打开的浏览器种类,上下键或者鼠标选择
    Ctrl+/或者Ctrl+Shift+/注释
    Ctrl+Shift+A    快速查找并使用编辑器所有功能
    Ctrl+Alt+S打开编辑器的配置窗口
    Alt+Insert新建一个文件或其他
    Shift+Tab/Tab减少或扩大缩进
    Alt+F1查找代码在其他界面模块的位置
    Shift+F6重构重命名
    Ctrl+X删除行,剪切当前行,可以粘贴
    Ctrl+D复制行
    Ctrl+G查找行
    Ctrl+Shift+Up/Down代码向上/下移动
    F2或Shift+F2高亮错误或警告快速定位
    标签名+tab补全代码
    选中文本后按Ctrl+Shift+F7高亮显示所有该文本,按Esc消失
    Ctrl+B或Ctrl+鼠标左键单击快速打开光标处的类或方法
    Ctrl+Alt+B跳转方法实现处
    Ctrl+Shift+L打开自定义快速查找
    Alt+Up/Down跳转到上一个/下一个方法
    Ctrl+E最近打开的文件
    Alt+F1查找代码所在的位置

    Alt+Ctrl+L

    格式化代码
    Ctrl+R替换文本 
    Ctrl+F查找文本
    Ctrl+P方法参数提示
    F3查找下一个
    Shift+F3查找上一个
    Alt+Shift+F将当前文件加入收藏夹
    Ctrl+Shift+N通过文件名快速查找工程内的文件(重要)
    Ctrl+Shift+Alt+N通过一个字符快速查找位置 (重要)
    Shift+Enter重新开始一行
    Ctrl+Shift+U光标所在位置单词大小写
    Ctrl+Delete删除文字到结束位置
    Ctrl+Baskspace删除文字到开始位置
    Ctrl+E弹出最近打开的文件
    F11切换标记
    Ctrl+Shift+F12切换最大化编辑器
    Ctrl+Y撤销操作
    按住Alt点击多行操作
    Ctrl+G跳转指定行


     

     

     

     

     

    展开全文
  • webstorm快捷方式

    2016-06-28 23:33:00
    刚开始在使用webstrom的时候,不知道快捷方式,感觉自己把webstorm当做记事本使用,真的挺傻的,在朋友的指导下,原来webstorm快捷方式 一、界面操作   快捷键 说明 ctrl+shift+N 通过...

    刚开始在使用webstrom的时候,不知道快捷方式,感觉自己把webstorm当做记事本使用,真的挺傻的,在朋友的指导下,原来webstorm有快捷方式

    一、界面操作

           

     

    快捷键说明
    ctrl+shift+N通过文件名快速查找工程内的文件(必记)
    ctrl+shift+alt+N通过一个字符快速查找位置(必记)
    ctrl+F在文件内快速查找代码
    F3查找下一个
    shift+F3查找上一个
    ctrl+R文件内代码替换
    ctrl+shift+R指定目录内代码批量替换
    ctrl+shift+F指定目录内代码批量查找
    ctrl+R文件内代码替换
    快捷键说明
    ctrl+shift+A快速查找并使用编辑器所有功能(必记)
    alt+[0-9]快速拆合功能界面模块
    ctrl+shift+F12最大区域显示代码(会隐藏其他的功能界面模块)
    alt+shift+F将当前文件加入收藏夹
    ctrl+alt+s打开配置窗口
    ctrl+tab切换代码选项卡(还要进行此选择,效率差些)
    alt+<-或->切换代码选项卡

    界面操作

    快捷键说明
    ctrl+shift+N通过文件名快速查找工程内的文件(必记)
    ctrl+shift+alt+N通过一个字符快速查找位置(必记)
    ctrl+F在文件内快速查找代码
    F3查找下一个
    shift+F3查找上一个
    ctrl+R文件内代码替换
    ctrl+shift+R指定目录内代码批量替换
    ctrl+shift+F指定目录内代码批量查找
    ctrl+R文件内代码替换

    代码编辑

    快捷键说明
    ctrl+shift+A快速查找并使用编辑器所有功能(必记)
    alt+[0-9]快速拆合功能界面模块
    ctrl+shift+F12最大区域显示代码(会隐藏其他的功能界面模块)
    alt+shift+F将当前文件加入收藏夹
    ctrl+alt+s打开配置窗口
    ctrl+tab切换代码选项卡(还要进行此选择,效率差些)
    alt+<-或->切换代码选项卡
    ctrl+F4关闭当前代码选项卡

    导航

    快捷键说明
    ctrl+D复制当前行
    ctrl+W选中单词
    ctrl+<-或->以单词作为边界跳光标位置
    alt+Insert新建一个文件或其他
    ctrl+alt+L格式化代码
    shift+tab/tab减少/扩大缩进(可以在代码中减少行缩进)
    ctrl+Y删除一行
    shift+enter重新开始一行(无论光标在哪个位置)

     

    快捷键说明
    esc进入代码编辑区域
    alt+F1查找代码在其他界面模块的位置,颇为有用
    ctrl+G到指定行的代码
    ctrl+]/[光标到代码块的前面或后面
    alt+up/down上一个/下一个方法
    快捷键说明
    ctrl+C提交代码
    ctrl+p向远程版本库推送更新
    ctrl+G到指定行的代码
    ctrl+]/[光标到代码块的前面或后面
    alt+up/down上一个/下一个方法

     

    2、webstorm快捷键:

    IntelliJ-Idea 的快捷键

    Ctrl+/ 或 Ctrl+Shift+/

    注释(// 或者/*…*/ )

    Shift+F6

    重构-重命名

    Ctrl+X

    删除行

    Ctrl+D

    复制行

    Ctrl+G

    查找行

    Ctrl+Shift+Up/Down

    代码向上/下移动。

    F2 或Shift+F2

    高亮错误或警告快速定位

    写代码,按Tab

    生成代码

    选中文本,按Ctrl+Shift+F7

    高亮显示所有该文本,按Esc高亮消失。

    Ctrl+B

    快速打开光标处的类或方法

    Ctrl+E

    最近打开的文件

    Alt+F1

    查找代码所在位置

    Ctrl+Alt+L

    格式化代码

    Ctrl+R

    替换文本

    Ctrl+F

    查找文本

    Ctrl+P

    方法参数提示

    Ctrl+shift+c

    拷贝文件路径

    Ctrl+alt+shift+c

    拷贝相关数据 包括路径和所在行

    Ctrl+shift+v

    从历史记录中粘贴

     

    ctrl+Y                  

    删除整行                       

    ctrl+shift+enter

    新建行

    ctrl+alt+enter

    在当前行前面新建行

     

    3、zencoding-输入左边缩写,按下tab键就ok啦

    html:5                   

    html5结构

    link:css

    引入css

    script:src

    引入js

    script

    html中插入js

    ul+

    ul及一个li

    a:link

    <a href=”http://”></a>

    a:mail

    <a
    href=”mailto:“></a>

    form:get

    get表单

    input:hidden

    hidden输入框

    div#name

    id:name

    div.name

    class:name

    div.one.two

    class:one,two

    head>link:css

    head加link

    p+p

    两个p

    p*3

    3个p

    ul>li.item$*6

    创建ul下有个li同时class分别为item1,item2.。。

    pos

    postion,组合可用pos:s|a|r|f

    t

    top,组合a auto

    r

    right,组合 a

    l

    left

    b

    bottom

    z

    z-index

    fl

    float

    cl

    clear

    d

    display 组合可用n|b|i|ib

    v

    visibility

    ov

    overflow

    zoo

    zoom:1

    cp

    clip

    bx

    box-sizing

    bxsh:w

    -webkit-box-shadow:
    0 0 0 #000;

    3、window快捷键

     

    序号

    快捷键

    功能

    1

    Windows+ “Space”

    透明化所有窗口,快速查看桌面

    2

    Windows+ “↑”

    使当前使用的窗口最大化

    3

    Windows+ “←”

    使当前使用中的窗口贴向屏幕左侧,只占用50%的显示器面积。

    4

    Windows + Shift+ “→”

    跨显示器右移窗口s

    5

    Windows + Home

    突出显示当前窗口。最小化其他的非当前使用中的窗口

    6

    Windows + R

    打开运行。

    7

    CTRL+T

    功打开新标签。

    8

    Window+d

    最小化所有窗口

    9

    window+f

    搜索文件夹

    10

    window+e

    打开资源管理器

    11

    ctrl+n

    新建文件夹

    12

    ctrl+o

    打开“打开文件”的对话框

    13

    ctrl+p

    打印

    14

    ctrl+shift+l

    word中自动编号

    15

    ctrl+k

    word中自动添加超链接

    这些是自己在网上找到的材料,我把它总结下来,希望能帮助刚开始学前段的朋友,快速的入门,以及快速的从事前端页面的开发中

    转载于:https://www.cnblogs.com/Moshimol/p/5625385.html

    展开全文
  • Webstorm快捷执行命令行命令

    千次阅读 2017-05-15 16:01:32
    现在的前端开发过程中,难免需要在命令行中敲一些简单的命令;最常见的如npm run dev、npm run build、npm run test等,这些命令还算简单,每天敲十来次也勉强可以接受;但是某些复杂一点的命令,或者命令的参数每次...
  • 写在前面:该博文主要收录本人在Webstorm...一、Webstorm快捷设置 2.1 设置tab默认缩进值 2.2 设置Node.js智能提示 2.3 设置node_modules扫描忽略 2.4 设置js提示为ES6 二、Webstorm快捷键 1...
  • 在前端开发的过程中,大部分的工作是写 HTM L和 CSS 代码。手动编写代码的时候,效率会特别低下,因为需要敲打很多尖括号,尽管一些软件给开发者提供了一些能...目前,很多前端开发工具,包括 Webstorm,HBuilder,Dre
  • WebStorm 2019下载和安装教程(已测有用)

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

    千次阅读 2017-09-17 12:03:51
    WebStorm 快速开发技巧 --CSS篇
  • 作为前端开发,我为何疯狂推荐WebStorm

    万次阅读 多人点赞 2020-08-09 12:04:02
    让我给他们推荐一下前端开发工具,我几乎都是毫不犹豫地就说 " WebSotrm ",原因我当时也没给他们细讲,因为这款开发工具功能实在是太全了,一句两句说不清楚,所以我准备写一篇文章告诉大家为什么要选择WebStorm
  • j - - 输出模板,自动代码 【弹出快捷代码框。】 ctrl + k - - 调出git的commit界面,提交版本 ctrl + l - - 如果你ctrl + f查找xxx了,那么在按ctrl + l就会快速指定xxx的位置,在按一次指定下一次位置 ctrl + m - -...
  • 一些开发小技巧: 平时我们在写CSS样式的时候都是这样的:比如要写width:300px,是不是一个字一个字的敲,嗯,其实还有很便捷的操作:先输入w300然后按下tab键,这个时候奇迹出现了.是不是直接出现了width:300px是不是很...
  • 1.依次进入File ---> Setting ---> Editor ---> Live Templates ---> Javascript ... 3.在模板内写入自己需要定义的代码 4.下方蓝色字体的Define,把Javascript全勾选上(因为我们现在自定义的代码属于...
  • WebStorm下载与安装

    千次阅读 2019-08-15 16:29:33
    前言:众所周知WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了...
  • WebStorm 开发javaScript

    千次阅读 2016-06-24 09:30:34
    2、下载webstorm并安装 webstorm安装后的一些设置技巧: 如何更改主题(字体&配色): File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址 如何让webstorm启动的时候不打开工程文件: File
  • WebStorm 开发配置

    2018-06-08 11:39:00
    1. require黄线问题 ...File->Settings...->Lanaguages & Frameworks -> JavaScript -> Libraries -> Add... ...File -> Settings......使用: Windows下Ctrl+J,调出快捷输入框,选择对应的即可
  • 1、在webstorm菜单栏中依次选择File->Setting。 2、找到Keymap,然后搜索Extend Selection,然后双击搜索结果,选择remove ctrl+w 3、然后搜索close,在结果中找到如图所示的位置(默认快捷键是 ctrl+f4),...
  • 一、Ubuntu下WebStorm的安装: 注:WebStorm是基于Java的,需要JDK支持,需提前完成安装JDK及环境变量的配置,而且需要先安装完nodejs和npm,请看这篇文章Ubuntu下安装nodejs和npm 首先需要下载WebStrom的Linux...
  • Webstorm快捷操作

    2019-02-16 22:27:00
    设置和使用技巧:前端工具开发利器webstrom专篇...更新中 选中行上下移:cl+shift+上下箭头 展示文件结构图:view-tool_window-structure。具体的图标含义 生成注释目录 webstorm提供一个本地文件修改历史记录...
  • WebStorm前端开发进阶在不使用ESlint完美的响应公司开发前端规范模板语法(强烈推荐使用,开发效率快到飞起) 在不使用ESlint完美的响应公司开发前端规范 WebStorm自带代码风格自定义设置,保存代码时会自动格式化成...
  • 第一步将ReactNative.xml文件复制到这个文件夹 第二步在setting里面看一下ReactNative是否打钩了~,需要打钩 第三步配置成功的提示 如何修改,记得改完保存
  • webstorm快捷键大全(亲自整理)

    千次阅读 2018-07-01 18:35:48
    webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目。今天整理了一些webstorm比较实用的快捷键: Ctrl+/ 或
  • 前言前文React Native开发之——Webstorm快捷开发介绍了使用Webstorm快捷开发React Native,本文介绍Webstorm开发RN配置。Webstorm开发RN配置配置文件编码格式注:为避免莫名其妙的问题,本文所使用的编码格式统一...
  • WebStorm常用快捷键 Ctrl+D复制一行 Ctrl+Y删除一行 Ctrl+X 剪切 Ctrl+Z 撤销 Ctrl+A 全选 Ctrl+Shift+Z 反撤销 Ctrl+F查找关键字 Shift+Alt+Up 向上移动行 Shift+Alt+Down 向下移动行 Ctrl+Alt+L 格式化当前文件...
  • 1.项目目录下,增加一个webpack.config.js文件,内容如下 const path = require('path') module.exports = { resolve: { extensions: ...设置webstorm file -> settings 搜索webpack 把右边的目录设置为上面那个文件。
  • 下面是Webstorm的一些常用快捷键及插件: 掌握和常用的插件使用,可以大大提高你开发的效率 ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文件。 ctrl + j: 输出模板 ctrl + b: 跳到变量申明...
  • WebStorm使用 webstorm快捷键

    千次阅读 2017-10-13 13:15:32
    WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的 * 的。 好处:省去了ctrl...
  • 1、下载安装node.js 安装之前检查是否已有node.js环境: cmd 命令下输入node -v, 出现版本号,说明已经成功安装了node.js环境 ,如下图所示: 2、安装 react native 脚手架工具 ...官网下载 Webstorm 安装包:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,416
精华内容 566
关键字:

webstorm快捷开发