您的位置:首页 > 设计教程 > 网页设计 > 内页

入门教程:JavaScript开发工具Webstrom使用指南

核心提示: WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

webstorm使用心得

收藏夹功能:

当工程目录很庞大时,有些子目录很经常打开,但层级又很深,这时候可以把目录添加到收藏夹里面,添加成功后,左侧有个“Favorites”菜单

面包屑导航:

除了左侧的工程页面,可以选择目录之外,在顶部菜单下有一个类似网站面包屑导航一样的目录也可以实现相同功。点击每个目录就会有下拉菜单显示其下的子目录,很实用.

构造器界面:

注释符合格式的话就会出现。如果是js文件则是js类的函数和对象;css文件的话则是这个css文件的概括;html文件的话则是节点的结构图。话说这几个就是为了方便查看代码的结构性.

todo界面:

给代码加todo注释就会出现这个界面

双栏代码界面:

右击代码选项卡上的文件,然后右键 -> spilt vertically(左右两屏)或者spilt horizontally(上下两屏)

本地历史功能:
找回代码的好办法

git使用

webstorm中只集成了git的常用操作,并不能完全替代命令行工具。在界面的右下角可以查看处于哪个git分支。也可以在上面点击切换或者新建分支。

查看当前代码与版本库代码的差异:

右击代码界面任意区域,选择git -> compare with然后选择要比较的版本库。

webstorm的快捷键说明:

Editing编辑相关快捷键

Ctrl + Space:
Basic code completion (the name of any class, method or variable) 基本代码完成(任何类、函数或者变量名称),改为Alt+S
Ctrl + Shift + Enter:
Complete statement 补全当前语句
Ctrl + P:
Parameter info (within method call arguments) 参数信息 包括方法调用参数
Ctrl + mouse over code
Brief Info 简单信息
Ctrl + F1
Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息
Alt + Insert
Generate code…(Getters, Setters, Constructors)新建一个文件或者生成代码,…构造函数,可以创建类里面任何字段的getter与setter方法
Ctrl + O
Override methods 重载方法
Ctrl + I
Implement methods 实现方法
Ctrl + Alt + T
Surround with…(if, else, try, catch, for, etc)用 * 来围绕选中的代码行,( * 包括 if 、 while 、 try catch 等)
Ctrl + /
Comment/uncomment with line comment 行注释/取消行注释
Ctrl + Shift + /
Comment/uncomment with block comment 块注释/取消块注释
Ctrl + W
Select successively increasing code blocks 选择代码块,一般是增量选择
Ctrl + Shift + W
Decrease current selection to previous state 上个快捷键的回退,减量选择代码
Alt + Q
Context info 上下文信息
Alt + Enter
Show intention actions and quick-fixes 意图行动,快速见效
Ctrl + Alt + L
Reformat code 根据模板格式对代码格式化
Tab/ Shift + Tab
Indent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理
Ctrl + X or Shift + Delete
Cut current line or selected block to clipboard 剪切当前行或所选代码块到剪切板
Ctrl + C or Ctrl + Insert
Copy current line or selected block to chipboard 拷贝当前行或者所选代码块到剪切板
Ctrl + V or Shift + Insert
Paste from clipboard 粘贴剪切板上的内容
Ctrl + Shift + V
Paste from recent buffers 粘贴缓冲器中最新的内容
Ctrl + D
Duplicate current line or selected block 复制当前行或者所选代码块
Ctrl + Y
Delete line at caret 删除光标所在位置行
Ctrl + Shift + J
Smart line join(HTML and JavaScript only)加入智能行 (HTML 和JavaScript)
Ctrl + Enter
Smart line split(HTML and JavaScript only)分离智能行 (HTML 和JavaScript)
Shift + Enter
Start new line 另起一行
Ctrl + Shift + U
Toggle case for word at caret or selected block 光标所在位置大小写转换
Ctrl + Shift + ]/[
Select till code block end/start 选择直到代码块结束/开始
Ctrl + Delete
Delete to word end 删除文字结束
Ctrl + Backspace
Delete to word start 删除文字开始
Ctrl + NumPad+/-
Expand/collapse code block 扩展/缩减代码块
Ctrl + Shift+ NumPad+
Expand all 扩张所有
Ctrl + Shift+ NumPad-
Collapse 缩减所有
Ctrl + F4
Close active editor tab 关闭活跃编辑标签
Search/replace搜索/替代相关快捷键

Ctrl + F
Find 当前文件内快速查找代码
Ctrl + Shift + F
Find in path 指定文件内寻找路径
F3
Find next 查找下一个
Shift + F3
Find previous 查找上一个
Ctrl + R
Replace 当前文件内代码替代
Ctrl + Shift + R
Replace in path 指定文件内代码批量替代
Usage Search搜索相关快捷键

Alt + F7/Ctrl + F7
Find usages/Find usages in file 找到使用/在文件找到使用
Ctrl + Shift + F7
Highlight usages in file文件中精彩使用
Ctrl + Alt + F7
Show usages 显示使用
Running运行

Alt + Shift + F10
Select configuration and run 选择构架,运行
Alt + Shift + F9
Select configuration and debug 选择构架,修补漏洞
Shift + F10
Run 运行
Shift + F9
Debug 修补漏洞
Ctrl + Shift + F10
Run context configuration from editor 从编辑运行内容构架
Ctrl + Shift + X
Run command line 运行命令行
Debugging Debugging相关快捷键

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:Beach

搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:design_news
扫一扫 订阅最新资讯
回到顶部