【WebStorm】前端工具开发利器webstrom专篇

---------------------------------------------------------------------------------【亲身实测】

WebStorm混搭svn

 

WebStorm混搭nodeJS

    以less和uglify-js为例

    如何用npm在root中下载模块 

----------------------------------------------------------------------------------------------【网络转帖】

webstorm简单介绍

官网地址：http://www.jetbrains.com/webstorm/features/index.html

参考地址：http://www.html5jscss.com/ide-webstrom-27.html

欲先善其事，必先利其器，如题。看到网上一篇介绍webstrom的文章，以为功能确实强大，也知道为何阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件，（传说淘宝内部推荐写js用webstrom）

咱们能够理解 IDE 就是集成了不少你想要的功能，或者你不想要的功能。换句话说就是装了不少插件的 editor ，因此到目前为止，我还以为不必给它装什么插件。

那么接下来开始介绍webstrom的特点功能：

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

1. 任何一个编辑器都须要保存(ctrl + s)，这是全部win平台上编辑类软件的特色，可是webstorm编辑文件右上角是没有那个熟悉的 * 的。
   好处：省去了ctrl + s以后，在结合Firefox的vim，基本不动鼠标就能够看到结果页面了。 
   坏处：没有之前的 * 标识，万一键盘误操做也会被当即存储。

2. 任何一个编辑器只要文件关闭了就没有历史记录了，可是webstorm有。 vcs->Local History -> Show History（快捷键：ALT+~ -〉7）
   好处：只要webstorm不关闭，你的文件随时能够返回到以前的操做（这也是为啥在 webstorm 里ctrl+y是删除一行的缘由了）。
   坏处：webstorm关闭重启后这些历史记录就没有了；还有一个坏处就是由此带来的内存消耗也必然比较大。

3. 任何一个编辑器，除了服务器svn以外，没有本地版本，可是webstorm提供一个本地文件修改历史记录（快捷键：ALT+SHIFT+c，Mac中 ALT＋Option＋c）。也能够 Ctrl + E 弹出最近打开的文件。
   好处：至关于本地svn。 
   坏处：内存消耗也必然比较大。

4. 集成了zencoding，html5，ftp，即时编辑（chrome）,自动完成,基于Mozilla的JavaScript调试器，JSLint、Less支持、CoffeeScript支持、Node.JS、单元测试、集成git和svn版本控制等特性。

5. 在编写CSS中，会智能的提示各类文件以及图片的路径，就不用再去确认这个文件是否存在了。

其余的特性就介绍了，想了解更多能够去webstrom官网继续寻找。看完了这么介绍以及那么多给力的特性，是否是有种冲动立刻试一试这款传说中的前端神器啊？嗯。

首先在官方下载页下载webstrom后，点击安装，而后一直下一步，最后会出现须要注册码界面，由于webstrom是商业的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(上下两屏)

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

WebStorm集成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快捷键冲突）