前端WEB编辑器最爱——webstrom

2024-04-27 14:15:41

字体：大中小

来源：转载

供稿：网友

前端WEB编辑器最爱——webstrom

欲先善其事，必先利其器，如题。看到网上一篇介绍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）。也可以 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 codeBrief Info 简单信息
Ctrl + F1Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息
Alt + InsertGenerate code…（Getters, Setters, Constructors）新建一个文件或者生成代码，…构造函数，可以创建类里面任何字段的getter与setter方法
Ctrl + OOverride methods 重载方法
Ctrl + IImplement methods 实现方法
Ctrl + Alt + TSurround 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 + WSelect successively increasing code blocks 选择代码块，一般是增量选择
Ctrl + Shift + WDecrease current selection to previous state 上个快捷键的回退，减量选择代码
Alt + QContext info 上下文信息
Alt + EnterShow intention actions and quick-fixes 意图行动，快速见效
Ctrl + Alt + LReformat code 根据模板格式对代码格式化
Tab/ Shift + TabIndent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理
Ctrl + X or Shift + DeleteCut current line or selected block to clipboard 剪切当前行或所选代码块到剪切板
Ctrl + C or Ctrl + InsertCopy current line or selected block to chipboard 拷贝当前行或者所选代码块到剪切板
Ctrl + V or Shift + InsertPaste from clipboard 粘贴剪切板上的内容
Ctrl + Shift + VPaste from recent buffers 粘贴缓冲器中最新的内容
Ctrl + DDuplicate current line or selected block 复制当前行或者所选代码块
Ctrl + YDelete line at caret 删除光标所在位置行
Ctrl + Shift + JSmart line join（HTML and JavaScript only）加入智能行（HTML 和JavaScript）
Ctrl + EnterSmart line split（HTML and JavaScript only）分离智能行（HTML 和JavaScript）
Shift + EnterStart new line 另起一行
Ctrl + Shift + UToggle case for Word at caret or selected block 光标所在位置大小写转换
Ctrl + Shift + ]/[Select till code block end/start 选择直到代码块结束/开始
Ctrl + DeleteDelete to word end 删除文字结束
Ctrl + BackspaceDelete to word start 删除文字开始
Ctrl + NumPad+/-Expand/collapse code block 扩展/缩减代码块
Ctrl + Shift+ NumPad+Expand all 扩张所有
Ctrl + Shift+ NumPad-Collapse 缩减所有
Ctrl + F4Close active editor tab 关闭活跃编辑标签