欲先善其事,必先利其器,如题。看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用webstrom)
我们可以理解 IDE 就是集成了很多你想要的功能,或者你不想要的功能。换句话说就是装了很多插件的 editor ,所以到目前为止,我还觉得没必要给它装什么插件。
那么接下来开始介绍webstrom的特色功能:
WebStorm 是 JetBrains 推出的一款商业的JavaScript开发工具
在编写CSS中,会智能的提示各种文件以及图片的路径,就不用再去确认这个文件是否存在了。
其他的特性就介绍了,想了解更多可以去webstrom官网继续寻找。看完了这么介绍以及那么多给力的特性,是不是有种冲动马上试一试这款传说中的前端神器啊?嗯。
安装成功后,肯定会有些不适,就像我一样觉得这配色真的太戳了。还有一些设置也不是我也要的。那么以下我就列出我习惯的设置。
webstorm设置技巧
如何让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->Keymap,然后双击要修改快捷的功能会有提示框出来,按提示操作
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则不需要.
以后更新
webstorm使用心得
收藏夹功能:当工程目录很庞大时,有些子目录很经常打开,但层级又很深,这时候可以把目录添加到收藏夹里面,添加成功后,左侧有个“Favorites”菜单
构造器界面:注释符合格式的话就会出现。如果是js文件则是js类的函数和对象;css文件的话则是这个css文件的概括;html文件的话则是节点的结构图。话说这几个就是为了方便查看代码的结构性.
todo界面:给代码加todo注释就会出现这个界面
双栏代码界面:右击代码选项卡上的文件,然后右键 -> spilt vertically(左右两屏)或者spilt horizontally(上下两屏)
本地历史功能:找回代码的好办法
WebStorm集成git使用
查看当前代码与版本库代码的差异:右击代码界面任意区域,选择git -> compare with然后选择要比较的版本库。
WebStorm常用快捷键
查找/代替
Webstorm快捷键Eclipse快捷键说明ctrl shift Nctrl shift R通过文件名快速查找工程内的文件(必记)ctrl shift alt Nctrl shift alt N通过一个字符快速查找位置(必记)ctrl Fctrl F在文件内快速查找代码F3ctrl K查找下一个shift F3ctrl shift K查找上一个ctrl Rctrl F文件内代码替换ctrl shift R指定目录内代码批量替换ctrl shift Fctrl H指定目录内代码批量查找
界面操作
Webstorm快捷键Eclipse快捷键说明ctrl Dctrl shift ↑复制当前行ctrl Walt shift ↑选中单词ctrl ←/→ctrl ←/→以单词作为边界跳光标位置alt insertalt insert新建一个文件或其他ctrl alt Lctrl alt L格式化代码shift tab/tabshift tab/tab减少/扩大缩进(可以在代码中减少行缩进)ctrl Yctrl D删除一行shift entershift enter重新开始一行(无论光标在哪个位置)
导航
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 缩减所有
Search/replace搜索/替代相关快捷键
Ctrl FFind 当前文件内快速查找代码
Ctrl Shift FFind in path 指定文件内寻找路径
F3Find next 查找下一个
Shift F3Find previous 查找上一个
Ctrl RReplace 当前文件内代码替代
Ctrl Shift RReplace in path 指定文件内代码批量替代
Usage Search搜索相关快捷键
Alt F7/Ctrl F7Find usages/Find usages in file 找到使用/在文件找到使用
Ctrl Shift F7Highlight usages in file文件中精彩使用
Ctrl Alt F7Show usages 显示使用
Running运行
Alt Shift F10Select configuration and run 选择构架,运行
Alt Shift F9Select configuration and debug 选择构架,修补漏洞
Shift F10Run 运行
Shift F9Debug 修补漏洞
Ctrl Shift XRun command line 运行命令行
DebuggingDebugging相关快捷键
F8Step over 不进入函数
F7Step into 单步执行
Shift F7Smart step into 智能单步执行
Shift F8Step out 跳出
Alt F9Run to cursor 运行到光标处
Alt F8Evaluate expression 评估表达
F9Resume program 重新开始程序
Ctrl F8Toggle breakpoint 切换断点
Ctrl Shift F8View breakpoints 查看断点
Navigation定位相关快捷键
Ctrl NGoto class跳转到指定类
Ctrl Shift NGo to file 通过文件名快速查找工程内的文件
Ctrl Alt Shift NGo to symbol 通过一个字符查找函数位置
F12Go back to previous tool window 进入上一个工具窗口
Shift EscHide active or last active window 隐藏活动窗口
Ctrl Shift F4Close active run/message/find/…tab 关闭活动….标签
Ctrl GGo to line 跳转到第几行
Ctrl ERecent files popup 弹出最近打开的文件
Ctrl Alt Left/RightNavigate back/forward 导航前进/后退
Alt F1Select current file or symbol in any view 查找当前选中的代码或文件在其他界面模块的位置
Ctrl B or Ctrl ClickGo to declaration跳转到定义处
Ctrl Alt BGo to implementation(s) 跳转方法实现处
Ctrl Shift BGo to type declaration 跳转方法定义处
Ctrl Shift IOpen quick definition lookup 打开定义快速查找
Ctrl UGo to super-method/super-class 跳转方法/超阶级
Alt Up/DownGo to previous/next method 在方法间快速移动定位
Ctrl ]/[Move to code block end/start 跳转到编码块结束/开始
Ctrl F12File structure popup 文件结构弹出
Ctrl HType hierarchy 类型层次
Ctrl Alt HCall hierarchy 调用层次结构
F2/ Shift F2Next/previous highlighted error 跳转到后一个/前一个错误,高亮错误或警告快速定位,使用这个快捷键可以快捷在出错的语句之间进行跳转。
Alt HomeShow navigation bar 显示导航栏
F11Toggle bookmark 切换标记
Ctrl F11Toggle bookmark with mnemonic 采用记忆切换标记
Ctrl #[0-9]Go to numbered bookmark 跳转到带编号的标记
Shift F11Show bookmark 显示标记
Refactoring重构相关快捷键
F5Copy 拷贝
F6Move 移动
Alt DeleteSafe Delete 安全删除
Shift F6Rename 重新命名
Ctrl Alt NInline Variable 嵌入变量
Ctrl Alt MExtract Method( Javascript only) 提取函数
Ctrl Alt VIntroduce Variable 引入变量
Ctrl Alt FIntroduce Field 引入域
Ctrl Alt CIntroduce Constant 引入常量
VCS/Local History版本控制系统/ 本地历史相关快捷键
Alt BackQuote( )‘VCS’quick popup 快速弹出 VCS
Ctrl KCommit project to VCS 提交项目至VCS
Ctrl TUpdate project from VCS 从VCS 更新项目
Alt Shift CView recent changes 查看最新改变
General常用的相关快捷键
Alt #[0-9]Open corresponding tool window 快速切换打开界面模块
Ctrl Alt F11Toggle full screen mode 切换全屏模式
Alt Shift FAdd to Favorites 将当前文件添至收藏夹
Alt Shift IInspect current file with current profile 使用当前属性检查当前文件
Ctrl BackQuote( )Quick switch current scheme 快速转换现有组合
Ctrl Alt SOpen setting dialog 打开设置对话框
Ctrl TabSwitch between tabs and tool window 标签和工具窗的转换(与windows快捷键冲突)