一、安装WebStorm
前往官网下载WebStorm: The Smartest JavaScript IDE, by JetBrains
二、无限试用期工具
链接：百度网盘 请输入提取码
提取码：ide0
直接将压缩包拖入IDE窗口，将会自动刷新一次试用期时间。
也可以手动刷新（如上图），一般来说都会自动刷新，以后就不用管了，为了避免麻烦，可以不更新IDE以免导致工具失效。
三、常用快捷键和自动补全
1.快捷键
Ctrl+Z:撤销
Ctrl+F:查找
Ctrl+R:替换
Ctrl+E:最近打开的文件
Ctrl+B:变量声明处
Ctrl+D:复制行并粘贴到下一行
Ctrl+C:复制行
Ctrl+V:粘贴
Ctrl+X:剪切行，可以当做删除使用
Ctrl+Y:删除行
Ctrl+Alt+Space:类名或接口名提示
Ctrl+/:注释行
Ctrl+Shift+/:注释块
Ctrl+P:方法参数提示
Alt+Enter:导入包,自动修正
Alt+左键:多行编写
Ctrl+左键:查找引用位置
双击左键:选中字段
2.HTML自动补全
a.标签补全
输入‘div',敲Tab键
<div></div>b.标签+id
输入'div#div1',敲Tab键
<div id='div1'></div>c.标签+css类
输入'div.class1',敲Tab键
<div class='class1'></div>d.标签+内容
输入'div{内容}',敲Tab键
<div>内容</div>e.标签+子标签（批量）（也可以只建一个）
输入'div>p*6',敲Tab键
<div><p></p><p></p><p></p><p></p><p></p><p></p>
</div>f.混合使用（以上五种可任意混合，*操作在最后写）
输入'div#div1.class1{div1}>p*3',敲Tab键
<div id='div1' class='class1'>div1<p></p><p></p><p></p>
</div>3.CSS自动补全
a.高宽
输入'w10',Tab
width: 10px;输入'w10%',Tab
width: 10%;b.其他
使用属性首字母:值首字母的方式可以快捷键入部分CSS
如：输入'd:f',Tab
display: flex;4.JS自动补全
不用多说，输入变量、函数名前面几个字符上下键选取之后Tab就行了，变量名长可以
敲单词首字母确定，比如webSeverApiAccept,一般输入wsaa就能确定。
四、插件
webstorm本身就集成了很多东西，即使不装插件，使用也很方便快捷，以下是对webstorm的一些补充。
先讲如何使用webstorm安装插件：
settings->Plugins，在这个页面搜索就可以了。
1. CodeGlance
它在右侧生成一个代码缩略图，就像vscode那样。
2. Rainbow Brackets
它会让括号拥有多种色彩，实现括号配对，一目了然。
几种括号都会有颜色提示。
