03【WebStorm开发工具】

---

上一篇：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常用快捷键

1. ctrl + F12: 可以显示当前文件的结构
2. ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。
3. ctrl + d: 行复制
4. ctrl + x: 剪切行
5. ctrl + r: 替换
6. ctrl + / : 单行注释
7. ctrl + shift + / : 块注释
8. ctrl + shift + up: 行移动
9. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
10. ctrl + b: 跳到变量申明处
11. ctrl + shift + ]/[: 选中块代码
12. ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
13. ctrl + ‘-/+’: 可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。
14. alt + ‘7’: 显示当前的函数结构。