webstorm-前端javascript开发神器中文教程和技巧分享(转)
webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享。
webstorm8.0.3中文汉化版下载:
百度网盘下载:http://pan.baidu.com/s/1pJI9PMV
WebStorm为前端javascript开发而生,专门为 javascript开发做了很多优化,令前端工程师眼前一亮的。
一、webstorm的功能
1、webstorm的智能的代码补全:
支持不同浏览器的提示,还包括所有用户自定义的函数(项目中)


代码补全包含了所有流行的库,比如:JQuery, YUI, Dojo, Prototype, Mootools and Bindows。
2、webstorm代码格式化:
代码不仅可以格式化,而且所有规则都可以自己来定义:

3、代码编写中的html提示:
大家经常在js代码中编写html代码,一般来说十分痛苦,不过有了智能提示,就爽多了。

而且html里面还能有js提示

4、代码导航和用法查询:
只需要按着Ctrl键点击函数或者变量等,就能直接跳转到定义:

可以全项目查找函数或者变量,还可以查找使用并高亮:

5、代码重构(这个操作有些像Resharper,熟悉Resharper的用户应该上手很快):
支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等,比如:

内联变量重构之后变为:

6、代码检查和快速修复:

可以快速找到代码中的错误或者需要优化的地方,并给出修改意见,快速修复。

7、webstorm代码调试:

8、代码结构浏览:
可以快速浏览和定位

9、代码折叠:

10、包裹或者去掉外围代码:

去掉之后就成了:

二、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 | 文件内代码替换 |
懒人建站http://www.51xuediannao.com/
|
快捷键 |
说明 |
| 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 | 上一个/下一个方法 |
webstorm8.0.3中文汉化版下载:
百度网盘下载:http://pan.baidu.com/s/1pJI9PMV
webstorm-前端javascript开发神器中文教程和技巧分享(转)的更多相关文章
- webstorm-前端javascript开发神器中文教程和技巧分享(转)
webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享. webstorm8.0.3中文汉化版下载: 百度网盘下载:http://pan.baidu ...
- 【转载】webstorm-前端javascript开发神器中文教程和技巧分享
webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享. webstorm8.0.3中文汉化版下载:百度网盘下载:http://pan.baidu. ...
- webstorm的中文教程和技巧分享
webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享.webstorm8.0.3中文汉化版下载:百度网盘下载:http://pan.baidu.c ...
- WebStorm JavaScript 开发神器
WebStorm 百度百科 http://baike.baidu.com/view/5443872.htm?fr=aladdin
- JavaScript 开发的45个经典技巧
JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...
- JavaScript 开发的40个经典技巧
首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和 ...
- odoo开发安装插件教程小技巧
安装Odoo插件时而可能很繁琐且易于出现未知错误.当Odoo出现错误提示时.您需要深层次查询内核模块,安装其它依赖插件,下载全部插件,将它们放到恰当的部位,点安装,随后处理错误,然后再次测试,直至凡事 ...
- WebStorm(Amaze开发工具)--JavaScript 开发工具
WebStorm(Amaze开发工具)--JavaScript 开发工具 一.总结 1.webstorm:前段开发神器,应该比sublime好用. 2.webstorm功能:支持显示图片宽高,标签重构 ...
- JavaScript开发规范要求
http://www.cnblogs.com/webflash/archive/2010/06/11/1756255.html 作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅 ...
随机推荐
- centos 7 install virtualbox
from:https://wiki.centos.org/HowTos/Virtualization/VirtualBox Installing VirtualBox cd /etc/yum.repo ...
- 20145201《Java程序设计》第十周学习总结
教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴. 在发送和接收 ...
- 20145222黄亚奇《网络对抗》 逆向及BOF进阶实践学习总结
20145222<网络对抗> 逆向及BOF进阶实践学习总结 实践目的 1.注入shellcode 2.实现Return-to-libc攻击 知识点学习总结 Shellcode实际是一段代码 ...
- AtCoder Regular Contest 092
AtCoder Regular Contest 092 C - 2D Plane 2N Points 题意: 二维平面上给了\(2N\)个点,其中\(N\)个是\(A\)类点,\(N\)个是\(B\) ...
- VS 安装部署项目自解压程序解压后按顺序执行多个程序
这篇blog介绍了如何用VS创建安装部署方案,以及如何制作自解压程序.然后我的程序中需要解压后按照顺序先后安装2个exe.winrar的解压后执行,虽然可以用分号填写多个应用,但貌似是同时执行的.为了 ...
- Reverse Nodes In K Group,将链表每k个元素为一组进行反转---特例Swap Nodes in Pairs,成对儿反转
问题描述:1->2->3->4,假设k=2进行反转,得到2->1->4->3:k=3进行反转,得到3->2->1->4 算法思想:基本操作就是链表 ...
- Python中有趣的数据结构
链表 链表的基本操作 >>> a = [66.25,333,333,1,1234.5] >>> print a.count(333),a.count(66.25), ...
- 判断浏览器是否支持某一个CSS3属性
判断浏览器是否支持某一个CSS3属性 function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpS ...
- Android 通过名称获取资源ID
当我们获取网络数据的时候,解析之后往往都是一个字符串,而不是资源id,所有我们没有办法直接使用,只能通过名称来获取到资源id, package com.example.administrator.de ...
- 框架布局FrameLayout
框架布局FrameLayout 一.简介 二.代码实例 结果图: 代码: 需要注意的代码: imageView_play.setVisibility(View.INVISIBLE); <Fram ...