前端开发常用哪些工具软件？

Posted 2023-02-28

前端开发的编译器在选择上还是很多的。在学校里，老师主要讲三个前端开发软件：

1、WebStorm

帮助编写HTML、CSS、Less、Sass和Stylus代码，并且支持Node.js和主流框架，如React、Angular、 Vue.js、Meteor等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。但是付费软件。

2、IntelliJ idea

idea是学校老师教得最多的一款软件，从学Java开始，除了eclipse和myeclipse之外，学校老师用的最广泛的Java编译器就是idea，而idea也能进行前端项目的开发，idea是我用得最熟的一个编译软件。像一个完整的前端网站，配置好jdk，tomcat，maven，数据库之后就可以在idea上进行搭建了。

3.Visual Studio Code

简称VScode，前端开发时期学习的第一款软件，当时学VScode的时候上的网课，老师用插件的时候一个没跟上，就跟不上了。总体感觉下来是插件库很丰富，而且内存占用不大，目前我身边用VScode的人是最多的。

下面是我在实习中接触到的前端开发工具：

notepad++

页面很简单，乍一看像是一个记事本，它也确实可以当记事本用。有很多特色插件可以使用，支持多种编程语言的语法高亮显示，具有代码折叠功能。

2、HBuilderX

HBuilderX是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。是HBuilder下一代版本，具有轻便、适合vue框架的特点。

参考技术A

俗话说："欲先善其事，必先利其器"、"磨刀不误砍柴工，砍柴时，需要一把好斧头。废话不多书，开始介绍几款常见的编译器。

一、Visual Studio Code

---

属于微软旗下的，功能强大且轻巧的免费代码编辑器具有集成工具，可轻松地将代码部署到 Azure。软件功能强大，语法高亮，自动格式化代码，设计人性化，使用便捷。本人自己就用这个编辑器。

二、sublime text3

---

sublime text3是一个轻量、简洁、高效、跨平台的编辑器，支持各种编程语言。体积小，无需安装，绿色便捷。但是对于项目启动、打包、提交版本等有点困难。如果制作简单网页便可以使用它。

三、Webstorm

---

Webstorm是jetbrains公司一款商业的javascript开发工具，被誉为“web前端开发神器”、“最强大的HTML5编辑器”。官方提供插件支持，自动保存文件、自动格式化代码、统一风格等很多优势。唯一缺点，属于商业版开发工具，体验版只能使用30天，需要付费购买或破解使用，免费版每次只能使用30分钟就强制关闭了。

四、HBuilder

---

HBuilder是一款轻巧、极速、有强大语法提示的编辑器，提供比其他工具更优秀的vue支持，提升vue开发效率。还支持开发webapp，最强大之处就在于使用uni-app项目时，一套代码可以发行多个平台，如果是webapp，可直接打包android和ios两个包；如果是小程序，则可发行至微信、支付宝，抖音、快手、百度、360、快应用等多个平台。一套代码，解决多个平台，开发和维护效率极高。

五、Dreamweaver

---

Dreamweaver简称“DW”，最早输“网页三剑客”之一，是将开发和管理网站于一身的所见所得网页编辑器。代码提示功能强大，有设计模式，直接点击和拖拽，即可实时的更新代码，适合新手利用它可以轻而易举的制作出网页。但是在设计模式下生成的代码可读性差。对于大项目，不推荐使用，不便于项目启动、打包、提交版本等管理。目前需要付费购买或破解才能使用。

同样的前端开发也需要一个好的编译器，有一个好的编辑器，省时省力。

参考技术B

1、Sublime Text3

下载地址：https://www.sublimetext.com/

功能介绍：这是一款轻量化的软件，适用于 Windows、macOS 和 Linux。

由自定义组件构建，支持多种编程语言、及语法高亮引擎，拥有优秀的代码自动完成功能。

适合编程初学者使用。

2、Visual studio Code

下载地址：https://code.visualstudio.com/

功能介绍：一个轻量级但功能强大的源代码编辑器，适用于 Windows、macOS 和 Linux。

内置了对 JavaScript、TypeScript 和 Node.js 的支持，并为其他语言（例如 C++、C#、Java、Python、PHP、Go）和运行时（例如 .NET 和 Unity）提供了丰富的扩展生态系统。

适合学习了一段时间，升级使用。

3、hbuilder

下载地址：http://www.dcloud.io/

功能介绍：一个轻巧极速的编辑器，适用于 Windows、macOS 。

专为vue打造、高效极客操作、具有强大的语法提示功能。

适合工作中懒人使用。

4、WebStorm

下载地址：https://www.jetbrains.com/webstorm/

功能介绍：一款拥有个性化的体验的编辑器，适用于 Windows、macOS 和 Linux。

可充分利用现代 JavaScript 生态系统，享受针对 JavaScript、TypeScript、样式表语言和所有最流行框架的智能代码完成、即时错误检测、强大的导航和重构。

适用于高级工程师使用。

5、Dreamweaver

下载地址：https://www.adobe.com/products/dreamweaver.html

功能介绍：一款响应式的古老编辑器，由Adobe公司开发，适用于 Windows、macOS。

最大优势是实时视图编辑，重新设计的现代 UI，Git 支持可轻松协作。

适合于界面话操作多的编辑时候使用。

参考技术C 1: sublime 是个代码编辑器, 有很好扩展能力和完全开放的用户自定义配置与神奇实用的编辑状态恢复功能；
2: webstorm 是一个WEB前端开发神器,功能非常强大(强推)；
3: eclipse 就其本身而言，它只是一个框架和一组服务，但他有很强大的插件集，用于通过插件组件构建开发环境, 用来进行扩展；
5: Dreamweaver 一个非常经典的开发工具。
6: notepad++ 文本编辑器,软件小巧高效，支持27种编程语言;
7: EditPlus 一个功能比较强大的文本编辑器，也支持多种编程语言.，而且他还有文本对比功能； 参考技术D 目前主流的，在工作时的开发工具就是vscode，
但是在学校教学中，往往使用的都是Dreamweaver。

其他的前端工具，像Sublime，使用也比较少。
开发工具会一个就行的。

建议使用vscode，比较好用。