素材多多
前端开发是目前一个非常火的行业，就业前景和薪资水平都非常不错，至于开发工具的话，那就非常多了，大部分代码编辑器、IDE环境都支持，下面我简单介绍4个非常不错的前端开发工具，感兴趣的朋友可以尝试一下：
01
VS Code
这是目前前端开发一个非常流行的开发工具，在业界非常受欢迎，免费、开源、跨平台，由微软自主研发，可以说是良心产品，常见的智能补全、代码高亮、语法提示等功能这个软件都能很好支持，除此之外，插件扩展非常丰富，可以很好的进行代码编辑和调试，轻巧灵活，运行速度快，对于前端开发来说，是一个非常不错的选择：
Sublime Text
这也是一个比较轻巧灵活的代码编辑器，文本编辑功能强大，完美支持3大操作平台，但原则上不免费，和VS Code类似，Sublime Text也支持自动补全、语法提示、代码高亮等常见功能，除此之外，针对前段开发也提供了非常多的插件，不管是编辑还是调试代码来说，都非常方便，对于前端开发来说，也是一个不错的选择：
02
IDE环境
HBuilder
这是一个纯粹的国产Web IDE开发工具，目前在前端开发中也有着较高的使用率，常见的自动补全、代码高亮、语法提示、错误检查等功能这个软件都能很好兼容，除此之外，界面柔绿、清爽护眼，针对Vue专门打造了插件扩展，可以很好的提高开发效率，还支持安卓、iOS打包，对于前端开发来说，也是一个非常不错的工具：
WebStorm
这是一个非常专业的Web IDE开发工具，Jetbrains公司的产品，被誉为“Web前端开发神器”、“最智能的JavaScript IDE”，除了基本的智能补全、代码高亮、语法提示等常见功能，这个软件还支持代码分析与重构、联想查询、单元测试等高级功能，因此在开发效率上更高，也更适合大型项目，对于多人协作的前端开发来说，是一个非常不错的选择：
当然，除了以上4个比较常用的前端开发工具，还有许多其他软件也支持前端开发，像Atom、Notepad++、Dreamweaver等也有非常不错，但在功能和使用范围上就不如前面4个软件了，网上也有相关教程和资料，介绍的非常详细，感兴趣的话，可以搜一下，希望以上分享的内容能对你有所帮助吧，也欢迎大家评论、留言进行补充。
小小猿爱嘻嘻
HTML通常会和JavaScript、CSS同时出现。三者均是前端开发最常用到的。目前最常用到的HTML其实就是HTML5。常用的前端编程软件有HBuilder、Sublime Text等等。
HBuilder是一款免费的国产前端开发工具，编者用的就是HBuilder，对于小白和英语不太好的前端开发者这是一款难得的IDE。对代码自动补全方面简直是强大到没朋友。强力推荐。
Sublime Text是一个轻量级的编辑器，不端支持前端的html，js，css。还支持觉得多数的后端语言，比如C语言、java、python等。sublime text的强大之处是支持各种插件而且快捷键非常好用，可以极大的提高开发效率。缺点是代码提示方面不如Hbuilder。
菜牙ol
为了让入行新人能够更快的掌握Web前端开发，千锋武汉小编推荐五个优秀的前端开发工具，供小伙伴们参考。框架类：Bootstrap全世界最流行的响应式前端框架。基于HTML、CSS、JAVASCRIPT的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格。并兼容大部分jQuery插件。简洁灵活，使得Web开发更加快捷。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
代码编辑器：Codepen、VScodeCodePen是一个在线的HTML、CSS和JavaScript代码编辑器，能够编写代码并即时预览效果。可以用于在线展示的作品，也可以看到其他人在网页中实现的各种令人惊奇的效果。VScode免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。性能测试：Google PageSpeed InsightsPageSpeed是谷歌的网页测试工具，通相信有接触前端开发的大神们都听说过Google官方的PageSpeed Tools，这个网页载入速度检测工具有在线版本也有一个 Chrome扩展，叫PageSpeed Insights。PageSpeed Insights的Chrome扩展是由谷歌官方开发的一款可以分析页面载入的各个方面，包括资源、网络、DOM以及时间线等等信息的插件，过检测评分给你优化建议。调试类：AtomAptana Studio它是非常强悍的JavaScript编辑器和调试器，可以支持多种AJAX和JavaScript工具箱，包括JavaScript编辑和调试。具有智能代码完成、浏览器兼容性提示、代码错误提示、文档结构树等功能。HTML5：HTML5测试得分能够提示您正常使用的浏览器对于HTML5标准和相关规范的支持情况的指标。前端开发工具数量很多，这里只是推荐了千锋武汉HTML5前端小编觉得比较好的5个前端开发工具。如果你有更好的意见，欢迎给我们留言分享。 ------------- 如果我回答对你有帮助，请关注我一下。或有其他问题也可以关注我，给我发私信小鱼儿的歌声
WebStorm
和idea同属于jetbrains公司开发的，它是旗下一款JavaScript开发工具，被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
早起作为一个插件可以集成与Eclipse中来开发前端，现在已经独立出来，也是我最早接触js所使用的一款开发工具，如果熟悉了Eclipse快捷键的童鞋可以快速上手。
一款代码编辑器，借助丰富的插件资源，可以扩展成强大的前端开发工具，和IDE相比，属于一款轻量级的，启动特别快。
Atom
作为开源老大哥GitHub出的一款代码编辑器，和上面那个比较而言，插件略少，但和GitHub无缝结合，尤其是markdown编写，界面也很漂亮。
TextMate是Mac下的著名的文本编辑器软件，与BBedit一起并称苹果机上的emacs和vim。尤其适合程序员使用，可以定制许多贴心使用的功能。
Emacs即Editor MACroS（宏编辑器），是一种强大的文本编辑器。Emacs使用了Emacs Lisp这种有着极强扩展性的编程语言（它的核心是一个Emacs Lisp解释器），并实现了文本编辑支持等的扩展。
Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8 技术)。
北瓜点影
1、HBuilder
功能简介：HBuilder是专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。
永不回头
Visual Studio 2008：可以提示外部引用的js代码中的变量和方法，支持C#风格的文档注释；支持单步跟踪调试，也可以格式化代码，当写js的时候会根据输入的分号和括号自动格式化代码，当代码有语法错误的时候不能格式化，所以写代码的时候很容易发现代码是不是有语法错误。
EmEditor：这个是轻量级的文本编辑器，支持多种语言的代码高亮，但不支持智能提示，支持安装插件（基于js开发），我一般用来写简单的脚本和格式化代码（许安装插件）。
常用的调试工具：
浏览器下的插件：
调试工具有Firebug（FF），Web Developer（IE），IETester（浏览器兼容性测试）。
个人在FF下调试多一些，还装了几个插件：YSlow（性能优化），Page Speed（性能优化），DNS Flusher（清除浏览器DNS缓存，不重启浏览器使hosts生效），Sen SEO（SEO优化工具），CSS Userage（清理多余的CSS），Web Developer，User Agent Switcher。
第三方软件：
Fiddler：Microsfot出品的免费产品，非常好用，可以抓几乎所有的应用程序的HTTP请求。可以抓包，修改请求等，具体可以Google一下“Fiddler用法”。
HttpWatch：也是抓包工具，这个是收费的，IE下非常好用的抓包工具。
佩奇撩剧场
大家好我是瑞瑄酒业
webstorm当然很好，没话说。 vscode火起来是因为它是免费的+微软出品品质保障，像Vue甚至专门给vscode开发了Vetur，webstorm都没这待遇。个人觉得如果不想买webstorm它自然是最好选择。
回复
活宝前端攻城狮
第10楼2019-06-22
赞
瑞瑄酒业萍萍
很高兴能回答你的问题，作为一个后端开发，也曾经开发过前端，也用过很多前端开发工具。
1.sublime text用着确实不错，但是代码开发提示不强，平时用着文本编辑器还是可以的。
2.hbuild+用了一段时间各种不适用，最后就卸载了。
3.vs code用着一段时间写vue，需要安装插件，而且提交代码用感觉不方便，把不想提交的最后提交了，导致代码冲突，也许是因为自己用不熟。
4.webstorm 推荐使用，代码智能提示，而且提交代码方便。
JAVA程序猿成长之路
JetBrAIns WebStorm 2019 for Mac是一款知名的前端开发工具，提供JavaScript和编译到JavaScript语言，Node.js，HTML和CSS的智能编码辅助。
最聪明的编辑利用现代JavaScript生态系统的全部功能 - WebStorm为您提供帮助！享受智能代码完成，动态错误检测，JavaScript，TypeScript，样式表语言和最流行的框架的强大导航和重构。
调试器在IDE中轻松调试客户端和Node.js应用程序 - 在源代码中放置断点，探索调用堆栈和变量，设置监视，以及使用交互式控制台。
无缝工具集成利用linters，构建工具，测试运行器，REST客户端以及更多工具，这些工具都与IDE深度集成。但是，只要您需要终端，它也可以作为IDE工具窗口使用。
单元测试在WebStorm中使用Karma，mocha，Protractor和Jest运行和调试测试。立即在编辑器中或在方便的树视图中查看测试状态，您可以从中快速跳转到测试。
与VCS集成使用简单的统一UI来使用Git，github，Mercurial和其他VCS。使用IDE中的可视差异/合并工具提交文件，查看更改并解决冲突。
WebStorm为大多数版本控制系统提供支持，例如Git，github Mercurial，Perforce，Subversion和SVN，可用于创建各种网站和应用程序，强大而灵活！
风絮o允咏
喜欢用webstorm，atom和vs code，sublimetext都装了，几乎只用webstorm，atom界面是漂亮，也是我第一个下载安装的，装了各种插件，那时初学，感觉提示不全，还有就是插件安装了几个后开机明显变好慢，无奈下了webstorm，感觉很爽
