WebStorm基本使用

webstorm简单介绍

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

我们可以理解 IDE 就是集成了很多你想要的功能,或者你不想要的功能。换句话说就是装了很多插件的 editor ,所以到目前为止,我还觉得没必要给它装什么插件。

那么接下来开始介绍webstrom的特色功能:

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

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

任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的 * 的。
好处:省去了ctrl + s之后,在结合Firefox的vim,基本不动鼠标就可以看到结果页面了。 
坏处:没有以前的 * 标识,万一键盘误操作也会被立即存储。

任何一个编辑器只要文件关闭了就没有历史记录了,但是webstorm有。 vcs->Local History -> Show History(快捷键:ALT+~ -〉7)
好处:只要webstorm不关闭,你的文件随时可以返回到之前的操作(这也是为啥在 webstorm 里ctrl+y是删除一行的原因了)。

坏处:webstorm关闭重启后这些历史记录就没有了;还有一个坏处就是由此带来的内存消耗也必然比较大。

任何一个编辑器,除了服务器svn之外,没有本地版本,但是webstorm提供一个本地文件修改历史记录(快捷键:ALT+SHIFT+c,Mac中 ALT+Option+c)。也可以 Ctrl + E 弹出最近打开的文件。
好处:相当于本地svn。 
坏处:内存消耗也必然比较大。

集成了zencoding,HTML5,ftp,即时编辑(chrome),自动完成,基于Mozilla的JavaScript调试器,JSLint、Less支持、CoffeeScript支持、Node.js、单元测试、集成Git和svn版本控制等特性。

在编写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快捷键冲突)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,468评论 25 707
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,283评论 7 249
  • 像是被趋势,我和你都各自走上了人生所谓的正途;又像是被什么所缠绕,所困扰,在这一天一天的时间里,不知什么才是真的前...
    渺望天阅读 177评论 0 0
  • 初读这本书,感觉很荒诞,对历史的各种虚构,对密码学的神化。近代中国历史,密码学,爱国精神,秘密机构,在我看来就是一...
    little_schemer阅读 453评论 0 0