WebStorm的setting设置

webStorm的安装网上教程很多，我就不展示了

创建项目

2019年版的webStorm支持的项目

Empty Project ----一个空的项目

HTML5 Boilerplate ----HTML5开发框架

React App ----基于React.js用来开发iOS和Android原生App。

Bootstrap ----Bootstrap是Twitter推出的一个用于前端开发的开源工具包。

Foundation ----Foundation 是一个易用、强大而且灵活的响应式前端框架，用于构建基于任何设备上的响应式网站、 Web应用和电子邮件。结构语义化、移动设备优先、完全可定制。

React Native ----ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。

Node.js ----是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。

Node.js Express App ----Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站

Cordova App ----Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

Meteor App ----Meteor是跨时代的全栈Web开发框架，Github stars数已超越Ruby on Rails。使用它能够迅速地开发实时的（Real-Time）和响应式的（Reactive）应用，并且可以在一套代码中支持Web，iOS，Android，

Yeoman ----Yeoman是Google的团队和外部贡献者团队合作开发的，他的目标是通过Grunt（一个用于开发任务自动化的命令行工具）和Bower（一个HTML、CSS、Javascript和图片等前端资源的包管理器）的包装为开发者创建一个易用的工作流。

Vue.js ----是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

Dart ----Dart是一种基于类的可选类型化编程语言，设计用于创建Web应用程序。

Angular JS ----AngularJS有着诸多特性，最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。

Angular CLI ----Angular CLI 帮助开发者快速创建Angular 2项目和组件

以往版本支持的项目还有：
Web Starter Kit ----Web Starter Kit 是 Google的一个开源项目,它里面提供了一些工具,比如 BrowserSync,实时的预览项目的变化,在不同浏览器上同步页面的行为。

WebStorm的常用的setting设置

WebStorm如何更改主题（字体&配色）:
File -> settings -> Editor -> colors -> scheme name.主题下载地址

WebStorm如何设置字体：
File -> Settings->Appearance中勾选Override default fonts by (not recommended)，设置Name:NSimSun，Size:12

如何修改WebStorm快键键：
File -> Settings->Keymap，然后双击要修改快捷的功能会有提示框出来，按提示操作

如何WebStorm换成自己熟悉编辑器的快键键：
File ->Settings->Keymap，支持像Visual Studio、Eclipse、NetBeans这样的主流IDE。

javascript类库提示。
File -> settings ->Languages&Frameworks–> Javascript -> Libraries -> 然后在列表里选择自己经常用到的javascript类库，最后Download and Install就ok了.

快捷键

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快捷键冲突）