上一篇：02【HTML快速入门】
下一篇：04【】
目录：【HTML5系列教程】
文章目录
三、WebStorm开发工具
3.1 WebStorm简介
WebStorm是JetBrains公司旗下一款 JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
- 支持的语言和框架：
提供JavaScript、ECMAScript 6、TypeScript、CoffeeScript、Dart和Flow代码辅助功能
帮助编写HTML、CSS、Less、Sass和Stylus代码
支持Node.js和主流框架，如React、Angular、 Vue.js、Meteor等
除了WebStorm，另外市面上比较流行的开发工具还有很多，例如Visual Studio Code、Sublime Text、HbuilderX、Dreamweaver等，但无论是哪款开发工具都是用来辅助我们开发的；
下图是Jetbrains公司对JavaScript开发者使用的IDE统计情况（2021年）：
3.2 WebStorm安装
参考WebStorm安装手册
3.3 WebStorm基本使用
3.3.1 创建项目
1）打开WebStorm，点击Create New Project：
2）选择Empty Project，并选择项目的路径：
3）项目创建完毕：
4）创建html文件：
Demo01.html文件如下：
3.3.2 调整字体大小
点击菜单栏上的 File->Settings->Editor->Color Scheme->Color Scheme Font 修改字体大小
有的人习惯了按住Ctrl+滚轮上下来完成字体大小的缩放，WebStorm也支持该设置：
以同样的方法添加放大字体快捷键：
3.3.3 代码自动补全
在WebStorm工具中， Ctrl+空格的快捷键，可以帮助我们补全代码，但是这个快捷键和Windows中的输入法切换快捷键冲突，需要修改WebStorm中的快捷键。 File->Settings->keymap->Main menu->code->Completion->Basic
3.3.4 WebStorm常用快捷键
- ctrl + F12: 可以显示当前文件的结构
- ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。
- ctrl + d: 行复制
- ctrl + x: 剪切行
- ctrl + r: 替换
- ctrl + / : 单行注释
- ctrl + shift + / : 块注释
- ctrl + shift + up: 行移动
- shift + alt + up: 块移动(if(){},while(){}语句块的移动)
- ctrl + b: 跳到变量申明处
- ctrl + shift + ]/[: 选中块代码
- ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
- ctrl + ‘-/+’: 可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。
- alt + ‘7’: 显示当前的函数结构。
