热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

WebStorm使用文档--转载

WebStorm使用文档概述号称最好用的前端IDE,Win7和Mac上各用了一段时间,感觉确实不错分享出来。版本上从8一直用到10,在设置上9到10有一次比较大的调整,下面的设置从10
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


推荐阅读
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • 本文介绍如何在QT框架中使用QWebSocket和QTcpSocket实现SSL加密通信,涵盖单向认证设置。单向认证常见于Web通信场景,其中客户端验证服务端证书,而服务端不验证客户端证书。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • MySQL索引详解与优化
    本文深入探讨了MySQL中的索引机制,包括索引的基本概念、优势与劣势、分类及其实现原理,并详细介绍了索引的使用场景和优化技巧。通过具体示例,帮助读者更好地理解和应用索引以提升数据库性能。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 在 Windows 10 中,F1 至 F12 键默认设置为快捷功能键。本文将介绍几种有效方法来禁用这些快捷键,并恢复其标准功能键的作用。请注意,部分笔记本电脑的快捷键可能无法完全关闭。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文深入探讨 MyBatis 中动态 SQL 的使用方法,包括 if/where、trim 自定义字符串截取规则、choose 分支选择、封装查询和修改条件的 where/set 标签、批量处理的 foreach 标签以及内置参数和 bind 的用法。 ... [详细]
  • 如何配置Unturned服务器及其消息设置
    本文详细介绍了Unturned服务器的配置方法和消息设置技巧,帮助用户了解并优化服务器管理。同时,提供了关于云服务资源操作记录、远程登录设置以及文件传输的相关补充信息。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • PHP 5.5.0rc1 发布:深入解析 Zend OPcache
    2013年5月9日,PHP官方发布了PHP 5.5.0rc1和PHP 5.4.15正式版,这两个版本均支持64位环境。本文将详细介绍Zend OPcache的功能及其在Windows环境下的配置与测试。 ... [详细]
  • 本文介绍如何使用JPA Criteria API创建带有多个可选参数的动态查询方法。当某些参数为空时,这些参数不会影响最终查询结果。 ... [详细]
  • 随着网络安全威胁的不断演变,电子邮件系统成为攻击者频繁利用的目标。本文详细探讨了电子邮件系统中的常见漏洞及其潜在风险,并提供了专业的防护建议。 ... [详细]
author-avatar
mobiledu2502927147
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有