WebStorm使用积累

WebStorm

快捷键

快捷键和相关设置

chrome浏览器快捷键: 
------
ctrl + w : 关闭标签页
ctrl + t : 新建标签页 (tag)
---------
alt + insert: 新建文件或其他
ctrl + Tab: 切换工作块
alt + 1: 到文件导航
ctrl + F4 : 关闭当前标签页
Alt + left/right:标签切换
ctrl + F12: 可以显示当前文件的结构, Structure (ctrl + tab)
Alt + F2 : 浏览器预览
F12 : 快速定位到文件导航
F5 : 快速复制当前文件,并另存为
ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。
ctrl + j: 输出模板
ctrl + b: 跳到变量申明处
ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
ctrl + []: 匹配 {}[]
ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容
ctrl + r: 替换
ctrl + f: 查找
ctrl + shift + up: 行移动
shift + alt + up: 块移动(if(){},while(){}语句块的移动)
ctrl + d: 行复制
ctrl + y: 删除行
ctrl + shift + ]/[: 选中块代码
ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
ctrl + '-/+': 可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。
ctrl + '.': 折叠选中的代码的代码。
shift + esc: 当前激活的任意小窗口最小化，也可以是alt+数字键，数字在小窗口有显示。
alt + '7': 显示当前的函数结构。
如果是*.html页面，则在文件名下的导航栏某DOM结构上右键，可以全选当前DOM结构。

技巧

1. xxx.log Tab ==> console.log(xxx);
2. 右键 -> Local History -> Show History (本地版本控制)
3. 快速查找 Shift x 2, 可以查找类, 方法, 函数, 文件等
4. 多光标 alt+鼠标(拖), alt+鼠标(双击), 鼠标中键(拖),alt+j
5. emmet中lorem10, 快速生成测试文本
6. 最好关闭emmet自动加前缀功能,通过自动化工具加前缀
   
7. ctrl+Q快速文档预览 F1跳转到API网页说明
8. ctrl+alt+T快速包裹, ctrl+shift+Del移除包裹标签
9. ctrl+w层层选中(词>块>父级块)
10. ctrl+shift+v 剪切板内容
11. 面包屑导航
    
12. ctrl + alt + return 在上方插入新行
13. ctrl +多次-展开代码, ctrl -多次-折叠代码
14. ctrl shift +代码全部展开, ctrl shift -代码全部折叠
15. ctrl+[和ctrl+] 闭合标签或括号前后移动
16. ctrl+m 滚动屏幕到光标位置
17. ctrl+alt+←和ctrl+alt+→ 回到上次编辑位置/回来
18. img的宽高预览 a.ctrl+q b.shift+鼠标悬浮
19. shift+F6重命名或右键菜单中refactor(重构) --> rename
20. ctrl+alt+shift+t 重构refactor, 点击preview可以精确控制
21. 检查代码: Code -> Inspect Code 检查整个项目的代码
22. 代码编写中右侧的代码提示黄色为警告, 红色为错误
23. F2错误代码之间跳转, alt + return改正建议
24. 设置中搜索Inspections, 自定义语法校验规则

本地服务测试

1. 在settings -> Deployment -> +
   
2. 发布到指定服务器目录