浅谈前端工程师的职业生涯の（下篇）

本文章原创作者是差不多先生，非常不错的文章，情不自禁就转载了，好文章要大家分享。

五、常用工具

前端开发是最简单的，只需要一个文本编辑器以及一个浏览器就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是Subversion的简称，是一个开放源代码的版本控制系统,当前使用最广泛的版本控制之一，一般项目开发团队之间都使用SVN进行配合开发。

Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。

NPM 是随同 NodeJS 一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
(1) 允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。
(2) 允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。
(3) 允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用。

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 打印

![在这里插入图片描述](https://img-blog.csdn.net/20180917211023707?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA3NjQ4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)