WebStorm 使用指南：从安装配置到快捷键大全

WebStorm 简介与特色功能

近期有文章提及 WebStorm 功能强大，这也解释了为何阿里巴巴前端团队在 GitHub 提交代码时会保留 .idea 文件夹。据传，淘宝内部推荐前端开发使用 WebStorm。

我们可以将 IDE 理解为集成了多种功能的编辑器，即便包含部分非必需功能。截至目前，我认为无需额外安装插件即可满足日常需求。

接下来将介绍 WebStorm 的特色功能。

WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具

大多数编辑器需要手动保存（Ctrl + S），这是 Windows 平台编辑软件的常见特性，但 WebStorm 编辑文件右上角没有显示未保存状态的星号（*）。 优点：省去了 Ctrl + S 的操作，配合 Firefox 的 Vim 插件，基本无需鼠标即可查看结果页面。 缺点：缺少星号标识，若发生键盘误操作，内容会被立即保存。 大多数编辑器在关闭文件后会清除历史记录，但 WebStorm 提供了本地历史功能。通过 VCS -> Local History -> Show History（快捷键：ALT+~ -> 7）可以查看。 优点：只要 WebStorm 不关闭，文件可随时回溯到之前的操作状态（这也是为何在 WebStorm 中 Ctrl + Y 用于删除一行的原因）。 缺点：WebStorm 关闭重启后，这些历史记录将消失；此外，该功能带来的内存消耗较大。 大多数编辑器除服务器 SVN 外无本地版本控制，但 WebStorm 提供了本地文件修改历史记录（快捷键：ALT+SHIFT+c）。同时，Ctrl + E 可弹出最近打开的文件列表。 优点：相当于本地 SVN 功能。 缺点：同样导致较大的内存消耗。 WebStorm 集成了 Zencoding、HTML5、FTP、即时编辑（Chrome）、自动完成、基于 Mozilla 的 JavaScript 调试器、JSLint、Less 支持、CoffeeScript 支持、Node.js、单元测试、集成 Git 和 SVN 版本控制等功能。 在编写 CSS 时，它能智能提示文件及图片路径，无需手动确认文件是否存在。 其他特性不再赘述，如需了解更多，请访问 WebStorm 官网。看完上述介绍及众多强大功能，是否让你迫不及待想尝试这款传说中的前端神器？

安装与基础配置

首先在官方下载页下载 WebStorm 后点击安装，一路点击“下一步”，最后会出现注册码界面。由于 WebStorm 是商业 IDE，而国内许多前端开发者可能不愿支付高昂费用，我们可以使用 WebStorm 的密钥来学习使用这款前端神器。

安装成功后，可能会感到些许不适，例如我觉得配色过于刺眼，部分设置也不符合我的习惯。以下列出我常用的设置选项。

WebStorm 安装后的一些设置技巧：

如何更改主题（字体&配色）: File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址 如何让 WebStorm 启动的时候不打开工程文件： File -> Settings->General 去掉 Reopen last project on startup. 如何完美显示中文： File -> Settings->Appearance 中勾选 Override default fonts by (not recommended)，设置 Name:NSimSun，Size:12 如何显示行号： File -> Settings->Editor，”Show line numbers” 打上勾，就显示行号了 如何代码自动换行： File -> settings -> Editor “Use Soft Wraps in editor” 打上钩，代码就自动换行了 如何点击光标，显示在本行末尾： File -> Settings->Editor “Allow placement of caret after end of line” 去掉勾就行了。 如何修改快键键： File -> Settings->Keymap，然后双击要修改快捷的功能会有提示框出来，按提示操作 换成自己熟悉编辑器的快键键： File ->Settings->Keymap，支持像 Visual Studio、Eclipse、NetBeans 这样的主流 IDE。 javascript 类库提示。 File -> settings -> Javascript -> Libraries -> 然后在列表里选择自己经常用到的 javascript 类库，最后 Download and Install 就 ok 了. 在开发 js 时发现，需要 ctrl + return 才能选候选项： File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改为 “Always” js 提示比较迟缓 File -> Code Completion -> Autopopup in 下 1000 改为 0 git 配置： File -> settings -> Editor -> github，进去改 github 的账户，如果没有 git 则不需要. 插件安装： File ->plugins，然后就选择给力的插件们再安装.(“css-X-fire” 插件,用于当使用 firebug 修改 css 属性时，编辑器内的 css 代码也会发生变化。） 以后更新

实用功能与技巧

WebStorm 使用心得

收藏夹功能:

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

面包屑导航：

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

构造器界面:

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

todo 界面：

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

双栏代码界面：

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

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

Git 版本控制集成

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 相关快捷键

F8 Step over 不进入函数 F7 Step into 单步执行 Shift + F7 Smart step into 智能单步执行 Shift + F8 Step out 跳出 Alt + F9 Run to cursor 运行到光标处 Alt+ F8 Evaluate expression 评估表达 F9 Resume program 重新开始程序 Ctrl + F8 Toggle breakpoint 切换断点 Ctrl + Shift + F8 View breakpoints 查看断点 Navigation 定位相关快捷键

Ctrl + N Go to class 跳转到指定类 Ctrl + Shift + N Go to file 通过文件名快速查找工程内的文件 Ctrl + Alt +Shift + N Go to symbol 通过一个字符查找函数位置 Alt + Right/ left Go to next/ previous editor tab 进入下一个/ 上一个编辑器选项 F12 Go back to previous tool window 进入上一个工具窗口 Esc Go to editor（from tool window） 从工具窗口进入编辑器 Shift + Esc Hide active or last active window 隐藏活动窗口 Ctrl + Shift + F4 Close active run/message/find/…tab 关闭活动….标签 Ctrl + G Go to line 跳转到第几行 Ctrl + E Recent files popup 弹出最近打开的文件 Ctrl + Alt + Left/Right Navigate back/forward 导航前进/后退 Ctrl + Shift + Backspace Navigate to last edit location 向最近编辑定位导航 Alt + F1 Select current file or symbol in any view 查找当前选中的代码或文件在其他界面模块的位置 Ctrl + B or Ctrl + Click Go to declaration 跳转到定义处 Ctrl + Alt + B Go to implementation(s) 跳转方法实现处 Ctrl + Shift + B Go to type declaration 跳转方法定义处 Ctrl + Shift + I Open quick definition lookup 打开定义快速查找 Ctrl + U Go to super-method/super-class 跳转方法/超阶级 Alt + Up/Down Go to previous/next method 在方法间快速移动定位 Ctrl + ]/[ Move to code block end/start 跳转到编码块结束/开始 Ctrl + F12 File structure popup 文件结构弹出 Ctrl + H Type hierarchy 类型层次 Ctrl + Alt + H Call hierarchy 调用层次结构 F2/ Shift + F2 Next/previous highlighted error 跳转到后一个/前一个错误，高亮错误或警告快速定位，使用这个快捷键可以快捷在出错的语句之间进行跳转。 F4/Ctrl + Enter Edit source/ View source 编辑源代码/查看源代码 Alt + Home Show navigation bar 显示导航栏 F11 Toggle bookmark 切换标记 Ctrl + F11 Toggle bookmark with mnemonic 采用记忆切换标记 Ctrl + #[0-9] Go to numbered bookmark 跳转到带编号的标记 Shift + F11 Show bookmark 显示标记 Refactoring 重构相关快捷键

F5 Copy 拷贝 F6 Move 移动 Alt + Delete Safe Delete 安全删除 Shift + F6 Rename 重新命名 Ctrl + Alt + N Inline Variable 嵌入变量 Ctrl + Alt + M Extract Method( Javascript only) 提取函数 Ctrl + Alt + V Introduce Variable 引入变量 Ctrl + Alt + F Introduce Field 引入域 Ctrl + Alt + C Introduce Constant 引入常量 VCS/Local History 版本控制系统/ 本地历史相关快捷键

Alt + BackQuote( ) ‘VCS'quick popup 快速弹出 VCS Ctrl + K Commit project to VCS 提交项目至 VCS Ctrl + T Update project from VCS 从 VCS 更新项目 Alt + Shift + C View recent changes 查看最新改变 General 常用的相关快捷键

Ctrl + Shift +A Find action 查找并调用编辑器的功能 Alt + #[0-9] Open corresponding tool window 快速切换打开界面模块 Ctrl + Alt + F11 Toggle full screen mode 切换全屏模式 Ctrl + Shift + F12 Toggle maximizing editor 切换最大化编辑器 Alt + Shift + F Add to Favorites 将当前文件添至收藏夹 Alt + Shift + I Inspect current file with current profile 使用当前属性检查当前文件 Ctrl + BackQuote( ) Quick switch current scheme 快速转换现有组合 Ctrl + Alt + S Open setting dialog 打开设置对话框 Ctrl + Tab Switch between tabs and tool window 标签和工具窗的转换（与 windows 快捷键冲突）

小伙伴们是不是已经对这款 javascript 的开发工具 webstrom 有所认识了呢，迫不及待的想去试试呢，保证你用了之后就爱不释手。