搭建前端开发环境需要的东西

开发环境

编辑器

sublimeText 付费 好用的 软件

webStorm 是一个功能强大的编辑器，同时也是一个付费软件。低配置电脑吃不消

vsocde 微软开源编辑器，内置了一些前端基础的开发环境

浏览器

chrome 目前主流浏览器

edge ie升级版

firefox 有bug 但比ie强

从统计数据来看目前主要的趋势还是以chrome所使用webkit内核作为主流，同时chrome的开发者工具对于开发人员十分的友好，因此有很多的开发者选择了该浏览器作为首选的调试工具。chrome还有一个便利就是登陆了谷歌账号后，可以在别的机器上进行同步插件和配置。

打开chrome，右键页面并选中 "检查"即可打开开发者工具，chrome的具体使用参考下面几篇文章:

设计图

每个团队的设计师提供的设计图可能是不一致的，有些团队的设计师可能使用Skitch, 一个可以直接导出为html文件的设计图、有些则直接提供PSD文件。

如果要在两者当中选择，那么我更喜欢PSD的设计图。虽然Skitch导出的设计图可以直接查看每个元素的尺寸，但没有标注和测量的功能。PSD文件通常是源文件，可以在设计软件中打开，可以查看具体设计的详细信息。

打开PSD文件通常有两种方式：

• Photoshop优点是功能齐全，你想要的这里都有，缺点是具备一定的学习成本，功能繁多带来的问题就是眼花缭乱。
• PxCook就是专门为前端与设计师协作的工具，阉割了开发所用不到的功能，具备各种标注于测量。

扩展应用

有了以上的环境其实就可以投入开发了，但实际工作中还是不太够用，我们需要添加一些好用插件或者工具可以增加效率~

chrome 插件

下面推荐一些比较好用的开发类插件，但链接需要科学上网才能访问：

Markdown Preview Plus
markdown 是程序员最常用的一个文件之一，默认情况下chomre查看markdown是无格式文字展示，可以安装此插件将markdown格式为文档。

GitHub Hovercard
该插件提供 hover card, 显示用户信息、仓库信息、issue、ccommit 信息等。

JSONView
JSON是一个通用的数据格式，无论是前端还是后端都会跟这个数据格式打交道，有时我们直接在URL打开会返回 JSON 接口后，会在页面上显示一串字符串对象，并不太方便阅读数据。

该插件就是格式化返回的 JSON , 使其美观。

NIM(Node.js） 调试管理工具
Node.js 的调试工具，具体教程商城页有介绍。

应用

Sourcetree
Sourcetree 是Git GUI，使用可视化界面来对代码进行版本控制，操作起来会比较友好。

Git flow
该包封装了release、feature、hotfix等项目代码管理流程，减少输入git命令过程。git flow也被封装进了 SourceTree 中，只不过一个是带有 UI 界面的软件，另一个是直接在命令行使用的包，满足不同人的需求。

Postman
Postman是一个跨平台的应用，它拥有完整的API开发环境，该应用前后端的朋友都能使用的了。在Chrome 插件商城中你也能找到它，安装后会自动将该应用离线下载至本地。如果你更偏爱于命令行，可以尝试 curl 。