一、设置
file-settings- -color&fonts设置,字体 主体 -file and code templates模板
ctrl+r 查找,替换
1 双击shift 快速查找
2 file -new project 新建文件夹
3 file-new 新建html css js等
4 右键-local history 查看历史
5 双击选择某个元素,alt,可以同时选择多个进行修改。
6 code-reformat code 格式化代码 (快捷键:ctrl+alt+l)
7 file-settings-keymap 设置 修改快捷键
8 光标定位在末尾:ctrl+d;复制粘贴一行

二、emmet用法:光标定位在最后,再按tab;中间不要有空格;
1 ul>li.item-$, tab:
2 <ul>
<li class="item-1"></li>
<li class="item-2"></li>
<li class="item-3"></li>
</ul>
3 lorem10 tab:可以创造出10个单词

4嵌套
>父子
+同级
^返回同级

*多个
()分组
# id
. class
[] 自定义属性
{}文本

三、注释,取消注释,操作一样
选择代码块,ctrl+/

四、复制粘贴
复制多次之后
ctrl+shift+v,选择粘贴哪个

五、将光标定位在行中任意地方
ctrl+shift+enter 在下方增加一行
ctrl+alt+enter 在上方增加一行

六、ctrl + 代码块展开
ctrl -代码块折叠
ctrl shift +代码全部展开
ctrl shift -代码全部折叠

七、找相对应的标签
将光标定位在标签后,ctrl+[或者],就可以自动定位到相应地标签

八crtl+shift+backspace 切换到上次编辑的地方
ctrl+e 查看最近使用的文件

九、预览图片:
光标在图片路径文件夹上:shift

十、选择颜色:
点击左边的颜色小框

十一、重命名,光标定位在要重命名的地方
shift+f6

十二、Webstorm快捷键小练习

1、查找/替换,分为全局查找和文件内查找。
全局查找/替换: Ctrl+Shift+N 根据键入文件名查找文件
Ctrl+Shift+Alt+N 根据键入名字查找对象
Ctrl+E 最近打开的文件
Ctrl+Shift+E 最近编辑的文件


查找/替换 匹配字符所有的位置 组合键
Ctrl+Shift+F 打开查找窗口,键入需要查找的字符
或Ctrl+shift+R 打开替换窗口,键入需要替换的字符
Enter 开始查找(或Tab键切换到Find按钮,再Enter)
或ESC 关闭查找窗口,取消查找
Alt+3 打开Find结果窗口(Alt+3除了能打开窗口,还能
从其他窗口切换到Find结果窗口下,然后使用上
下键翻阅结果项即可)
Ctrl+Shift+上下键 可调节Find结果窗口高度
按ESC 可回到代码编辑窗口


文件内查找/替换: 组合键
Ctrl+F 打开文件内字符查找窗口,键入查找的字符
Ctrl+R 打开文件内字符替换窗口,键入替换的字符
F3或Shift+F3 在匹配的所有字符中前进或后退切换
ESC或ReplaceAll 退出或全部替换

2、界面操作
Alt+菜单项首字母 即可打开该菜单列表
Alt+[1-9] 拆合功能界面模块
Alt+7 界面元素大纲
Alt+5 debug界面
Alt+4 Run界面
Alt+3 Find结果界面
Alt+1 Project界面
Ctrl+Shift+F12 最大编辑界面(Ctrl+Shift+F9/Shift+F9 -
debug;Ctrl+Shift+F10/Shift+F10 -Run)

打开文件,切换文件,关闭文件标签页 组合键
Alt+1 鼠标焦点切换到Project界面下
上下键 按上下键选择文件
Enter 打开文件Tab页
Alt+左右方向键 在多个文件Tab页间切换
Ctrl+F4 关闭当前Tab页(Alt+F4关闭Webstrom)

3、代码编辑 组合键
Esc 切换焦点到编辑界面下

(定位)
Ctrl+G 输入行好,定位光标到某行
home/end 定位光标到行首/行尾
Ctrl+home/end 定位光标到文件首行或者末行
Ctrl+左右方向键 已单词为步长在一行内移动
Ctrl+W 选择某个单词


(编辑)
Ctrl+Alt+Enter/Enter在行前新建一行/或行后另起一行,键入代码
Ctrl+X 删除一行
Ctrl+D 复制一行
Ctrl+Z 撤销
Ctrl+shift+Z 还原

(查看)
Ctrl+B 进入方法体
Ctrl+Alt+右方向键 退出方法体
Ctrl+[-/+] 收缩/展开方法体
Ctrl+Shift+[-/+] 全局收缩/展开方法体

十三、javascript标签到底是应该放在头部还是尾部
按照惯例,所有<script>元素都要放在页面的<head>元素中。如:

<html>
<head>
<script type="text/javascript" scr="example.js"></script>
</head>
<body>
</body>
</html>
这种做法就是把所有的外部文件(包括CSS和JS)的引用都放在相同的地方。可是文档的<head>包含所有JavaScript文件则意味着必须等到所有JavaScript代码下载、解析、执行完以后才呈现网页的内用,这无疑会导致浏览器在呈现页面时出现明显的延迟,为了避免这个问题,现代Web应用程序一般全部JavaScript放到<body>元素中。

<html>
<head>
</head>
<body>
<script type="text/javascript" scr="example.js"></script>
</body>
</html>

十四、去电点击时出现的虚线框
a:focus{outline:none;}

webstrom使用方法的更多相关文章

  1. webstrom 2016 破解

    本篇文章经过笔者实验结果,网友均可放心使用 版权声明:本文为博主原创文章,未经博主允许不得转载. 工欲善其事,必先利其器 websrtom作为前端开发神器,现在是越来越多的用户使用.很多小白们下载好了 ...

  2. webstrom的注释

    今天我们小组的新同学有一个BUG调不好,然后我就帮他调一下.在调试的过程中非常累,纠其原因还是他注释写的不完善.我们可以看一下,他是这样写注释的(随便拿一个方法举例),如下图: 乍一看,是不是觉得他的 ...

  3. WebStorm下ReactNative代码提示设置

    ReactNative 代码智能提醒  (Webstrom live template) https://github.com/virtoolswebplayer/ReactNative-LiveTe ...

  4. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  5. 使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法

    问题:使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法 解决方法:webstrom ->preferences->Laugrange ...

  6. webstrom破解-webstrom2018.2.4破解方法(xjl456852原创)

    方法一: 获取注册码: http://idea.lanyus.com/ 方法二: 使用破解补丁 放在安装目录的bin目录下,并且编辑bin目录下的文件 如果使用的32位的webstrom就编辑webs ...

  7. webstrom自定义代码块的设置方法

    webstrom里面的自定义代码块叫做活动模版 在文件 -> 设置 -> 编辑器 -> 活动模版可以打开 里面的$var$ 代表一个变量  两个相同的$var$在不全后可以同时修改, ...

  8. myeclipse 与 webstrom 免解析node_modules 的方法

    myeclipse :   1.项目文件夹上:右键  properites  - > 搜索 filter  -->resouce filters 2.  webStrom : File - ...

  9. webstrom 内存溢出,软件崩溃卡死解决的方法

    今天用gulp搭建了一个工程,准备做一个体育h5的项目,其中需要用到sass代码压缩,加版本号等功能. gulpfile.js和package.json都是已经写好的.我用CMD命令窗口cnpm安装n ...

随机推荐

  1. 一个相比jdk的io包更方便处理数据读写的包

    apche的commons-io.jar包,里面有个类IOUtils,提供的下列方法: readLines方法能够从字节输入流或字符输入流里读取数据,按行读,返回字符串组成的list write方法能 ...

  2. 深度学习笔记(四)VGG14

    Very Deep Convolutional Networks for Large-Scale Image Recognition 1. 主要贡献 本文探究了参数总数基本不变的情况下,CNN随着层数 ...

  3. kibana使用操作部分

      1.kibana的概念及特点. 概念:数据可视化平台工具 特点: - 灵活的分析和可视化平台 - 实时总结和流数据的图表 - 为不同的用户显示直观的界面 - 即时分享和嵌入的仪表板   2.kib ...

  4. Android studio VT-x is disabled

    执行app run的时候,android studio提示了这个问题,导致虚拟机没法用,这是因为电脑的Virtualization(虚拟化)没有打开导致的.但是有的电脑并没有这个功能,所以先下载个se ...

  5. Windows Sserver 2008 R2 搭建DNS配置区域与配置转发器上外网

    一.实验模拟环境: zhuyu公司是一家成立的新公司,该公司的局域网没有DNS服务器,所有电脑都使用电 信ISP提供的DNS服务器(202.96.128.166).zhuyu公司计划搭建一台DNS服务 ...

  6. python Shapely 使用指南

    翻译:http://toblerity.org/shapely/manual.html 引入包 from shapely.geometry import Point from shapely.geom ...

  7. Python 模块,数据类型,元组

    模块 Python的强大之处在于他有非常丰富和强大的标准库和第三方库,几乎你想实现的任何功能都有相应的Python库支持,以后的课程中会深入讲解常用到的各种库,现在,我们先来象征性的学2个简单的. s ...

  8. string.Format出现异常"输入的字符串格式有误"的解决方法

    string.Format出现异常"输入的字符串格式有误"的解决方法 今天在做项目时,碰到一个很奇怪的问题,我使用string.Format居然报“输入的字符串格式有误”的错误,我 ...

  9. ASP标准控件的重要性

    1.BackColor 属性:用于显示ListBox控件中的文本和图形的背景颜色,默认为白色(Window) 2.BorderStyle 属性:控制在列表框ListBox周围绘制的边框的类型,其枚举值 ...

  10. paper 112:hellinger distance

    在概率论和统计理论中,Hellinger距离被用来度量两个概率分布的相似度.它是f散度的一种(f散度——度量两个概率分布相似度的指标).Hellinger距离被定义成Hellinger积分的形式,这种 ...