WebStorm的入门使用
WebStorm建立在开源IntelliJ平台之上,JetBrains已经开发和完善了超过15年。其提供了统一的UI,可与许多流行的版本控制系统配合使用,确保在git,GitHub,SVN,Mercurial和Perforce之间提供一致的用户体验。WebStorm提供可定制功能,调整它以完全适合您的编码风格,从快捷方式,字体和视觉主题到工具窗口和编辑器布局。
智能编码辅助
WebStorm可以帮助您编写出色的代码。其智能编辑器具有代码完成,动态代码分析,代码格式化和重构,可提高您的工作效率,并将您的开发体验提升到一个全新的水平。
支持的语言和框架
WebStorm提供JavaScript,ECMAScript 6,TypeScript,CoffeeScript,Dart和Flow 的一流编码帮助。
WebStorm可以帮助您编写HTML,CSS,Less,Sass和Stylus代码。
最重要的是,您可以受益于对Node.js和流行框架的高级支持,例如React,Angular,Vue.js,Meteor等。
代码智能辅助功能
WebStorm分析您的项目,为应用程序中定义的所有方法,函数,模块,变量和类提供最佳代码完成结果。Сoding协助是上下文感知的,也可以是特定于框架的。
在WebStorm中使用CSS时,享受属性及其值的代码完成。在Less和Sass中,获得mixins的帮助。当然,在HTML中,您可以获得所有标签和属性的代码完成。
代码质量分析与检测
WebStorm有数百种内置检查功能,涵盖所有支持的语言。除此之外,您还可以使用ESLint,TSLint,Stylelint,JSCS,JSHint和JSLint。
在您键入时,WebStorm编辑器会直接报告所有错误和警告,并提供许多快速修复选项。
WebStorm具有可能问题的任何代码行都标记在右侧编辑器装订线中,因此您可以轻松地在长文件中发现错误和警告。
您还可以使用WebStorm为整个项目运行代码质量分析,并自动应用选定的快速修复程序。
webstorm使用技巧
-
WebStorm如何更改主题(字体&配色):
File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址 -
如何让webstorm启动的时候不打开工程文件:
File -> Settings->General去掉Reopen last project on startup. -
WebStorm如何完美显示中文:
File -> Settings->Appearance中勾选Override default fonts by (not recommended),设置Name:NSimSun,Size:12 -
WebStorm如何显示行号:
File -> Settings->Editor,”Show line numbers”打上勾,就显示行号了 -
WebStorm如何让代码自动换行:
File -> settings -> Editor “Use Soft Wraps in editor” 打上钩,代码就自动换行了 -
如何点击光标,如何WebStorm显示在本行末尾:
File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。 -
如何修改WebStorm快键键:
File -> Settings->Keymap,然后双击要修改快捷的功能会有提示框出来,按提示操作 -
如何WebStorm换成自己熟悉编辑器的快键键:
File ->Settings->Keymap,支持像Visual Studio、Eclipse、NetBeans这样的主流IDE。 -
javascript类库提示。
File -> settings -> Javascript -> Libraries -> 然后在列表里选择自己经常用到的javascript类库,最后Download and Install就ok了. -
在WebStorm中开发js时发现,需要ctrl return 才能选候选项:
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改为 “Always” -
WebStorm中js提示比较迟缓设置策略
File -> Code Completion -> Autopopup in 下 1000改为0 -
WebStorm中git配置:
File -> settings -> Editor -> github,进去改github的账户,如果没有git则不需要. -
WebStorm的插件安装:
File ->plugins,然后就选择给力的插件们再安装.(“css-X-fire”插件,用于当使用firebug修改css属性时,编辑器内的css代码也会发生变化。)
webstorm使用心得
-
WebStorm的收藏夹功能:
当工程目录很庞大时,有些子目录很经常打开,但层级又很深,这时候可以把目录添加到收藏夹里面,添加成功后,左侧有个“Favorites”菜单 -
WebStorm的面包屑导航:
除了左侧的工程页面,可以选择目录之外,在顶部菜单下有一个类似网站面包屑导航一样的目录也可以实现相同功。点击每个目录就会有下拉菜单显示其下的子目录,很实用. -
WebStorm的构造器界面:
注释符合格式的话就会出现。如果是js文件则是js类的函数和对象;css文件的话则是这个css文件的概括;html文件的话则是节点的结构图。话说这几个就是为了方便查看代码的结构性. -
WebStorm的todo界面:
给代码加todo注释就会出现这个界面 -
WebStorm的双栏代码界面:
右击代码选项卡上的文件,然后右键 -> spilt vertically(左右两屏)或者spilt horizontally(上下两屏) -
WebStorm的本地历史功能:
找回代码的好办法
WebStorm集成git使用
webstorm中只集成了git的常用操作,并不能完全替代命令行工具。在界面的右下角可以查看处于哪个git分支。也可以在上面点击切换或者新建分支。
-
查看当前代码与版本库代码的差异:
右击代码界面任意区域,选择git -> compare with然后选择要比较的版本库。
webstorm快捷键说明
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 关闭活跃编辑标签
WebStorm的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 指定文件内代码批量替代
WebStorm的Usage Search搜索相关快捷键
-
Alt F7/Ctrl F7
Find usages/Find usages in file 找到使用/在文件找到使用 -
Ctrl Shift F7
Highlight usages in file文件中精彩使用 -
Ctrl Alt F7
Show usages 显示使用
WebStorm的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 运行命令行
WebStorm的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 查看断点
WebStorm的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 显示标记
WebStorm的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 引入常量
在WebStorm中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 查看最新改变
使用WebStorm时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快捷键冲突)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanffbja
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01