前端WEB编辑器-------webstrom
欲先善其事,必先利其器,如题。看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用webstrom)
我们可以理解 IDE 就是集成了很多你想要的功能,或者你不想要的功能。换句话说就是装了很多插件的 editor ,所以到目前为止,我还觉得没必要给它装什么插件。
那么接下来开始介绍webstrom的特色功能:
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)。也可以 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(上下两屏) - 本地历史功能:
找回代码的好办法
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快捷键冲突)
前端WEB编辑器-------webstrom的更多相关文章
- 前端WEB编辑器最爱——webstrom
欲先善其事,必先利其器,如题.看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用we ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
- Thinkphp下嵌套UEditor富文本WEB编辑器
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 本文实际操作于ThinkPHP框架下,现 ...
- 【ASP.NET 插件】分享一款富文本web编辑器UEditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... <%@ Page Language ...
- 强大的在线web编辑器UEditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. UEditor在线演示地址:http://u ...
- 22个所见即所得在线 Web 编辑器
前言: 关于编辑器,适合的才是最好的,接下来,我会写一些关于日志编辑器的文章,今天就写写,可能内容会比较多. --------------------------------------------- ...
- 富文本web编辑器(UEditor)
展示效果:
- 在线web编辑器
真正在线编辑的在线web编辑器 最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单. ...
- 试题公式解决方案--kindeditor集成jmeditor公式web编辑器
最近在搞一套在线的考试系统,一直为即支持公式编辑又得支持各种附件上传.图片上传.视频音频上传.文字编辑 的web编辑器而犯愁.于是乎试着把 kindeditor和jmeditor集成一下,多了不说了直 ...
随机推荐
- mysql-日志种类
MySQL有以下几种日志: 1,错误日志:记录启动.运行或停止时出现的问题,一般也会记录警告信息. 2,一般查询日志:记录建立的客户端连接和执行的语句. 3,慢查询日志:记录所有执行时间超过lo ...
- maven 打JAR包资源文件指定路径与文件读取
1.配置RESOURCES节点 有时会遇到maven打包后找不到资源文件了,其实这时候路径发生了变化,为了确保打包后路径不发生变化,指定一个固定的路径,请看下面配置 <build> ... ...
- 9、linux的特殊符
在shell中常用的特殊符号罗列如下: # ; ;; . , / \ 'string'| ! $ ${} $? ...
- Luogu 4345 [SHOI2015]超能粒子炮·改
BZOJ4591 并不会写的组合数学. 我们设$f(n, k) = \sum_{i= 0}^{k}\binom{n}{i}$,那么每一个询问要求的就是$f(n, k)$. 发现$f(i, j)$其实可 ...
- 6.7 安装vim
- 10.Redis未授权访问漏洞复现与利用
一.漏洞简介以及危害: 1.什么是redis未授权访问漏洞: Redis 默认情况下,会绑定在 0.0.0.0:6379,如果没有进行采用相关的策略,比如添加防火墙规则避免其他非信任来源 ip 访问等 ...
- Entity Framework 分页处理
在SQL中进行分页,网上已经有很多例子了,在这里我使用Linq to SQL让C#来生成分页代码,首先创建分页的扩展方法: public static class Extensions { /// & ...
- .net动态代理-EMIT,AOP实现
动态代理实现原理: 通过动态基础目标类,重写目标虚方法,.net中实现手段-il Emit.Proxy项目源码,https://github.com/1448376744/Emit.Proxy 以下是 ...
- C# Guid should contain 32 digits with 4 dashes (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx).
一.问题描述 在做C# 的 Guid 转换时,出现这个问题:Guid should contain 32 digits with 4 dashes (xxxxxxxx-xxxx-xxxx-xxxx-x ...
- Eclipse插件无法识别的解决方法汇总
参考 http://www.cnblogs.com/apollolee/archive/2013/06/18/3142243.html