古人言：“工欲善其事，必先利其器。”做技术工作时，有一样趁手的工具非常重要，Web前端开发工作也是如此。
经过这么多年发展，Web前端开发领域中涌现出了非常多的代码编写工具，比如普通的文本编辑器(记事本这一类的)、Dreamweaver、Sublime、Atom、VSCode、WebStorm、HBuilderX 等等。
大家也许听过 IDE 这个词，IDE(Integrated Development Environment) 翻译过来就是 “集成开发环境”，它比 “开发工具” 的功能更强大，提供的开发支持更丰富。
之所以只给了 VSCode、Webstorm 和 HBuilderX 这三个的链接，是因为目前这三个 IDE 是前端开发者社区广受好评的，流行度很高。
Web 前端开发不需要非常严苛的工具，只要能写 HTML、CSS、JavaScript 的文本编辑器，以及一个可以正常运行的浏览器就可以了。但好用、趁手的开发工具，能极大地提升你的开发效率。
VSCode
VSCode 是一个轻量的开发工具，由 Microsoft 研发并开源，全名是 Visual Studio Code。它最大的特点就是轻量、插件化。
VSCode 本身提供的能力并不多，主要是文本编辑(代码提示)、运行调试、Git操作等基础的功能，但它强大的插件系统为它提供了非常高的上限，只要你能想到的，它的插件系统几乎都能做到。
虽然 VSCode 一开始的定位是用于做 Web 开发，但随着它本身的发展，以及插件社区的发展，现在几乎可以用于绝大部分的编程语言开发。如何实现？安装对应的插件即可。
由于 VSCode 本身提供的基础能力并不多，很多能力都靠插件来实现，因此安装好 VSCode 后，还需要安装一些插件来对 VSCode 进行完善。用于Web开发时，下面是我推荐的一些插件：
Auto Close Tag：自动为你的 HTML 写上闭合标签Auto Rename Tag：修改标签时，自动给另一半标签重命名为你输入的名称Better Comments：在注释前添加不同的符号，就会给你的注释呈现出不同的颜色Code Spell Checker：自动检查你的代码里是否有拼写错误ESLint：格式化代码Git Graph：查看你的 Git 提交图Git History：查看文件的 git 历史版本GitLens：显示当前光标所在行的最近修改的 git 提交信息JavaScript and TypeScript Nightly：为你的 JavaScript 代码提供 Typescript 类型提示，以及开发时的 Typescript 支持Prettier：格式化代码view-in-browser：右键点击 HTML 文件时，提供在浏览器中预览的选项
WebStorm
Webstorm 是 JetBrains 公司的产品，这个公司最广受欢迎的 IDE 是 IntelliJ IDEA——Java 语言开发的 IDE，此外还有如 PyCharm、PHPStorm 这些用于 Python 和 PHP 的 IDE。
WebStorm 最大的特点是全面。Web开发常用的工具它都内置了，下载安装成功即可使用很多能力——这些能力在 VSCode 上通常需要额外安装插件。
WebStorm 也支持插件，但它的插件市场不如 VSCode 那么丰富和完备，且主要都是针对 Web 开发的。
WebStorm 与 VSCode 还有一点不同的是：WebStorm 是收费的。
HBuilderX
HBuilderX 是国内 DCloud 基于 VSCode 内核来开发的一款主要用于 Vue/uni-app 项目，也可以用来做日常的Web开发。
这个 IDE 的主要操作和设置跟 VSCode 很接近，插件系统和 VSCode 的插件系统也几乎一样，插件社区的资源还算丰富。
如何选择？
市场上有这么多开发工具可以选择，每个开发工具又各有特点，作为不熟悉的开发者该怎么选择呢？
如果你处于实习阶段或有人指导的学习阶段，可以和你的 “导师” 选择同样的开发工具。
如果你处于自学阶段，且喜欢自由、简约的 IDE，强烈推荐 VSCode。
如果你处于自学阶段，且喜欢开箱即用的，推荐使用 Webstorm。
如果你的目标是做跨平台应用开发，且使用 vue/uni-app，推荐使用 HBuilderX。
工具只是用来提升你写代码的速度，不管使用什么 IDE，只要是你熟悉的、习惯的，就是最适合你的。
如果你毫无思绪，也不知道如何选择，那就选择 VSCode 吧，它足够简约，各项快捷键也足够简单。它就像刚开始学习前端的你，你的学习过程，就像是给它安装插件的过程。
你的未来由你决定，你的 VSCode 也是如此。
