知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    webstorm-前端javascript开发神器中文教程和技巧分享

    作者:佳明妈 来源:jquery特效 2015-03-07 人气:
    webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享。
    webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享。

    webstorm8.0.3中文汉化版下载:
    百度网盘下载:http://pan.baidu.com/s/1pJI9PMV

    WebStorm为前端javascript开发而生,专门为 javascript开发做了很多优化,令前端工程师眼前一亮的。

    一、webstorm的功能

    1、webstorm的智能的代码补全:

    支持不同浏览器的提示,还包括所有用户自定义的函数(项目中)

    WebStorm的智能的代码补全
    WebStorm的智能的代码补全

    代码补全包含了所有流行的库,比如:JQuery, YUI, Dojo, Prototype, Mootools and Bindows。

    2、webstorm代码格式化:

    代码不仅可以格式化,而且所有规则都可以自己来定义:

    webstorm代码格式化

    3、代码编写中的html提示:

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

    webstorm代码编写中的html提示

    而且html里面还能有js提示

    webstorm

    4、代码导航和用法查询:

    只需要按着Ctrl键点击函数或者变量等,就能直接跳转到定义:

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

    webstorm-前端javascript开发神器

    5、代码重构(这个操作有些像Resharper,熟悉Resharper的用户应该上手很快):

    支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等,比如:

    webstorm-前端javascript开发神器中文教程和技巧分享

    内联变量重构之后变为:

    webstorm-前端中文教程和技巧分享

    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开发神器中文教程和技巧分享-最新评论

    • 11 2017-03-18 09:03:35
      1
    • 可可 2017-01-08 05:13:33
      打开 288d.pw 都是 浪美眉
    • 11 2017-01-08 05:01:33
      打开 288d.pw 都是 浪美眉
    • 11 2016-11-22 05:11:48
      不错哦,赞一个,求认识,求回访! 诚交友链 站务申请:www.3gwb.com
    • 懒人建站网友 2016-11-13 08:36:23
      打开 288d.pw 都是 浪美眉
    • 11 2016-11-13 08:11:23
      打开 288d.pw 都是 浪美眉
    • 懒人建站网友 2016-10-31 09:57:46
      这个更刺c激,准备好手纸哦 A 片。。 288d.pw [给力]
    • 11 2016-09-27 09:09:46
      工欲善其事必先利其器!!!
    • 11 2016-08-17 04:08:47
      文章很好~!赞
    • 11 2016-05-23 08:05:15
      不错