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常用快捷键

查找/代替

Webstorm快捷键 Eclipse快捷键 说明
ctrl+shift+N ctrl+shift+R 通过文件名快速查找工程内的文件(必记)
ctrl+shift+alt+N ctrl+shift+alt+N 通过一个字符快速查找位置(必记)
ctrl+F ctrl+F 在文件内快速查找代码
F3 ctrl+K 查找下一个
shift+F3 ctrl+shift+K 查找上一个
ctrl+R ctrl+F 文件内代码替换
ctrl+shift+R   指定目录内代码批量替换
ctrl+shift+F ctrl+H 指定目录内代码批量查找

界面操作

Webstorm快捷键 Eclipse快捷键 说明
ctrl+shift+A ctrl+shift+A 快速查找并使用编辑器所有功能(必记)
alt+[0-9] alt+[0-9] 快速拆合功能界面模块
ctrl+shift+F12 ctrl+shift+F12 最大区域显示代码(会隐藏其他的功能界面模块)
alt+shift+F alt+shift+F 将当前文件加入收藏夹
ctrl+alt+s ctrl+alt+s 打开配置窗口
ctrl+tab ctrl+tab 切换代码选项卡(还要进行此选择,效率差些)
alt+←/→ alt+←/→ 切换代码选项卡
ctrl+F4 ctrl+F4 关闭当前代码选项卡

代码编辑

Webstorm快捷键 Eclipse快捷键 说明
ctrl+D ctrl+shift+ 复制当前行
ctrl+W alt+shift+ 选中单词
ctrl+←/→
ctrl+←/→
以单词作为边界跳光标位置
alt+insert alt+insert 新建一个文件或其他
ctrl+alt+L ctrl+alt+L 格式化代码
shift+tab/tab shift+tab/tab 减少/扩大缩进(可以在代码中减少行缩进)
ctrl+Y ctrl+D 删除一行
shift+enter shift+enter 重新开始一行(无论光标在哪个位置)

导航

Webstorm快捷键 Eclipse快捷键 说明
esc esc 进入代码编辑区域
alt+F1 alt+F1 查找代码在其他界面模块的位置,颇为有用
ctrl+G ctrl+L 到指定行的代码
ctrl+]/[ ctrl+]/[ 光标到代码块的前面或后面
alt+up/down ctrl+shift+up/down 上一个/下一个方法

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快捷键冲突)

webstorm工具使用详解的更多相关文章

  1. Linux命令工具 top详解

    Linux命令工具 top详解 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.top是一个动态显示过程,即可以通过用户按键来不 ...

  2. Lua包管理工具Luarocks详解 - 15134559390的个人空间 - 开源中国社区

    Lua包管理工具Luarocks详解 - 15134559390的个人空间 - 开源中国社区 Lua包管理工具Luarocks详解

  3. [转]网络性能评估工具Iperf详解(可测丢包率)

    原文链接:安全运维之:网络性能评估工具Iperf详解:http://os.51cto.com/art/201410/454889.htm 参考博文:http://linoxide.com/monito ...

  4. IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...

  5. IE8“开发人员工具”使用详解上(各级菜单详解)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/03/24/kaifarenyuangongju.html IE8“开发人员工具”使用详解上(各 ...

  6. 【Android 应用开发】Ubuntu 下 Android Studio 开发工具使用详解 (旧版本 | 仅作参考)

    . 基本上可以导入项目开始使用了 ... . 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/21035637 ...

  7. 批量执行工具PSSH详解

    批量执行工具PSSH详解 pssh是一个python编写可以在多台服务器上执行命令的工具,同时支持拷贝文件,是同类工具中很出色的,使用必须在各个服务器上配置好密钥认证访问. 安装pssh包 yum 安 ...

  8. 自动化运维工具——ansile详解

    自动化运维工具——ansible详解(一) 目录 ansible 简介 ansible 是什么? ansible 特点 ansible 架构图 ansible 任务执行 ansible 任务执行模式 ...

  9. Webstorm使用教程详解

    Webstorm使用教程详解 Webstorm垂直分栏.左右分栏 Webstorm 主题.背景.颜色等设置的导入导出   使用WebStorm开发web前端 网页中文乱码问题的解决方案 Webstor ...

随机推荐

  1. [HAOI 2008]木棍分割

    Description 题库链接 有 \(n\) 根木棍,第 \(i\) 根木棍的长度为 \(L_i\) , \(n\) 根木棍依次连结了一起,总共有 \(n-1\) 个连接处.现在允许你最多砍断 \ ...

  2. 绝世好题bzoj4300

    Description 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). Input 输入文件共2行. 第一行包括一个整数 ...

  3. ●CodeForces 518D Ilya and Escalator

    题链: http://codeforces.com/problemset/problem/518/D题解: 期望dp. 定义dp[t][i]表示在第t秒开始之前,已经有了i个人在电梯上,之后期望能有多 ...

  4. [BZOJ]3532: [Sdoi2014]Lis

    Time Limit: 10 Sec  Memory Limit: 512 MB Description 给定序列A,序列中的每一项Ai有删除代价Bi和附加属性Ci.请删除若干项,使得4的最长上升子序 ...

  5. BZOJ3065(替罪羊树套线段树)

    以前看到这题都瑟瑟发抖,终于过了心情舒畅. 按下标为关键字建替罪羊树,每个结点开一个权值线段树,维护的这个结点代表的子树的信息. 这题还得垃圾回收,自己yy的,不知对不对.. #include < ...

  6. Spring学习笔记2——创建Product对象,并在其中注入一个Category对象

    第一步:创建Product类.在Product类中有对Category对象的set和get方法 package com.spring.cate; public class Product { priv ...

  7. Java连接FTP成功,但是上传是失败,报错:Connected time out

    Java代码在本机上传文件到FTP服务器的时候成功,但是部署到测试服务器的时候出现,连接FTP成功但是上传失败,并且报Connected time out错误: 测试服务器和FTP服务都在阿里云上:( ...

  8. 异步 JavaScript 之 macrotask、microtask

    1.异步任务运行机制 先运行下面的一段代码: console.log('script start'); setTimeout(function() { console.log('setTimeout' ...

  9. 自定义shell终端提示符及颜色即修改 PS1文件 (以Centos为例)

    Linux修改Shell命令提示符及颜色 1. Linux登录过程中加载配置文件顺序: /etc/profile → /etc/profile.d/*.sh → ~/.bash_profile → ~ ...

  10. AMD,CMD,UMD,CommonJS

    http://www.jianshu.com/p/bd4585b737d7 http://www.jianshu.com/p/09ffac7a3b2c