看到网上一篇介绍webstrom的文章，感觉功能真的很强大，也知道为什么从阿里巴巴前端传输到github的文件都有一个。idea文件(据说淘宝内部推荐用webstrom写js)

我们可以理解IDE集成了很多你想要或者不想要的功能。换句话说，就是有很多插件的编辑器，到目前为止，我认为没有必要安装任何插件。

然后，让我们开始介绍webstrom的特性：

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

每个编辑器都需要保存(ctrl+s)，这是所有win平台上编辑软件的特点，但是webstorm编辑文件的右上角没有*那么熟悉。优点：保存ctrl s后，结合Firefox的vim，不用移动鼠标就可以看到结果页面。缺点：没有以前的*标志，万一键盘误操作会立即保存。只要文件关闭，任何编辑器都没有历史记录，但webstorm有。vcs-Local History-Show History(快捷键：alt ~-> 7)的优点：只要webstorm没有关闭，你的文件总是可以回到之前的操作(这也是ctrl在webstorm中删除一行的原因)。缺点：webstorm关闭重启后，这些历史记录就没了；另一个缺点是，由此产生的内存消耗必须相对较大。除了服务器svn，没有任何编辑器的本地版本，但是webstorm提供了本地文件修改历史(快捷键：ALT SHIFT c)。也可以Ctrl E弹出最近打开的文件。好处：相当于本地svn。缺点：内存消耗一定比较大。它集成了zencoding、html5、ftp、chrome、自动补全、基于Mozilla的JavaScript调试器、JSLint、Less支持、CoffeeScript支持、Node。JS、单元测试、集成git和svn版本控制等。在编写CSS时，会智能提示各种文件和图片的路径，不需要确认这个文件是否存在。还介绍了其他功能。如果你想了解更多，可以继续在webstrom官网寻找。看完这个介绍和这么多强大的功能，是不是有一种冲动想马上尝试一下这个传奇的前端神器？嗯。

首先，在官方下载页面下载webstrom后，点击安装，然后继续下一步。最后会出现一个需要注册码的界面，因为webstrom是商业IDE，中国屌丝的前端肯定没有足够的钱买这么贵的神器。别担心，我们可以用WebStorm的钥匙来学习使用这个前端神器。呵呵~ ~ ~ ~

安装成功后，肯定会有一些不适。和我一样，我觉得配色真的太戳了。有些设置我也不想要。然后我会列出我习惯的设置。

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

如何更改主题(字体颜色匹配):文件-设置-编辑器-颜色字体-方案名。如何使主题下载地址在webstorm启动时不打开项目文件：文件-设置-常规删除重新打开sta Rtup上的最后一个项目。如何完美显示中文：勾选覆盖默认字体by(不推荐)在文件-设置-外观，设置名称Name:NSimSun，大小：12如何显示行号：文件-设置-编辑器，勾选“显示行号”显示行号以及如何自动换行代码。文件-设置-编辑器“在编辑器中使用软包装”将自动包装代码。单击光标并将其显示在行尾。文件-设置-编辑器“允许在行尾放置插入符号”就可以了。如何修改快捷键：文件-设置-快捷键映射，然后双击要修改的快捷键功能，弹出提示框。按提示改为快捷键：文件-设置-键盘图，熟悉编辑器，支持Visual Studio、Eclipse、NetBeans等主流IDE。Javascript类库提示。文件-设置-javascript-库-然后在列表中选择你经常使用的JavaScript类库，最后下载安装就可以了。开发js时需要Ctrl return选择候选：文件-设置-编辑器-代码完成-预选择第一个建议：“smart”到“always”JS提示慢文件-代码Completi On-autoopup in，将1000改为0git配置：文件-设置-编辑器-github，更改github账号。如果没有git，那就没必要了。插件安装：文件-插件，然后选择功能强大的插件进行安装。(“css-X-fire”插件用于在firebug修改css属性时，在编辑器中更改css代码。)稍后更新

使用网络风暴的经验

收藏夹功能：

当项目目录庞大时，往往会打开一些子目录，但层次很深。此时，您可以将目录添加到收藏夹。添加成功后，左侧有一个“收藏夹”菜单

面包屑导航：

除了左边的工程页面，还可以选择一个目录，顶部菜单下有一个类似网站面包屑导航的目录，也可以实现同样的功能。点击每个目录，一个下拉菜单会显示其下的子目录，非常实用。

构造器接口：

如果符合格式，将出现注释。如果是js文件，则是js类的函数和对象；css文件是这个css文件的摘要；Html文件是节点的结构图。换句话说，这些只是为了方便检查代码的结构。

Todo界面：

向代码中添加待办事项注释，将出现此界面

两列代码接口：

右键单击代码选项卡上的文件，然后右键单击垂直拆分(左右屏幕)或水平拆分(上下屏幕)

用本地历史函数：检索代码的好方法

Git用法

Webstorm只集成了git的常用操作，不能完全替代命令行工具。在界面的右下角，你可以看到你在哪个git分支。您也可以单击“切换”或在其上创建新的分支。

检查当前代码和版本库代码：之间的差异

右键单击代码界面的任何区域，选择git-compare with，然后选择要比较的版本库。

webstorm快捷键说明：

编辑编辑相关快捷键

控制空间：基本代码完成（任何类、方法或变量的名称)基本代码完成（任何类、函数或者变量名称),改为选择移位输入：完成语句补全当前语句参数信息（在方法调用参数中)参数信息包括方法调用参数将鼠标放在代码简介信息上简单信息计算机的ctrl按键在插入符号处显示错误或警告的描述显示光标所在位置的错误信息或者警告信息替换插入生成代码…(获取器、设置器、构造器)新建一个文件或者生成代码，…构造函数，可以创建类里面任何字段的吸气剂与作曲者方法Ctrl OOverride方法重载方法计算机的ctrl按键实现方法实现方法ctrl Alt t用…(如果，否则，尝试，捕捉，对于，等等)用* 来围绕选中的代码行，(* 包括如果、同时、试着接住等)Ctrl/Comment/取消对行注释的注释行注释/取消行注释按住计算机的ctrl按键键移动/注释/取消注释块注释块注释/取消块注释按住计算机的ctrl按键键并选择连续增加的代码块选择代码块，一般是增量选择按住计算机的ctrl按键键并按下变化键，将当前选择还原到以前的状态上个快捷键的回退，减量选择代码Alt QContext信息上下文信息Alt EnterShow显示意向操作和快速修复意图行动，快速见效ctrl+Alt+lre format代码根据模板格式对代码格式化Tab/移位表格插入/取消插入选定的行对所选行进行缩排处理/撤销缩排处理ctrl X或Shift delete将当前行或选定块剪切到剪贴板剪切当前行或所选代码块到剪切板按住计算机的ctrl按键键或按住计算机的ctrl按键键插入将当前行或选定块复制到芯片板上拷贝当前行或者所选代码块到剪切板按住计算机的ctrl按键键或变化键插入从剪贴板粘贴粘贴剪切板上的内容从最近的缓冲区中按住计算机的ctrl按键键移动VPaste粘贴缓冲器中最新的内容按住计算机的ctrl按键键复制当前行或选定块复制当前行或者所选代码块计算机的ctrl按键键删除插入符号处的行删除光标所在位置行Ctrl Shift JSmart线连接（仅限超文本标记语言和JavaScript)加入智能行(HTML和（只限于超文本标记语言和JavaScript)分离智能行(HTML和移动输入开始新的一行另起一行按住计算机的ctrl按键键并按下变化键，在插入符号或选定块光标所在位置大小写转换ctrl Shift]/[选择直到代码块结束/开始选择直到代码块结束/开始计算机的ctrl按键删除删除到单词结尾删除文字结束计算机的ctrl按键后退删除到单词开始删除文字开始ctrl/NumPad/-展开/折叠代码块扩展/缩减代码块ctrl Shift NumPad全部展开扩张所有按住ctrl键并按住Shift键折叠缩减所有计算机的ctrl按键关闭活动编辑器选项卡关闭活跃编辑标签搜索/替换搜索/替代相关快捷键

ctrl+F查找当前文件内快速查找代码在路径中查找指定文件内寻找路径第三子代查找下一个查找下一个F3档查找上一个查找上一个替换当前文件内代码替代路径中的替换指定文件内代码批量替代用法搜索搜索相关快捷键

Alt F7/Ctrl F7查找用法/在文件中查找用法找到使用/在文件找到使用按住ctrl键移动F7突出显示文件中的用法文件中精彩使用ctrl+Alt+F7显示用法显示使用运转运行

Alt Shift F10选择配置并运行选择构架，运行按住变化键F9选择配置和调试选择构架，修补漏洞转移F10跑运行Shift F9调试修补漏洞从编辑器中按住计算机的ctrl按键键并移动F10运行上下文配置从编辑运行内容构架ctrl+Shift+X运行命令行运行命令行调试相关快捷键

F8单步执行不进入功能F7单步执行Shift F7智能单步执行Shift F8单步执行跳出Alt F9运行到光标处运行到光标处Alt F8评估表达式评估表达式F9恢复程序重启程序ctrl F8切换断点切换断点Ctrl Shift F8查看断点查看断点导航定位相关快捷键

Ctrl N转到类跳转到指定的类Ctrl Shift N转到文件按文件名快速查找项目中的文件Ctrl Alt Shift N转到符号按一个字符查找函数位置Alt右/左转到下一个/上一个编辑器选项卡转到下一个/上一个编辑器选项F12返回上一个工具窗口输入上一个工具窗口Esc转到编辑器(从工具窗口) 从工具窗口进入编辑器按住shift键并按住ESC键隐藏活动窗口或最后一个活动窗口隐藏活动窗口按住Ctrl键并按住Shift键并按住F4键关闭活动运行/消息/查找/…选项卡关闭活动。 tab Ctrl G转到行跳转到哪一行Ctrl E最近打开的文件弹出最近打开的文件Ctrl Alt左/右向后/向前导航向前/Back ctrl shift backspace导航到最后一个编辑位置导航到最新的编辑altf1在任何视图中选择当前文件或符号在其他界面模块中查找当前选定代码或文件的位置ctrl B或Ctrl单击转到声明跳转到定义Ctrl Alt B转到实现跳转方法的实现Ctrl Shift B转到类型声明跳转方法定义ctrl shift I打开快速定义查找打开定义快速查找Ctrl U转到超方法/超类跳转方法/超类alt向上/向下转到上一个/下一个方法在方法之间快速移动定位Ctrl】/【移动到代码块结束/开始跳转到代码块结束/开始Ctrl F12文件结构弹出文件结构弹出Ctrl H类型层次结构类型层次结构Ctrl Alt H调用层次结构调用层次结构F2/shift F2下一个/上一个突出显示的错误跳转到下一个/上一个错误，突出显示错误或警告快速定位，使用此快捷键快速在错误语句之间跳转。 F4/Ctrl输入编辑源代码/查看源代码编辑源代码/检查源代码Alt Home显示导航栏显示导航栏F11切换书签切换标记ctrl F11切换带助记符的书签采用内存切换标记Ctrl #[0-9]转到带编号的书签跳转到带编号的标记Shift F11显示书签显示标记重构重构相关快捷键

F5复制复制F6移动移动Alt删除安全删除安全删除Shift F6重命名Ctrl Alt N内联变量嵌入变量ctrl alt m提取方法(仅限JavaScript)提取函数Ctrl Alt V引入变量引入变量Ctrl Alt F引入字段引入域Ctrl Alt C引入常量引入常量VCS/本地历史版本控制系统/本地历史相关快捷键

AltbackQuote()“VCS”快速弹出快速弹出VCSCtrl K提交项目到VCS提交项目到VCSCtrl T更新项目从VCS更新项目Alt Shift C查看最近的更改查看常规常用的相关快捷方式

Ctrl Shift A Find操作查找并调用编辑器功能Alt #[0-9]打开对应的工具窗口快速切换打开界面模块Ctrl Alt F11切换全屏模式切换全屏模式ctrl shift F12切换最大化编辑器切换最大化编辑器Alt Shif T F添加到收藏夹将当前文件添加到收藏夹alt shift I用当前配置文件检查当前文件Ctrl BackQuote() 使用当前属性快速切换当前方案快速转换现有组合Ctrl Alt S打开设置对话框打开设置对话框Ctrl Tab在选项卡和工具窗口标签之间切换以及工具窗口转换(与窗口快捷键冲突)

有没有你的朋友已经知道了webstrom，一个javascript开发工具，迫不及待的想尝试一下，所以一定要保证用了之后放不下。