webstrom使用方法

一、设置
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>元素中。

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

转载于:https://www.cnblogs.com/annie211/p/6083269.html

webstrom使用方法相关推荐

一个有用的webstrom激活方法
注册时选择 License server,填 http://idea.xn--w0sz4as21fs7k.com/,然后点击 OK,就搞定了. 转载于:https://www.cnblogs.com/ ...
WebStorm下ReactNative代码提示设置
ReactNative 代码智能提醒 (Webstrom live template) https://github.com/virtoolswebplayer/ReactNative-LiveTe ...
在 Oracle Enterprise Linux 和 iSCSI 上构建您自己的 Oracle RAC 11g 集群
作者:Jeffrey Hunter 了解如何以低于 2,700 美元的费用在 Oracle Enterprise Linux 上安装并配置 Oracle RAC 11g 第 2 版开发集群. 本指南中 ...
Java面试题大全2021版
一.Java 基础 JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java Run ...
总结网上及自己在Webstrom汉化后无法打开设置上的解决方法
#1.让它回归到英文版把webstorm安装目录/lib/下的汉化包resources_cn.jar删了,又改回resources_en.jar再试一下,设置功能果然可以用了. #2.通过搜索相应设 ...
认识less和webstrom的less配置
认识less和webstrom的less配置今天完成的事情: 首先第一件事情是,整理一下常用的颜色摄取 #F1F1F1 google的设置页面的body的背景颜色 #FFF 为google的内容块的 ...
【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
解决 webstrom sass 注释中文出错问题
最近用 webStrom 写 sass,感觉非常好用,自动帮你编译好,但是有一个问题,就是在写中文注释的时候,就会出错如下: 网上查了一下,说在 scss 文件头部加上: @charset &quo ...
Webstrom 卡顿问题
Webstrom就很吃内存!!!于是有一天就这个样子了,,, 从上图可以看出,原本-Xmx是750 MB,-XX是240MB,接近或者超出,WS就出现卡顿了, 可以将-Xmx设置为1024 MB,-X ...

webstrom使用方法

webstrom使用方法相关推荐

最新文章

热门文章