WebStorm 使用文档--转载

WebStorm 使用文档

概述

号称最好用的前端IDE，Win7 和 Mac 上各用了一段时间，感觉确实不错分享出来。版本上从8一直用到10，在设置上9到10有一次比较大的调整，下面的设置从10的使用中记录整理而来。WebStorm在下面简写为WS。

快捷键

下面介绍的快捷键和上面皮肤和快捷键风格的设置有关，如果你和我设置的不一样会有很大的不同。第一批给出的快捷键是10个，以后每批不多于5个，因为一般人的短暂记忆量是3-7个，我记快捷键的方式是每天开始编码先看一眼快捷键，但是不多看3-5个足够了，一天的编码中尽量去用一般两到三天就不用刻意去想了基本可以达到肌肉记忆的层度。

1 - 基本

编辑窗口的常用操作

  • 撤销，Undo， Win:Ctrl + Z; Mac:Com + Z
  • 恢复，Redo， Win:Ctrl + Shift + Z; Mac:Com + Shift + Z
  • 查找，Find， Win:Ctrl + F; Mac:Com + F
  • 在某一文件夹下查找内容，Find in Path， Win:Ctrl + Shift + F; Mac:Ctrl + Shift + F
  • 替换，Replace， Win:Ctrl + R; Mac:Com + R，
  • 格式化代码，Reformat Code， Win:Ctrl + Alt + L, Mac: Alt + Com + L

对当前光标所在行 或者 选中部分做操作

  • 向下复制一行或一个代码块，Duplicate Line or Block， Win:Ctrl + D; Mac: Com + D
  • 剪切，Cut， Win:Ctrl + X; Mac: Com + X
  • 删除，Delete Line， Win:Ctrl + Y; Mac: Com + Y，需要注意的是选中字符所在的行会被删掉
  • 上下移动行，Move Line Up/Down， Win:Alt + Shift + 上/下箭头;Mac:Alt + Shift + 上/下箭头
  • 上下移动代码块，Move Statement Up/Down， Ctrl + Shift + 上/下箭头，大括号内的，块状注释等都是代码块，遇到代码块也会一次跳到上面。代码块的识别有时会和想象中的不一样，所以比较适合跨代码块移动单行

2 - Tab操作

  • 关闭当前的Tab，Close Active Tab， Win:Ctrl + F4; Mac:Com + F4
  • 左右切换Tab，Select Previous/Next Tab， Win:Alt + 左右箭头; Mac:Ctrl + 左右箭头，但是这和Mac系统左右切屏的快捷键有冲突，另外左右切屏可以通过在触摸板上三指左右滑动来切屏，其实我平时也是这么用的，所以我禁用了系统切屏快捷键。禁用方式：系统偏好设置/快捷键/Mission Control/向左移动一个 space。
  • 最大化编辑窗口(隐藏所有工具窗口)，Hide All Toll Windows Win:Ctrl + Shift + F12; Mac:Com + Shift + F12，我超级喜欢的快捷方式，可以让我专注的写好当前代码块

3 - 光标移动

  • 前后跳单词，Move Caret to Previous/Next Word Win:Ctrl + 左右箭头; Mac:Alt + 左右键
  • 跳到行首行尾，Move Caret to Line Start/End Win:Home/End; Mac:Com + 左右箭头，其实这是Mac系统的快捷键也补充到这里
  • 在下一行书写，Start Next Line Win:Shift + Enter; Mac:Shift + Enter，当你在一行的中间部分改完代码需要进行下一行书写时次快捷键可以一步到位。比移先将光标到行尾再Enter换行感觉要好得多，速度也快得多
  • 在上一行书写，Start New Line Before Current， Win:Ctrl + Alt + Enter; Mac:Alt + Com + Enter
  • 跳到指定行， Win:Ctrl + G; Mac:Com + G

4 - 折叠代码

  • 折叠当前代码块，Collapse， Win:Ctrl + Num-; Mac:Com + Num-，Num-就是键盘顶部数字键旁边的减号
  • 展开当前代码块，Expand， Win:Ctrl + Num+; Mac:Com + Num+
  • 折叠全部代码块，Collapse All， Win:Ctrl + Shift + Num-; Mac:Com + Shift + Num-，这也是我超喜欢的一个快捷方式，如果代码写的规整，折叠起来可以看到代码的组织方式，在参考注释很容易找到对应的功能模块
  • 展开全部代码块，Expand All， Win:Ctrl + Shift + Num+; Mac:Com + Shift + Num+

5 - 选中

  • 选中的超级扩展，Extend Selection， Win:Ctrl + W; Mac:Com + W，请原谅我给这个快捷键起这么夸张的称谓，因为这个快捷方式是我超级超级喜欢的一个，按一次选中一个单词，两次一行，三次一个代码块，太好用了！！
  • 重命名，Rename， Win:Shift + F6; Mac:Shift + F6，这是一个有多张面孔的快捷键。在js代码中此快捷键是变量重命名，给变量起名真是一个费劲的事情，随着业务的变动变量名一定要跟着作调整，否则代码的寿命不好太长远；在html和css以及文档文件中，此快捷键重命名当前文件；在资源文件目录下，此快捷方式是给资源重命名，而且会智能同步引用。

6 - 粘贴

  • 粘贴，Paste， Win:Ctrl + V; Mac:Com + V，一个很普通的粘贴
  • 从复制历史中粘贴，Paste form History， Win:Ctrl + Shift + V; Mac:Com + Shift + V，我超级喜欢的功能，有了它就不用反复的复制了

7 - 文件

  • 打开文件，File... Win:Ctrl + Shift + N; Mac:Com + Shift + N
  • 保存全部，Save All， Win:Ctrl + S; Mac:Com + S
  • 新建文件，New... Win:Alt + N; Mac:Alt + N，在当前文件同级或者选中的文件夹下
  • 打开最近打开的文件，Recent Files Mac:Com + E，会给出一个最近打开的文件列表

设置

1 - 基本设置

  • 打开设置

Win:File/Settings, 快捷键: Ctrl + Alt + S

Mac:WebStorm/Preferences, 快捷键: Com + ,

下面的配置默认都在“设置”中设置，不再多述。

  • 皮肤

代码高亮是很必要的，个人喜欢配色柔和一点的皮肤，WS的皮肤设置分两层，第一层是大框架，第二层是编辑窗口。需要两个配合设置，不然可能出现外白里黑或者里黑外白这种诡异的界面。

第一层: Appearance & Behavior/Appearance ,在Theme下选风格，Win 和 Mac选项不一样，Win多一些，Darcula是都有的，Darcula偏黑色风格。两外建议把“Override default fonts”选中，个人认为Win下微软雅黑比较好，Mac下Baghdad字体比较好看，Size设置成14或16对眼睛好。

第二层：Editor/Colors & Fonts, 在Scheme选风格，个人同样喜欢Darcula这一风格，另外提醒一句只有把Scheme另存为自己的风格才可以修改其中的一些更详细的配置，详细配置的修改在下面第二批设置中作解释。

  • 快捷键

KeyMap，可以选择快捷键整体的规则，支持了Visual Studio、Eclipse、NetBeans等IDE的快捷方式，个人建议Win下用Default，Mac下用Mac OS X。

在下面的搜索框可以搜索你想要的快捷键，跨系统或跨风格时想要找同一个快捷方式可以通过描述来查找。后面的放大镜可以通过快捷键查找描述。

下面的设置将快捷键分了组，Editor Action是编辑窗口中的快捷方式，Main menu是对文件、Tab、各种面板操作的快捷方式。

2 - 工程

  • 在新窗口打开工程

webstorm的一个缺陷就是不能在一个IDE打开多个工程，这也是它快的一个代价。如果一定要多窗口那就多IDE那就设置一下吧： Appearance & Behavior/ System Settings/ Project Opening / Open project in new window 在新窗口中打开webstorm

  • 默认编码设置，Editor / File Encodings，IDE Encoding设置的是编辑器编辑的时候的时候按默认那种编码格式打开，Project Encoding设置的是新建一个项目此项目默认的编码格式，下面Default encoding for properties files设置上面选中的文件夹下新建文件时的默认编码格式。

3 - 代码格式

代码长度参考线

真的不建议把一行代码写的太长，嵌套太深也是要避免的，毕竟代码是给人看的，偶尔交给机器执行以下，所以代码的可读性非常重要。所以就有了代码长度参考线。在 /Editor/General/Appearance 中 勾选Show right margin 考线出现，取消勾选参考线消失。参考线的位置其实是字符数量的体现，在 /Editor/Code Style 中 Right Margin 中调整字符数量，个人建议120。

CSS空行

默认CSS格式化之后会在两个样式块间加空行，去掉此空行的配置，Editor/Code Style/CSS/Other，将 Blank lines between blocks‘ 的值设为 0。

MD文档默认换行

MD文档默认不换行，可以在左边行号的位置右击勾选"Use Soft Wraps"，这种方式每次都要设置，还有一种一劳永逸的设置方法，Settings | Editor | General | Use soft wraps in editor

4 - 代码模板

  • 编辑新文件模板，Editor / File and Code Templates， 设置新建文件中的默认内容，也可以添加自己的格式模板
  • 代码块模板，Editor / Live Templates, 代码块的模板，如果你写一个for循环还从左码到右那就太out了。定义模板的时候有几点注意：在最下面一行修改 applicable （适用范围），范围要尽量小，否则容易冲突；定义变量默认值的时候注意要加引号，否则手工输入必不可少；建议勾选 Reformat，这样就不用手动调整格式。

5 - 其他零碎

  • 设置选中文字之后，点击双引号\单引号包围选中，Editor / General / Smart keys，勾选surround selection on type quote or brace

写在最后的牢骚

每天都在写代码，应该花点时间培养一下和IDE的感情，快捷方式，代码补全，插件，是几个重要考察的点。没有那个IDE绝对的好，熟练使用是关键。业务代码写的快一点才有时间研究新的东西，不然就沦落到一个经验用三年这种悲催的境地了。快速的写代码也是一种不错的感觉。

声明

欢迎各方转载，但请注明出处： https://github.com/longze/cellar/blob/master/web/articles/webstorm/main.md

时间： 2024-08-24 15:48:50

WebStorm 使用文档--转载的相关文章

java实现支付宝接口--文档..转载

//实现java支付宝很简单,只要从支付宝官方下载 http://help.alipay.com/support/index_sh.htm下载程序,配置一下参数就OK了: 1.先到http://help.alipay.com/support/index_sh.htm下接口程序,右下角有个"接口资料下载"点击下载进入下载页面http://club.alipay.com/read.php?tid=9976972选择你要下载支付宝的接口类型:我是选择"支付宝即时到账收款接口&quo

用PDMReader工具生成数据库设计文档(转载)

来源:http://blog.csdn.net/xinglun88/article/details/19987719 第一步:下载并安装PDMReader,资源网站: http://www.pdmreader.com/ 第二步:打开PDMReader,新建项目:test: 第三步:在项目test点击右键,选择"导入数据字典",然后点击"导入PDM"图标(点击图标而不是文字),系统打开选择pdm文件对话框: 第四步:在项目test下选中你的pdm文件,在右面会出现所有

java api文档下载

JDK8 API文档(下载) JDK API文档 转载!!! java SE 8 API文档:http://www.oracle.com/technetwork/java/javase/documentation/jdk8-doc-downloads-2133158.html jdk-8-apidocs  在线版:http://docs.oracle.com/javase/8/docs/api/index.html java SE 7 API文档: http://www.oracle.com/t

Openstack python api 学习文档

Openstack python api 学习文档 转载请注明http://www.cnblogs.com/juandx/p/4953191.html 因为需要学习使用api接口调用openstack,所以上一篇写了一些使用openstack的纯api调用的方法, 但是openstack还提供了更好的python的api,只需要python的包即可,感觉更好使用. 对于compute的api,包是放在了/usr/lib/python2.7/site-packages/novaclient/目录,

struts2中利用POI导出Excel文档并下载

1.项目组负责人让我实现这个接口,因为以前做过类似的,中间并没有遇到什么太困难的事情.其他不说,先上代码: 1 package com.tydic.eshop.action.feedback; 2 3 import java.io.ByteArrayInputStream; 4 import java.io.ByteArrayOutputStream; 5 import java.io.FileInputStream; 6 import java.io.IOException; 7 import

当前不会命中断点 还没有为该文档加载任何符号 (转载)

VS2010,我改了下文红色部分就可以了,以下为转载内容: 相信很多人在网页编程时都遇到过这个问题,就是设置断点时给出提示,之后不能选中.我今天也碰到这个问题了,足足折磨了我一天.设置是debug没错,我也没有找到“C/C++->常规->调试信息格式”这个东东,估计是C++里的设置,我用的是C#.”将”要求源文件与原始版本完全匹配”的勾取消“我也试了还是不行,webconfig里的debug设置也是true.折腾了一天才发现,我要调试的文本所处的文件夹里还有一个webconfig,这里的deb

从程序员到项目经理（29）：怎样写文档【转载】

在软件项目中,文档既是一项的重要成果,也是项目管 理的有力工具.通过文档,可以稳定.明确的传达信息,实现项目内的有效沟通.所以写文档对项目经理来说,是一项必备的技能. 然而很多项目经理害怕写文档,似乎这是一个很麻烦. 很困难的工作.其实会不会写文档,只是一种外在的表现,通过一个人写文档的情况,可以看出他对工作的理解程度,发现潜在的问题和风险.一个合格的项目经理,不但不会怕写文档, 而且会觉得这是一件简单.很自然的情,就像一个人吃饭.喝水一样,何难之有? (本人拙作<程序员第二步 -从程序员到项目

[转载]正则表达式参考文档 - Regular Expression Syntax Reference.

正则表达式参考文档 - Regular Expression Syntax Reference. [原创文章,转载请保留或注明出处:http://www.regexlab.com/zh/regref.htm] 引言 正则表达式(regular expression)就是用一个“字符串”来描述一个特征,然后去验证另一个“字符串”是否符合这个特征.比如 表达式“ab+” 描述的特征是“一个 'a' 和 任意个 'b' ”,那么 'ab', 'abb', 'abbbbbbbbbb' 都符合这个特征.

如何从sun公司官网下载java API文档（转载）

相信很多同人和我一样,想去官网下载一份纯英文的java API文档,可使sun公司的网站让我实在很头疼,很乱,全是英文!所以就在网上下载了别人提供的下载!可是还是不甘心!其实多去看看这些英文的技术网站很有好处!去官网下载的东西感觉也很好! 所以: 1.进入官网http://www.oracle.com/technetwork/java/index.html 2.Oracle主页 -> download下拉菜单里找到Java for development -> 按ctrl+F搜索Java SE