五、常用工具
前端开发是最简单的，只需要一个文本编辑器以及一个浏览器就OK了。但是工具更能为我们提供无数的便利，提高我们的开发效率和开发质量。下面跟大家分享一些前端常用工具：
一、开发IDE
- HBuilder
- 新手入门最好用的 IDE，基于 eclipse 深度封装，全中文界面，完善的代码自动补全，HTML+CSS+JQ+JS，支持 emmet 输入，满足新手的大部分应用。
优点：傻瓜化安装，全中文，出色的智能提示；
缺点：没有社区支持，代码补全有点老旧，对预处理器支持不太好；
- WebStorm
- 全能之选，大多数人当前的使用选择，包括我，WebStorm 可以实现针对 JavaScript、TypeScript、stylesheet 语言和其他最流行框架的智能代码补全、实时错误检测、以及强大的导航和重构功能。
可以说 WebStorm 几乎拥有所有你期待的功能。使用 WebStorm 尽量不要使用汉化包，容易出现错误。
- Microsoft Visual Studio 2017
- Microsoft Visual Studio 2017 用于.net 开发，但是同样可以作为一款前端开发软件，在我之前的公司就使用它作为开发IDE,它能够快速导航、编写并修复你的代码，实现轻松调试和诊断，根据你的喜好进行扩展和自定义，并实现有效协作，ASP开发首选。
- notepad++
- 非常小巧的一款 IDE，适合用作前端代码编写，但是扩展功能有限，如果设计复杂部分，不推荐使用。
- sulimeText3
- 非常小巧，启动速度特别快，基本替代了对文本文档的使用，虽然是闭源软件，但是有着丰富的第三方支持，能够满足各种各样的扩展。
并且最好用的地方在于可以通过本地 node 进行编译，如果把前端比作LOL，项目比作排位赛。
二、其他类工具
- WebPack
- WebPack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
- gulp
- Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目。
- SVN
- SVN是Subversion的简称，是一个开放源代码的版本控制系统,当前使用最广泛的版本控制之一，一般项目开发团队之间都使用SVN进行配合开发。
- Git
- Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。
- NPM
- NPM 是随同 NodeJS 一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
(1) 允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。
(2) 允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。
(3) 允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用。
- FIS
- FIS , 前端工程构建工具，解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题
- grunt
- JavaScript 世界的构建工具，自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
- Firebug
- Firebug是firefox下的一个扩展,能够调试所有网站语言，如Html,Css等，但FireBug最吸引人的就是javascript调试功能，使用起来非常方便，而且在各种浏览器下都能使用（IE,Firefox,Opera, Safari）。除此之外，其他功能还很强大，比如html,css,dom的查看与调试，网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。
- YSlow
- YSlow 是 Yahoo 发布的一款基于FireFox的插件，这个插件可以分析网站的页面，并告诉你为了提高网站性能，如何基于某些规则而进行优化。
- JSLint
- JSLint，一个用于提升你所编写的代码质量的工具，它是一个JavaScript验证工具（非开源），可以扫描 JavaScript 源代码来查找问题。
如果 JSLint 发现一 个问题，JSLint 就会显示描述这个问题的消息，并指出错误在源代码中的大致位置。
有些编码风格约定可能导致未预见的行为或错误，JSLint 除了能指 出这些不合理的约定，还能标志出结构方面的问题。
- sass
- 官网介绍：世界上最成熟、最稳定、最强大的专业级CSS扩展语言！Sass 完全兼容所有版本的 CSS。我们对此严格把控，所以你可以无缝地使用任何可用的 CSS库。
- Less
- Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。它可以运行在 Node 或浏览器端。
- PxCook markman
- 这两款都是用于标注的小工具，用于和UI配合。
前端等级划分
对于前端等级我有一套娱乐性的划分，供大家参考。把前端比作LOL，每个项目就是一场排位赛。
LV1：萌新-未入门
肯定就是1-29级的玩家：没法参加排位赛，无法开展项目。
这部分玩家刚开始接触前端，或者对于 CSS 不够熟练，或者对 JS 知道的还不够，所掌握的东西还没有办法独立完成一个完整的页面，让他们去看一个完整的项目，他们就会感觉，这是啥，这又是啥。
LV2：入门-青铜（初级）
这部分玩家具备一定的基础能力，能够自己完成一些简单的页面，但是对于一些比较复杂的逻辑不能理解通透，或者对于某些特定样式不能完成，遇到问题比较多的时候都束手无策，比较喜欢直接询问别人如何解决，代码质量较渣，这些玩家在项目中往往会给你分配一些比较简单的页面。
LV3：进阶-白银（初级）
这部分玩家已经掌握了一定的进阶技术，能够在一个项目中承担各种任务，也能够自己解决一些比较常见的问题，有了一定的项目经验，能够总结出遇到的问题，避免各种简单的错误，书写的代码可供阅读，这类玩家在项目中能够胜任大多数的开发工作。
LV4：崛起-黄金（中级）
此类玩家已经具有相当的经验，已经成长为能独挡一面的大将，具备相当的学习能力，遇到问题都能自己独立快速解决，代码内容都是经过优化，不存在过多的代码冗余。
工作之余能够选择合适的新技术来扩充自己，以迎接下一阶段的挑战。这部分玩家在项目中挑起大梁，在完成自己工作的同时也帮助其他人解决问题。
LV5：成熟-铂金（高级）
前端项目中 leader，拿到一个项目知道应该如何选择合适的技术框架，应当如何针对项目进行项目规划。
精通组件式的开发，高效率，对前端各种技术都有自己的认知，对于后台技术也有所了解，从项目的前期设计到后期维护方案都参与，在项目中属于整个项目的前端负责人。
LV6：蜕变-钻石
掌握了前端底层的精髓，能够基于底层编写自己所需的所有东西，对前端的认识已经达到入微境界。
这类人一般已经不在直接编写项目代码了，他们的工作更多的是让别人更方便的工作，各类框架就是出自于他们之手。
LV7：登顶-大师
大师级的人物，在专业内具有相当的权威，各个书店都能买到他们的作品，他们左右着技术的走向。
LV8：封神-王者
他们的名字流传于每个互联网的角落，他们在全球技术圈都具有相当的影响力，他们正在改变未来。
附（常用命名单词列表）
- wrapper 页面外围控制整体布局宽度
- container或#content 容器,用于最外层
- layout 布局
- head, #header 页头部分
- foot, #footer 页脚部分
- nav 主导航
- subnav 二级导航
- menu 菜单
- submenu 子菜单
- sideBar 侧栏
- sidebar_a, #sidebar_b 左边栏或右边栏
- main 页面主体
- tag 标签
- msg /message 提示信息
- tips 小技巧
- vote 投票
- friendlink 友情连接
- title 标题
- summary 摘要
- loginbar 登录条
- searchInput 搜索输入框
- hot 热门热点
- search 搜索
- search_output 搜索输出和搜索结果相似
- searchBar 搜索条
- search_results 搜索结果
- copyright 版权信息
- branding 商标
- logo 网站LOGO标志
- siteinfo 网站信息
- siteinfoLegal 法律声明
- siteinfoCredits 信誉
- joinus 加入我们
- partner 合作伙伴
- service 服务
- regsiter 注册
- arr/arrow 箭头
- guild 指南
- sitemap 网站地图
- list 列表
- homepage 首页
- subpage 二级页面子页面
- tool, #toolbar 工具条
- drop 下拉
- dorpmenu 下拉菜单
- status 状态
- scroll 滚动
- .tab 标签页
- .left .right .center 居左、中、右
- .news 新闻
- .download 下载
- .banner 广告条(顶部广告条)
- 电子贸易相关
- .products 产品
- .products_prices 产品价格
- .products_description 产品描述
- .products_review 产品评论
- .editor_review 编辑评论
- .news_release 最新产品
- .publisher 生产商
- .screenshot 缩略图
- .faqs 常见问题
- .keyword 关键词
- .blog 博客
- .forum 论坛
- CSS文件命名 说明
- master.css,style.css 主要的
- module.css 模块
- base.css 基本共用
- layout.css 布局，版面
- themes.css 主题
- columns.css 专栏
- font.css 文字、字体
- forms.css 表单
- mend.css 补丁
- print.css 打印
