作为前端开发，我为何疯狂推荐WebStorm？(1)

• 一、介绍WebStorm

• 二、WebStorm的亮点

• • （1）自动保存

• （2）浏览器快捷方式

• （3）文件操作历史记录

• （4）代码格式化

• （5）内嵌git

• （6）超强的语法提示

• （7）代码高亮

• （8）个性化配置

• （9）拼写检查/重复代码检查

• （10）内置服务器功能

• （11）代码和文件关联能力

• （12）自带文件模板

• （13）无需配置直接上手

• 三、WebStorm缺点

• 四、安装WebStorm

• • （1）准备好相关文件

• （2）安装webstorm

• 五、结束语

一、介绍WebStorm

=====================================================================

WebStorm 是 jetbrains 公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。

这段简介看着是不是特别的厉害？

其实 jetbrains 公司旗下还有很多产品都跟WebStorm类似，例如 PyCharm 、PHPStorm 等

二、WebStorm的亮点

======================================================================

WebStorm 是我在前端开发中用的最多的一款开发工具，它的功能特别特别的多，这里我就来说一下我认为的它的亮点之处

（1）自动保存

---

有没有听过这样一句话——”程序员最怕遇到突然停电了，万一代码没保存，直接就凉了“

所以，很多程序员都会养成这样一个习惯，在写代码的过程中，每隔一小段时间就手动保存一下，或者不自觉地就按了ctrl + s。

但是WebStorm就解决了这样一个传统的问题。我们在文件中所有的操作，都会被自动地存储下来，不需要手动保存，所以即使遇到突然停电或者电脑死机，也不用害怕，因为我们的文件早就被自动保存好了。

（2）浏览器快捷方式

---

这个功能也可以说是非常的方便了，比如我们在写了一个 index.html文件后，我们要去电脑上找到这个文件，然后打开方式选择浏览器打开，但在WebStorm中， 在文件编辑的右侧有着各浏览器浏览快捷方式，可以直接点击打开

来给大家看看样子

（3）文件操作历史记录

---

写代码的过程中，我们可能最怕的就是不知道什么情况就误删了某个文件，但又因为文件太多根本就不知道到底少了哪些文件

为此，WebStorm就提供了一个本地的文件操作历史纪录，这是其它编辑器都没有的功能，它可以查询到之前你对文件都做了哪些操作，然后可以选择查看并恢复该文件

我们来看一下具体的动图演示

是不是非常的方便，所以用了WebStorm后，我就再也没有担心过文件误删的情况了

（4）代码格式化

---

对于很多新入坑前端开发或者初入编程的小伙伴，可能还有点不太熟悉代码的风格是怎样的，也就是哪里需要空格 、哪里需要空一行 等代码的格式问题。

但是WebStorm里有一个代码格式化的功能可以帮助你自动调整整个代码的结构，你只需要在写好代码后按一下这个键就可以了，下面我们来演示一下看看

首先我们写一段代码，不注意空格和空行的问题，整个代码看起来就十分的臃肿难以阅读

现在我们使用一下代码格式化功能，如图点击即可，或者可以使用快捷键 ctrl + alt + L

我们来看看代码格式化以后变成了什么样子

是不是瞬间就变得美观了很多，你们可以对比一下前后的区别

所以这个功能挺适合刚入门的小伙伴的

（5）内嵌git

---

作为一个程序员，我们一般都会把自己的项目代码托管到 github 上，所以我们都会下载 git 工具

然后点击 Git Bash Here，再在里面输入一些 git 指令，这样很不方便

但在 WebStorm 中，可以下载 git，并在其内部自带的终端里输入 git 指令。

与此同时，WebStorm 还会将被 git 托管的文件进行颜色高亮显示

例如：

以下则是在终端里输入 git 指令的示例图

总之我感觉是非常方便的，还能看到哪些文件被改过，哪些文件是新增加的，代码编写以及代码管理都在一个页面上，就很省事

（6）超强的语法提示

---

总的来说，所有的编辑器里面，WebStorm 的语法提示算是比较全的了，而且还带有记忆功能，就是说你经常用的语法可能会给你优先提示出来，这也大大节省了开发的时间，

就拿前端常用的布局 flex 来举例子，我在做元素布局时经常会用它做垂直水平居中

看了上面这个动图，有没有感觉这样强大的语法提示用起来很爽呢，这会让你根本就不需要去拼写完整的单词，直接用软件给你提示的即可

更重要的是，WebStorm 语法的更新也非常快。例如有些语法是最近才新增的，所以有可能还没有很快地更新到编辑器里，导致明明正确的语法却被编辑器提示有错误。

就拿我最近看到的一个例子来说，前端的框架 Vue 最近准备从 Vue2 更新到 Vue3 ，所以难免有一些语法的新增，我在使用 vscode 这款编辑器的时候，发现 Vue3 新增的语法都被报错了，但其实是可以正常运行的，后来我就换回 WebStorm，就没有报错了。

显而易见，WebStorm 在语法的更新上还是非常快的。

（7）代码高亮

---

不得不说，我还是挺喜欢 WebStorm 的代码高亮以及它的字体样式的，我可以拿几个编辑器来做一下对比

• 记事本

• WebStorm

• vscode

• sublime text

• HBuilder

这里呢，每个编辑器的风格不一样，大家可以自行看一下，但我个人还是更喜欢 WebStorm

（8）个性化配置

---

上面刚说了一些编辑器的样子，其实我们可以不局限于这样的风格，还可以在设置里面自己调整编辑区的背景色 、字体大小 、行距等，反正是怎么舒服就怎么调整呗

这里我就不教大家如何修改了，到时候想修改哪个直接去设置里找即可。

（9）拼写检查/重复代码检查

---

• 拼写检查

有时我们可能在写代码时不注意，拼错了个单词，WebStorm 会给我们用波浪线提示出来

例如

图中想拼写 number，但却拼成了 numberr，就会被提示，告诉我们是不是拼写错误了，方便我们检查

• 重复代码检查

这个功能用的最多的就是在查看变量引用上面了，假设我们刚开始设了一个变量，然后在下面的代码里有很多次都用到了这个变量。突然，我们想给这个变量换个名字，那么就需要更改下面所有引用到该变量的地方的变量名，但是真的很难找。

所以我们可以利用这个功能，鼠标点击这个变量名，那么代码中所有与该变量名相同的代码都会被提示出来

如图

我们点击了变量 number，接下来所有用到了该变量的地方都被标记了出来

（10）内置服务器功能

---

很多的前端编辑器打开文件，显示的路径都是本地文件路径，如图

此时是没有服务器环境的，但要知道，在前端开发时，测试一些功能是需要在服务器环境下才能进行的，那么一般的选择就是自己搭建一个本地服务器，然后再测试我们的文件代码，当然，我以前就是这么干的，觉得特别麻烦。

后来我知道了 WebStorm 有这样一个功能，我欣喜若狂，亲自试验一下，发现真的是自带服务器环境。如图

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
.(img-wdChUBZm-1715823332556)]

[外链图片转存中…(img-0U6V4cfo-1715823332556)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！