WebStorm的入门使用介绍总结

WebStorm建立在开源IntelliJ平台之上，JetBrains已经开发和完善了超过15年。其提供了统一的UI，可与许多流行的版本控制系统配合使用，确保在git，GitHub，SVN，Mercurial和Perforce之间提供一致的用户体验。WebStorm提供可定制功能，调整它以完全适合您的编码风格，从快捷方式，字体和视觉主题到工具窗口和编辑器布局。

智能编码辅助

WebStorm可以帮助您编写出色的代码。其智能编辑器具有代码完成，动态代码分析，代码格式化和重构，可提高您的工作效率，并将您的开发体验提升到一个全新的水平。

支持的语言和框架

WebStorm提供JavaScript，ECMAScript 6，TypeScript，CoffeeScript，Dart和Flow 的一流编码帮助。

WebStorm可以帮助您编写HTML，CSS，Less，Sass和Stylus代码。

最重要的是，您可以受益于对Node.js和流行框架的高级支持，例如React，Angular，Vue.js，Meteor等。

代码智能辅助功能

WebStorm分析您的项目，为应用程序中定义的所有方法，函数，模块，变量和类提供最佳代码完成结果。Сoding协助是上下文感知的，也可以是特定于框架的。

在WebStorm中使用CSS时，享受属性及其值的代码完成。在Less和Sass中，获得mixins的帮助。当然，在HTML中，您可以获得所有标签和属性的代码完成。

代码质量分析与检测

WebStorm有数百种内置检查功能，涵盖所有支持的语言。除此之外，您还可以使用ESLint，TSLint，Stylelint，JSCS，JSHint和JSLint。

在您键入时，WebStorm编辑器会直接报告所有错误和警告，并提供许多快速修复选项。

WebStorm具有可能问题的任何代码行都标记在右侧编辑器装订线中，因此您可以轻松地在长文件中发现错误和警告。

您还可以使用WebStorm为整个项目运行代码质量分析，并自动应用选定的快速修复程序。

webstorm使用技巧

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

webstorm使用心得

• WebStorm的收藏夹功能:
• 当工程目录很庞大时，有些子目录很经常打开，但层级又很深，这时候可以把目录添加到收藏夹里面，添加成功后，左侧有个“Favorites”菜单
• WebStorm的面包屑导航：
• 除了左侧的工程页面，可以选择目录之外，在顶部菜单下有一个类似网站面包屑导航一样的目录也可以实现相同功。点击每个目录就会有下拉菜单显示其下的子目录，很实用.
• WebStorm的构造器界面:
• 注释符合格式的话就会出现。如果是js文件则是js类的函数和对象；css文件的话则是这个css文件的概括；html文件的话则是节点的结构图。话说这几个就是为了方便查看代码的结构性.
• WebStorm的todo界面：
• 给代码加todo注释就会出现这个界面
• WebStorm的双栏代码界面：
• 右击代码选项卡上的文件，然后右键 -> spilt vertically(左右两屏)或者spilt horizontally(上下两屏)
• WebStorm的本地历史功能:
• 找回代码的好办法

WebStorm集成git使用

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

• 查看当前代码与版本库代码的差异:
• 右击代码界面任意区域，选择git -> compare with然后选择要比较的版本库。

webstorm快捷键说明

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 关闭活跃编辑标签

WebStorm的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 指定文件内代码批量替代

WebStorm的Usage Search搜索相关快捷键

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

WebStorm的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 运行命令行

WebStorm的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 查看断点

WebStorm的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 显示标记

WebStorm的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 引入常量

在WebStorm中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 查看最新改变

使用WebStorm时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快捷键冲突）