前端最受欢迎的6个开发工具

忘是亡心i 2022-11-27 08:55 195阅读 0赞

大家好，我是为前端娱乐圈操碎了心的小迷妹，正宗前端开发一枚，每天推荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标。

每天上班必须做的一件事情，就是打开我们全球最大的程序员交友社区GitHub，因为这上面有太多开源的宝贝了，每天都乐此不疲，深耕于此，当然也收获了很多有用的东西，写出来分享一下。

刚刚开始学习前端的时候，改怎么样选择一个比较好的开发工具？常常有人会来问我这样的问题，我现在用的是Visual Studio Code，然后其他的前端开发工具也会配合着使用，因为都比较不错，选择了前端最受欢迎的6个开发工具，记录一下，希望对你有用哦。

### 一、Visual Studio Code ###

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

功能介绍：

微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。

Visual Studio Code软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮。

![format_png][]

### 二、hbuilder ###

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

功能介绍：

前端开发小白入门首选，hbuilder是国产的一款前端开发工具而且是免费的，对于英语不好的前端工程师是一个不错的消息。

优点是有强大的其他语言支持和开发webapp等功能，强大到没朋友。在语法提示、转到定义、重构、调试等方面都非常高效。缺点也是有一些的，就是其有些稳定，有时可能会有些卡顿的现象，希望官方修复。

![format_png 1][]

图片.png

### 三、sublime text3 ###

下载地址：[http://www.sublimetext.com/][http_www.sublimetext.com]

功能介绍：

sublime text是一个轻量级的编辑器，也是支持各种编程语言，sublime text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用sublime就是要使用其快捷键和插件。

sublime text3的优点的轻量级但是功能强大，优雅小巧启动速度快，有着丰富的第三方支持，能够满足各种各样的扩展缺点是对于项目的管理等不是很方便，但代码提示不如hubuilder强大。

![format_png 2][]

### 四、WebStorm ###

下载地址：[https://www.jetbrains.com/webstorm/][https_www.jetbrains.com_webstorm]

功能介绍：

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。官方提供的插件支持，满足许多不会配置的同学，ESlint，词法高亮，emmet，CSS预处理器，新版本也添加了对ES6的支持，内建了服务器调试。

目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

![format_png 3][]

### 五、Atom ###

下载地址：[https://atom.io/][https_atom.io]

功能介绍：

Atom 是github专门为程序员推出的一个跨平台文本编辑器。平易近人,但可删节的核心工具定制做任何事,也可以使用有效不沾一个配置文件。为开源而生。

具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。

![format_png 4][]

### 六 ：Dreamweaver CC 2017 ###

下载地址：[https://www.adobe.com/products/dreamweaver.html][https_www.adobe.com_products_dreamweaver.html]

功能介绍：

老牌的IDE ，曾经以PS+DW+FW称霸网页领域，号称网页三剑客，然而之前的版本更新较慢，版本陈旧，已经满足不了广大前端开发者的项目需求，逐渐被市场淘汰。

好在2017版本及时修正，外观、界面、语法高亮等已经很漂亮，并且添加了CSS预处理器支持，同时保留了部分预制组件，方便对语法还不熟悉的同学，对于不会node的同学也有提供实时预览，适合对前端有进一步了解的同学。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70 1][]

[https_code.visualstudio.com]: https://code.visualstudio.com/
[format_png]: /images/20221124/ea085829bae84b31a90806ddd5928ef9.png
[http_www.dcloud.io]: http://www.dcloud.io/
[format_png 1]: /images/20221124/67ca814990a4479a869389425a147110.png
[http_www.sublimetext.com]: http://www.sublimetext.com/
[format_png 2]: /images/20221124/c3de7da43c094f43a8488e1deac2e4ca.png
[https_www.jetbrains.com_webstorm]: https://www.jetbrains.com/webstorm/
[format_png 3]: /images/20221124/6bb5a82cc9be4eeea3e3f04614cf835c.png
[https_atom.io]: https://atom.io/
[format_png 4]: /images/20221124/9c7b7840365e4aeba4ac66afc71d6c0d.png
[https_www.adobe.com_products_dreamweaver.html]: https://www.adobe.com/products/dreamweaver.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221124/b14287c88bf24a10b9f612d6cd1ea69a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221124/3fdcd024d32042ecb1df85a8553bfac9.png