工欲善其事，必先利其器，一款优秀的开发工具能够极大提高程序开发效率与体验。在Web前端开发中，常用的开发工具有Visual Studio Code、Sublime Text、HBuilder等，下面我们就来介绍这些开发工具的特点。

1.Visual Studio Code

Visual Studio Code(简称VS Code)是一款由微软公司开发的，功能十分强大的轻量级编辑器。该编辑器提供了丰富的快捷键，集成了语法高亮、可定制热键绑定、括号匹配以及代码片段收集的特性,并且支持多种语法和文件格式的编写。Microsoft Visual Studio，简称VS，是微软公司的开发工具包系列产品，是目前最流行的Windows平台应用程序的集成开发环境(IDE)。所谓的集成开发环境，就是指用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面工具。这么复杂，谁看得懂呀?哎，简单来说，Visual Studio是一个具有很多用途的开发工具，它可以用来开发功能很强大的网站。这下懂了吗?

Visual Studio是笔者推荐的三款开发工具中功能最强大的，但是使用起来也相对复杂。不过用习惯了之后，开发效率还是非常高的。Visual Studio不仅可以开发静态网页，还非常有利于开发动态网页。在开发动态网页方面，可以说Visual Studio比Dreamweaver更胜一筹。前面我们说过，静态网页一般是没有交互性的，用户能做的也仅仅是浏览网页。而在动态网页中，作为用户，我们可以参与评论交流、上传文件，以及使用与服务器交互。

2.Sublime Text

Sublime Text是一个轻量级的代码编辑器，具有友好的用户界面，支持拼写检查、书签、自定义按键绑定等功能，还可以通过灵活的插件机制扩展编辑器的功能，其插件可以利用Python语言开发。Sublime 'Text是一个跨平台的编辑器,支持Windows、Linux, macOS等操作系统。

Sublime Text凭借其漂亮的用户界面和极其强大的功能，被誉为“神级”代码开发工具。

Sublime Text 支持多种编程语言的语法高亮，拥有优秀的代码自动完成功能。此处，它还拥有代码片段(Snippet)的功能，可以将常用的代码片段保存起来，在需要时随时调用。Sublime Text 支持 VIM 模式，可以使用VIM模式下的多数命令。

Sublime Text 还具有良好的扩展能力和完全开放的用户自定义配置与神奇实用的编辑状态恢复功能，支持强大的多行选择和多行编辑。

该编辑器在界面上比较有特色的是支持多种布局和代码缩略图。利用右侧的文件缩略图滑动条，可以方便地观察当前窗口在文件的哪个位置。

如果你已经有一定的前端基础，我相信Sublime Text更加适合你。Sublime Text可以让你快速地进行开发，强力推荐!

3.HBuilder

HBuilder是由DCloud(数字天堂)公司推出的一款支持HTML5的Web开发编辑器，在前端开发、移动开发方面提供了丰富的功能和贴心的用户体验，还为基于HTML5的移动端App开发提供了良好的支持。

4.Adobe Dreamweaver

Adobe Dreamweaver是一个集网页制作和网站管理于一身的所见即所得的网页编辑器，用于帮助网页设计师提高网页制作效率，简化网页开发的难度和学习HTML、CSS的门槛。但缺点是可视化编辑功能会产生大量冗余代码，而且不适合开发结构复杂、需要大量动态交互的网页。

5.WebStorm

WebStorm是JetBrains公司推出的一款Web前端开发工具，JavaScript、HTMLS开发是其强项，支持许多流行的前端技术，如jQuery、Prototype、Less、Sass、AngularJS、ESLint、webpack等。

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。相比Dreamweaver弱智的智能提示来看，WebStorm对html特别是HTML5和JS的智能提示简直堪称大神，很值得去使用。不过WebStorm不像Dreamweaver一样支持拖拽或者插入代码的方式来做HTML，如果你是初级入门者，需要拉表格完成布局的话，WebStorm完全不合适你的使用。WebStorm只适合手写代码的前端开发者使用。

WebStorm足够的轻量级，下载只有几十M，安装快速方便，对机器性能要求低，占有足够少的内存，而且支持跨平台的使用，非常方便。而且对js的提示也足够的先进。还带js调试功能。

这里就就和大家分享一下入行前端开发需要学习的知识点。

1、首先HTML和CSS是入行前端的第一个台阶，内容非常简单易学。

2、Div为HTML文档中大模块的内容提供结构以及背景支持。

3、HTML5+CSS3是HTML和CSS最新的标准版本。在原有的基础上增加了很多特性，例如HTML5中增加了一些语义化的标签和多媒体标签，从而能够通过JTML5+CSS3的组合实现原来JavaScript才能实现的功能。目前HTML5+CSS3主要应用于移动端的网页制作，目前万门熟知的微信小程序就有HTML5的影子。

4、JavaScript是一种具有函数有限的轻量级解释型的编程语言，通常JavaScript脚本是通过嵌入在HTML中来实现自身功能，可以为网页添加各种动态功能，因此在企业实际开发应用中JavaScript是考核前端工程师的重要标准。甚至有一些大型互联网企业有专职从事JavaScript开发的岗位。

5、jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，拥有便捷的插件扩展机制和丰富的插件。

6、node.js是一个让JavaScript运行在服务端的开发平台，掌握node.js可以让JavaScript成为与Python等后台编程语言平起平坐的脚本语言。

7、前端开发常用框架。目前前端开发中被使用最多的三种主流框架是Angular、React、Vue。React拥有较高的性能，代码逻辑非常简单，Vue是一个构件数据驱动的Web界面的库主要聚焦在view视图层，Angular是相对来说更加完善的前端框架。

8、微信小程序开发本质上就是HTML5+CSS+JS开发的，但是并不能直接使用HTML标签，微信提供了一个组件库，其中没有DOM和其他浏览器上的API，对于网络和Canvas也做了重新的包装。只要掌握了前面的知识学起来是非常轻松的。目前微信小程序开发已经成为前端开发中非常重要的一个方向。

9、还需要掌握一些SEO优化相关技术，作为前端开发工程师经常与网站接触，因此掌握SEO技术，可以大大提高网站开发的效率，降低后期网站运营过程中反复调试修改的问题。

10、完整地掌握网站开发的流程并且了解业务相关联的部分技术知识，在实际工作中，前端开发工程师主要业务会与产品经理、UI设计、后端开发关联，因此一个合格成熟的前端开发工程师需要对产品经理、设计以及后台开发有一定的了解，甚至完成相应的基础应用。

以上10个模块就是目前企业招聘前端开发工程师的主要技能要求。因此对于刚入门的同学而言，需要通过结果反推你的学习需求。这样才能在学习完成后快速与用人单位接轨，达到快速就业的目的。入门前端所需要的学习的内容当然不仅仅是文中所提到的这些模块，此外还有数据库知识、操作系统知识、Ajax、bootstrap框架、Wepack项目打包等等知识内容。目前网络上大部分前端学习路线并不完整，建议想要学习前端的同学，能通过培训的方式快速学习，不仅节约了自己的学习时间成本，同时也能学习到系统完整的前端知识体系。这样才能保障自己在企业实际工作中避免遇到过多的技术问题。

推荐课程：

提取码：3om5

第一阶段HTML5+CSS3：

1. HTML基础语法

2. 排版、多媒体、链接标签

3. 列表、表格、表单标签

4. 布局、语义化标签

5. CSS多种选择器

6. 外观、文字、背景等CSS样式属性

7. 标准流、浮动、定位等CSS布局技巧

8. 伪元素、伪类

9. 圆角、阴影、透明、过渡CSS装饰属性

10. 精灵图、SEO、性能优化、版心等项目开发技巧

第二阶段移动web：

1. 移动端特点

2. Flex布局模型

3. 移动端网页适配方案-Rem布局

4. 移动端网页适配方案-vw/vh布局

5. 响应式网页布局方案

6. 媒体查询的使用

7. 平面转换和空间转换技巧

8. 动画animation的使用技巧

JavaScript系列

JavaScript 基础语法
了解语言的基本概念，熟识语法规则，培养语言基础逻辑能力，建立良好的编程思维，具有一定的语言驾驭能力。

WebAPI/Dom Bom操作方法
学习客户端开发技术，能够根据产品需求完成开发任务，如视觉交互、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。

jQuery
借助 jQuery 提升开发的效率，同时借鉴和学习 jQuery 的封装实现思想，巩固面向对象的相关知识，加深对面象对象的理解。

数据可视化 ECharts 实战
综合 JavaScript、HTML、CSS 所学的知识，针对企业现实开发需求，基于 ECharts 数据可视化插件归纳数据可视化领域解决方案，提升知识综合运用水平。

服务端编程

Ajax
系统的学习网页数据交互的 Ajax 技术，建立前后端交互的知识体系，为学生夯实网络编程的基础，为后期高级课程的学习做好铺垫。

Git
借助 Git 对项目进行版本控制，掌握实际开发中那些必知必会的 Git 操作。

nodejs基础
全面系统讲解 Node.js 中最核心的、必知必会的概念，能够基于模块化的开发思想优化项目代码，编写出高效、健壮的代码，同时培养出 Node.js 的编程思维。

MySQL
了解后端数据库的基本使用，能够使用常见的 SQL 语句操作数据库，并且能够使用 MySQL 模块在项目中操作 MySQL 数据库，为实现从前端程序员进阶到全栈程序员做准备。

Vue.js

满足前端工程师的岗位要求，重中之重，也是主流框架之一，必会技能。

小程序

小程序基础+电商项目
了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。

uni-app
理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。

React.js 基础

深入理解组件化和模块化开发思想，三大主流框架之一，满足企业招聘中的岗位要求。
加急更新中，敬请期待。
TypeScript 基础+高级