开发工具的选择

        孔子说：“工欲善其事，必先利其器”，学习WEB前端开发也是一样。主流的web前端开发写代码的软件有：Webstorm、VScode、Sublime Text、HBuilder、Dreamweaver、notepad++、editplus等，那么多开发工具，该怎么选择呢？下面我们重点介绍推荐的两款工具。

1.Visual Studio Code【推荐】

     Visual Studio Code是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。

使用感受：功能强大很多插件，安装方便，重点是免费，推荐你使用。

（1）安装与下载：

（2）安装插件：

      vscode安装插件只需要点击图片所示按钮，即可进入拓展，在搜索框中输入插件名点击安装后，等待安装好即可点击重新加载重启vscode使得插件生效。当你不需要某个插件时只需要进入扩展，点击对应插件右下角的齿轮按钮即可选择禁用或卸载该插件。

• HTML Snippets插件：超级实用且初级的 H5代码片段以及提示

• HTML CSS Support插件：让 html 标签上写class 智能提示当前项目所支持的样式

• Debugger for Chrome插件：让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试

• Auto Close Tag插件：自动闭合HTML/XML标签

• Auto Rename Tag插件：自动完成另一侧标签的同步修改

• Bracket Pair Colorizer插件：给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

• beautify插件：格式化代码的工具

• JavaScript(ES6) code snippets插件：ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

• jQuery Code Snippets插件：jQuery代码智能提示

• open in browser插件：vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

• Path Intellisense插件：自动提示文件路径，支持各种快速引入文件

2.HBuilder【推荐】

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了java,c,web和Ruby.HBuilder本身主体是有java编写.它基于Eclipise,所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。数字天堂是HTML5联盟成员,在前端方面非常具有权威。

安装与下载：

（1）优势：软件由C++开发，性能自然强大。轻量，能够秒开文件，工具内置浏览器。

（2）适合开发环境：H5 APP开发，单页面SPA开发等。但不推荐Node开发，对Node语法支持（express框架等）不是很友好。