webstorm是什么软件？常见的前端开发编辑器有哪些

怼烎@ 2023-10-08 21:06 18阅读 0赞

![format_png][]

**WebStorm 是一款由 JetBrains 开发的集成开发环境（IDE），它是专门为开发 Web 应用程序而设计的****。已经被广大JS开发者誉为“web前端开发神器”、“最强大的HTML5编辑器”、最智能的“JavaaScript IDE”等。与IntelliJIDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。**

它提供了许多功能，例如代码自动完成、错误突出显示、重构、调试、版本控制等，可以帮助开发人员提高效率和代码质量。WebStorm 支持多种前端技术，例如 HTML、CSS、JavaScript、TypeScript、React、Angular、Vue.js 等等，还支持 Node.js 和其它后端技术。WebStorm 是一款商业软件，但是 JetBrains 也提供了学生和开源项目免费使用的许可证。

说了这么多, 其实他就是一个编辑器而已, 不用过多纠结。既然说到编辑器，**下面我们就来介绍一些常见的前端开发编辑器吧**

## notepad++ ##

![7a201e8ea960e4c7c01a004fe9384ef7.png][]

#### 优点： ####

**1. 免费且开源：**Notepad++ 是一款免费且开源的软件，用户可以免费获得该软件，并且可以自由修改源代码。

**2. 轻量级：**Notepad++ 是一款轻量级的文本编辑器，启动速度非常快，使用内存也比较少，对于一些简单的文本编辑任务非常适用。

**3. 语法高亮：**Notepad++ 支持许多编程语言的语法高亮显示，让编程更加舒适。但是也只能是高亮一些语言的基础内容, 尤其是对于前端来说, 对于 vue 和 react 包括 jQuery 的高亮效果并不是很好

**4. 插件丰富：**Notepad++ 支持许多插件，可以帮助用户更加方便地进行开发和编辑。

#### 缺点： ####

**1. 功能相对简单：**Notepad++ 是一款文本编辑器，针对于单纯的文本编辑非常友好, 对于简单的代码编辑也比较友好, 但是功能相对于专业的集成开发环境（IDE）而言较为简单，缺乏一些高级的功能, 比如一些插件, 一些特殊代码段, 一些纠错, 代码校验等

**2. 不支持调试：**Notepad++ 不支持代码调试功能，这对于一些需要进行代码调试的用户来说可能不太方便。如果是做前端开发, 可能我们更多的是在浏览器调试, 所以缺点并不明显, 但是对于其他需要本地或者即时调试的语言来说, 可能缺点就比较显著了.

**3. 不适合大型项目：**由于 Notepad++ 功能相对简单，因此不太适合大型项目的开发，这时候用户需要使用更加专业的开发工具。

**4. 只能在 Windows 平台上运行：**Notepad++ 只能在 Windows 平台上运行，不能在其他操作系统上使用。不利于进行跨平台开发的项目.

## webstorm ##

![b2c34c13cc5f6ba7b2894a20c8f5092e.png][]

#### 优点： ####

**1. 集成度高：**WebStorm 将许多 Web 开发所需要的工具和功能，包括代码编辑器、调试器、版本控制、测试工具等等都直接集成在了软件内，安装完毕可以直接获得这些工具所提供的能力和便捷, 可以方便地完成整个 Web 开发流程。

**2. 支持多种技术：**WebStorm 支持多种前端和后端技术，如 HTML、CSS、JavaScript、React、Angular、Vue.js、Node.js 等等，甚至包括 sass, less, ts 等文件的编译也直接内置在了软件内, 一次安装便可以满足开发者的各种需求。

**3. 智能代码提示和自动补全：**WebStorm 的智能代码提示和自动补全功能可以帮助开发者减少敲击键盘的次数，提高开发效率。

**4. 调试功能强大：**WebStorm 的调试功能非常强大，可以方便地调试前端和后端代码，查找代码中的错误和问题。

**5. 丰富的插件库：**WebStorm 除了自己本身内置有大量的工具和功能, 也有有大量的插件在自己的生态系统内可供选择，可以方便地扩展其功能。

#### 缺点： ####

**1. 价格较高：**WebStorm 是一款商业软件，不是开软编辑器, 需要付费使用(支持正版), 价格相对较高，对于个人开发者来说可能有些昂贵.

**2. 学习曲线较陡峭：**WebStorm 功能非常丰富，因此学习曲线较陡峭，需要花费一定的时间和精力去学习使用, 尤其是内置的一些高级功能, 需要我们花费大量的时间和精力去研究.

**3. 占用资源较多：**WebStorm 占用的资源较多，需要你的电脑配置相对比较好一些, 不然没办法流畅的运行.

**4. 只适用于 Web 开发：**WebStorm 是专门为 Web 开发设计的 IDE 工具，因此对于其他类型的开发可能不太适用. 这就是 JetBrains 公司的特点, 做什么都专精一个, 比如他们会有对应 PHPStorm, JavaStorm 来支持其他语言的开发.

## sublime ##

![94b1d92a87ee0d05b588ff3c4202a84e.png][]

#### 优点： ####

**1. 轻量级：**Sublime Text 启动速度非常快，使用内存也比较少，对于一些简单的文本编辑任务非常适用。而且对于电脑的配置没有过高的要求, 可以说是整一台电脑就能运行.

**2. 功能丰富：**Sublime Text 的功能非常丰富，包括代码高亮、自动完成、宏录制、多行编辑、Goto Anything 等等，可以帮助开发者更加高效地完成工作。

**3. 插件丰富：**Sublime Text 支持许多插件，可以帮助用户更加方便地进行开发和编辑。

**4. 跨平台支持：**Sublime Text 可以在 Windows、macOS 和 Linux 等多个平台上运行，对于多平台用户来说非常方便。

**5. 可定制性强：**Sublime Text 允许用户自定义设置、配色方案和插件，可以根据个人意愿来决定编辑器的主题方案, 更加贴合个人的使用习惯。

#### 缺点： ####

**1. 付费软件：**Sublime Text 是一款付费软件，它虽然给了我们不短一段时间的试用期, 但是试用期过后还是需要付费的(支持正版)

**2. 插件质量参差不齐：**Sublime Text 支持许多插件，但是这些插件质量参差不齐，有些插件可能存在安全问题或者不稳定的情况。

**3. 不支持自动更新：**Sublime Text 不像其他软件会自动更新, 需要我们自己关注一些更新信息, 然后手动下载安装包重新安装。

**4. 缺乏社区支持：**相对于一些开源的编辑器，Sublime Text 的社区支持就不是很完善, 而且社区给出来得一些周边内容也是参差不齐.

**5. 开发速度缓慢：**Sublime Text 的开发速度相对较慢，一些新功能和更新可能需要等待较长时间才能推出。

## **VSCode(Visual Studio Code)** ##

![9bb8e5cbfd6da33b938f78683d16bc69.png][]

#### 优点： ####

**1. 轻量级：**VS Code 启动速度快，使用内存较少，相对于一些重量级 IDE 工具，它更加轻便。

**2. 功能丰富：**VS Code 的功能非常丰富，包括代码高亮、自动完成、调试器、Git 支持、多语言支持等等，可以说, 只有你想不到, 没有它做不到.

**3. 插件丰富：**VS Code 的插件库非常丰富，用户可以根据自己的需求选择需要的插件，扩展编辑器的功能。

**4. 跨平台支持：**VS Code 可以在 Windows、macOS 和 Linux 等多个平台上运行，非常方便多平台用户使用。

5**. 社区支持强：**VS Code 拥有强大的开发社区支持，用户可以在社区中获取帮助、分享经验和讨论问题。

#### 缺点： ####

**1. 较慢的启动速度：**对比一些轻量级编辑器, vscode 相对启动较慢, 因为内置了一些工具类功能插件, 所以稍微大一些.

**2. 资源占用较高：**相对于一些轻量级的编辑器，VS Code 的资源占用较高，相对来说就对电脑的配置有一些小小的要求, 但是也不是很大, 可以接受.

**3. 部分插件质量不佳：**虽然 VS Code 的插件库很丰富，但是其中部分插件质量不佳，可能存在安全问题或者不稳定的情况。

**4. 配置较为复杂：**VS Code 的一些高级配置需要用户自行配置，对于一些新手用户来说可能需要花费一些时间来学习。

## HBuilder ##

![af7b5e9ba3d1a80b4fd58c3c80367f37.png][]

#### 优点： ####

**1. 集成多个工具：**HBuilder 集成了多个常用的前端开发工具，如代码编辑器、调试器、代码片段库、构建工具等，用户可以在一个界面中完成多个任务，提高了开发效率。

**2. 强大的前端框架支持：**HBuilder 支持多个流行的前端框架，如 Vue.js、React、Angular 等，可以帮助开发者更加方便地进行开发。

**3. 支持多平台开发：**HBuilder 可以支持多平台开发，如 iOS、Android、Web、微信小程序等，帮助开发者更加方便地开发和测试多平台应用。

**4. 可扩展性强：**HBuilder 支持插件扩展，用户可以根据自己的需求安装和卸载插件，来定制编辑器的功能。

**5. 免费开源：**HBuilder 也是一款免费开源的软件，直接安装使用即可。

#### 缺点： ####

**1. 较为复杂：**相对于一些简单的编辑器，HBuilder 的界面和操作相对较为复杂，需要用户花费一定的时间来熟悉和学习。

**2. 资源占用较高：**HBuilder 是一款比较重量级的编辑器，占用资源较高，需要一台性能较好的电脑才能流畅运行。

**3. 插件质量参差不齐：**HBuilder 的插件库虽然比较丰富，但是其中一些插件质量参差不齐，可能存在安全问题或者不稳定的情况。

**4. 部分功能不稳定：**HBuilder 中一些功能可能存在不稳定的情况，导致用户在使用时出现一些问题。

**5. 宣传较多：**HBuilder 宣传较多，有一些用户可能会觉得过于热闹，对于追求简洁和纯净的用户可能不太合适。

## atom ##

![85a5be06b86f975a8866c5fc164504e1.png][]

#### 优点： ####

**1. 免费开源：**Atom 是一款免费开源的代码编辑器，虽然是一个重量级编辑器, 但是却是免费的软件, 安装即可使用.

**2. 插件丰富：**Atom 支持插件扩展，用户可以根据自己的需求安装和卸载插件，来定制编辑器的功能，而且插件数量丰富。

**3. 社区活跃：**Atom 有一个活跃的社区，用户可以在社区中获得帮助和支持，也可以共享和学习其他开发者的经验。

**4. 跨平台支持：**Atom 可以在多个平台上运行，如 Windows、macOS、Linux 等，方便用户在不同的操作系统上进行开发。

**5. 自定义性高：**Atom 可以通过配置文件和样式表进行个性化定制，用户可以根据自己的喜好来设置编辑器的外观和功能, 我个人非常喜欢 atom 原生的暗黑系列主题, 都非常适合我.

#### 缺点： ####

**1. 资源占用较高：**Atom 既然是一款比较重量级的代码编辑器，必然占用资源较高，对你电脑的配置需求可能会高一些

**2. 启动速度较慢：**Atom 的启动速度比较慢，这可能会影响用户的使用体验。

**3. 自定义性带来的不稳定性：**Atom 的自定义性非常高，但是这也会带来一定的不稳定性，有些用户可能会遇到一些问题。

**4. 菜单和选项繁琐：**Atom 的菜单和选项比较繁琐，有时会使用户感到困惑，需要花费一定的时间来熟悉和掌握。

**5. 插件质量参差不齐：**Atom 的插件库虽然数量丰富，但是其中一些插件质量参差不齐，可能存在安全问题或者不稳定的情况。

## DW(dreamweaver) ##

![f7ebad73f982ee9cb4130908312e66be.png][]

#### 优点： ####

**1. 可视化设计：**Dreamweaver 支持所见即所得的网页设计，用户可以通过拖拽、选择、编辑等操作，快速地创建和设计网页。

**2. 支持多种编程语言：**Dreamweaver 支持多种编程语言，如 HTML、CSS、JavaScript、PHP 等，方便用户进行网页开发。

**3. 集成性好：**Dreamweaver 与其他 Adobe 软件集成性好，如 Photoshop、Illustrator 等，可以方便地导入和编辑图像、图标等素材。

**4. 功能丰富：**Dreamweaver 提供了许多功能，如代码提示、代码折叠、代码高亮、代码自动完成等，可以提高用户的工作效率。

**5. 模板和库支持：**Dreamweaver 提供了模板和库支持，用户可以快速地创建和使用模板和库，来加速网页开发。

#### 缺点： ####

**1. 价格高昂：**Dreamweaver 是一款商业软件，作为 Adobe 公司的产物, 花钱是必须的了, 而且价格还不便宜呢(支持正版)

**2. 学习成本高：**Dreamweaver 的功能比较丰富，对于初学者来说可能需要一定的时间来学习和掌握，学习成本相对较高。

**3. 资源占用较高：**Dreamweaver 是一款比较重量级的软件，占用资源较高，需要一台性能较好的电脑才能流畅运行。

**4. 代码生成不完美：**虽然 Dreamweaver 支持可视化设计，但是其生成的代码可能存在一些问题，需要手动进行调整和优化。

**5. 不够灵活：**Dreamweaver 的可视化设计可能会限制用户的创意和想象力，不够灵活和自由。

## 编辑器选择 ##

如果你是一个老手, 那么你大概率看不到这里, 这个文章对你意义不大

● **如果你准备学习**, 建议使用一个轻量级的编辑器, 比如 vscode, sublime, atom

对于这三个来说, sublime 还需要花钱, 我们可以忽略一下，对比 atom 和 vscode 来说, 我更喜欢 vscode 一些, 都可以尝试一下，看自己用哪个比较顺手

● **如果你刚刚参加工作, 或者参加工作时间不长**

建议你去买一个 webstorm, 然后好好研究一下对应的设置，当你配置好一个相对适合自己的 webstorm 以后, 你会发现开发效率大大的提升了

**不管是哪个软件, 我们不要安装盗版, 支持原装正本, 支持版权, 就是对知识的认可, 就是对我们自己的认可**

[format_png]: https://img-blog.csdnimg.cn/img_convert/8554295021296a8517f88c226435aa76.webp?x-oss-process=image/format,png
[7a201e8ea960e4c7c01a004fe9384ef7.png]: https://img-blog.csdnimg.cn/img_convert/7a201e8ea960e4c7c01a004fe9384ef7.png
[b2c34c13cc5f6ba7b2894a20c8f5092e.png]: https://img-blog.csdnimg.cn/img_convert/b2c34c13cc5f6ba7b2894a20c8f5092e.png
[94b1d92a87ee0d05b588ff3c4202a84e.png]: https://img-blog.csdnimg.cn/img_convert/94b1d92a87ee0d05b588ff3c4202a84e.png
[9bb8e5cbfd6da33b938f78683d16bc69.png]: https://img-blog.csdnimg.cn/img_convert/9bb8e5cbfd6da33b938f78683d16bc69.png
[af7b5e9ba3d1a80b4fd58c3c80367f37.png]: https://img-blog.csdnimg.cn/img_convert/af7b5e9ba3d1a80b4fd58c3c80367f37.png
[85a5be06b86f975a8866c5fc164504e1.png]: https://img-blog.csdnimg.cn/img_convert/85a5be06b86f975a8866c5fc164504e1.png
[f7ebad73f982ee9cb4130908312e66be.png]: https://img-blog.csdnimg.cn/img_convert/f7ebad73f982ee9cb4130908312e66be.png