本文作者:电脑知识教程网

WebStorm快速入门指南,开发者必备!

电脑知识教程网 2023-09-01 09:23:10
后台-系统设置-扩展变量-手机广告位-内容正文顶部
摘要: WebStorm建立在开源IntelliJ平台之上,JetBrAIns已经开发和完善了超过15年。其提供了统一的UI,可与许多流行的版本控制系统配合使用,确保在git,GitHub,SVN,Mercurial和Perfo...

WebStorm建立在开源IntelliJ平台之上,JetBrAIns已经开发和完善了超过15年。其提供了统一的UI,可与许多流行的版本控制系统配合使用,确保在git,GitHub,SVN,Mercurial和Perforce之间提供一致的用户体验。WebStorm提供可定制功能,调整它以完全适合您的编码风格,从快捷方式,字体和视觉主题到工具窗口和编辑器布局。

Mac上好用的虚拟机分享,虚拟操作技术哪家强,这次真没有蓝翔!

有了虚拟机,就可以在 Mac OS 系统上跑 Windows 应用了,很大程度上弥补了部分重要软件没有 Mac OS 版本的遗憾,Office、CDA什么的都可以哦!甚至还可以玩大型网游!

智能编码辅助
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快捷键冲突)

设计与众不同的房屋用哪个3D软件?盘点那些MAC上好用的3D建筑家居设计软件!

建筑设计乃至城市设计正在逐渐从二维走向三维,这种变化被认为将会带来一系列建筑设计、信息软件行业的“新融合”并释放新的空间。下面小编分享几款专业的3D建筑家居设计软件。

后台-系统设置-扩展变量-手机广告位-内容正文底部
未经允许不得转载:

作者:电脑知识教程网,原文地址:WebStorm快速入门指南,开发者必备!发布于2023-09-01 09:23:10
转载或复制请以超链接形式并注明出处 演示站

分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

留言与评论(共有 0 条评论)
   
验证码: