说实话，WebStorm 就是个专门写网页代码的软件，你写 HTML、CSS、JavaScript 还有 Vue、React 这些框架都能用它，不用来回换工具，一个软件全搞定。它会自动提示代码、查错，还能直接调试，新手老手都能用，算是前端开发里挺火的一个工具。

1、将下好的安装包进行解压

2、解压后得到一个文件夹，打开它 

3、以管理员身份运行

4、点Next

5、点Browse...选择安装位置，然后点Next

6、系统位数根据您的电脑系统位数选择，其他根据需求选择，点Next

7、点Install

8、安装中请等待

9、安装结束，点Finish 

10、返回刚开始解压出来的安装包，复制如下图安装包

11、将刚刚复制的安装包，粘贴到如下图文件里

12、在桌面找到如下图软件，并打开它

13、点OK

14、点击Skip Remaining and Set Defaults

15、选择 Evaluate for free，然后点 Evaluate

16、点Continue

17、软件主界面打开，放在这

18、将刚才11步放到C盘的jetbrains-agent-latest文件左键按住，拖到软件主界面上

19、点Restart

20、激活方式选择默认的 Activation Code，点 为WebStorm 安装jetbrains-agent

21、点是，重启

22、WebStorm重新打开后，点Configure，选择Manage License

 23、可以看到，WebStorm激活成功。OK，到此英文版的软件安装激活完成。后面是汉化步骤，不需要汉化的可以跳过。

24、返回刚开始解压出来的安装包，复制如下图文件

25、在桌面找到此软件，打开文件所在位置

26、点击WebStorm 2019.3.3，进入到WebStorm 2019.3.3这一层目录文件夹

27、接着打开Lib文件

28、将24步复制的 resources_zh_CN_WebStorm_2019.3_r1.jar 文件 粘贴 到里面

29、打开此软件

30、OK安装完成

我第一次用的时候真的懵圈，界面按钮太多了，左边右边全是窗口，不知道该点哪。之前用惯了简单的编辑器，突然换成这个，光找新建文件的按钮都找了半天，更别说那些提示、调试功能了，完全摸不着头脑。当时就觉得这软件好复杂，差点直接放弃换回旧工具。

用久了才发现是真香，现在不管是大学做课设还是工作写项目，我基本都用它。上学那时候做网页课设，要写 HTML 结构、CSS 样式还有 JS 交互，WebStorm 直接帮我补全代码，还能实时标出哪里写错了，比自己瞎找错误快多了。工作后做 Vue 项目更明显，打开项目它自动索引所有文件，找组件、查函数定义，点一下就跳过去了，特别方便。

我跟你们说，新手用它特别容易踩坑。第一个就是刚下载完，默认设置占内存大，开个大项目就卡，我刚开始不知道，卡了好多次才学会调内存设置。第二个坑是插件装太多，看见有用的就装，结果启动变慢，还容易冲突，其实它自带的功能就够用，别乱装插件。还有就是提示太智能，有时候会自动补一堆东西，新手容易跟着乱选，反而写错，建议刚开始先把自动补全调保守点。

常见问题也挺多的，比如打开项目一直转圈索引，半天用不了，这时候可以把 node_modules 这种没用的目录排除掉，索引就快了。还有调试的时候断点打了没反应，大多是配置不对，别慌，检查一下调试配置就行。偶尔还会出现快捷键和别的软件冲突，比如和输入法热键撞了，改一下快捷键就好。

我自己总结了几个小经验，真的实用。第一个，刚上手别乱改界面，先用默认布局，熟悉了再调，不然越改越乱。第二个，一定要记几个常用快捷键，比如 Ctrl+B 跳定义、Ctrl + 空格补全，不用多，几个高频的就能省不少事。第三个，自定义代码模板，比如我设了 clg 按 Tab 直接出 console.log，写代码快很多。第四个，大项目记得开省电模式，关掉实时检查，编辑完再统一查错，不容易卡。

其实 WebStorm 没那么难，别被它的界面吓到。它就是个帮你提高效率的工具，不用追求把所有功能都吃透，够用就行。我从一开始懵圈到现在离不开它，也就花了一两个星期适应。不管是学生党做课设，还是刚工作写项目，用它都能省心不少，少走很多弯路。

说到底，工具好不好用，还是得自己多试多练。WebStorm 可能不是最轻量的，但对前端开发来说，真的很全面，能帮你省下不少重复劳动和找错的时间。慢慢用下来，你肯定也会觉得它挺香的。