前端工程师优秀开发工具介绍

Yahei Mono字体
下载地址：http://www.zving.com/upload/tools/YaheiMono.ttf

编辑器

轻量文本编辑器推荐

IDE推荐

云IDE

demo在线演示

代码效率工具 emmet

官网 http://docs.emmet.io/
使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：

可以以插件的形式安装在dreamweaver,notepad++,editplus,sublime各个编辑器上，webstorm内置emmet插件。

emmet在sublime上的效果：

  • css ：他与其它编辑器的区别在于细节上，比如ctrl,alt+方向键可以修和里边的数值

  • html 效果：

webstorm,intellij idea是内置的，不需要安装。

js格式化工具

  • 很多编辑器提供JS格式化插件，例如 vscode + Prettier formatter 插件
  • 在线JS格式化工具 http://www.jsbeautifier.org/
  • chrome的开发者工具，可以对js代码进行格式化查看

js语法检查工具

适合代码显示的等宽字体

  • YaHei Mono 中英文都显示的很好
  • YaHei Consolas 中英文都显示的很好
  • Menlo 基于开源字体Bitstream Vera与自由版权字体DejaVu字体改良而来

LESS

官网 http://lesscss.org/
LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数.
通过npm安装less后，编译less到css为执行以下命令
lessc foo.less foo.css

SASS

http://sass-lang.com/
类似LESS

Jade

官网 http://jade-lang.com/
__Jade__是一个html模版引擎。jade 将 HTML 赋予了动态语言的特性。
Jade语言需要编译来生成HTML代码，写Jade代替HTML可以极大减少代码量和提高可读性（习惯后）。

Slim

http://slim-lang.com/
类似Jade

代码压缩

JS压缩工具

  • Webpack 打包js，并开启压缩，https://webpack.docschina.org/configuration/optimization/#optimizationminimizer
  • terser，https://github.com/terser/terser
    webpack默认使用terser来压缩js,terser也可以单独使用，通过npm安装 terser 后执行以下命令可压缩JS
    terser input.js --compress ecma=2015,computed_props=false
  • Uglify http://lisperator.net/uglifyjs/
    基于Node.js的压缩工具，是老牌的JS压缩工具，UglifyJS 压缩率高，压缩选项多，会以减少字节数为目的修改JS表达式。
    通过npm安装uglifyjs后执行以下命令可压缩JS
    uglifyjs foo.js -m -o foo.min.js
  • YuiCompressor http://developer.yahoo.com/yui/compressor/
    基于Java的压缩工具，虽然压缩率不是最高的，并不以减少字节数为目的修改代码，相当安全，易用。
    下载yuicompressor.jar后执行以下命令可压缩JS
    java -jar yuicompressor.jar foo.js --charset UTF-8 -o foo.min.js

CSS压缩工具

在线压缩工具

http://tool.css-js.com/
http://tool.oschina.net/jscompress

构建任务运行工具

前端模块管理工具

  • Webpack 功能强大，不仅仅是js模块管理工具，可以对js/css/图片等前端资源进行编译、打包
  • vite 基于原生 ES-Module 的前端构建工具，极速启动开发服务
  • Parcel 类似Webpack，主打比 Webpack 更少的配置
  • browserify http://browserify.org/
  • r.js http://requirejs.org/
    requirejs提供的打包工具，也可以进行JS压缩，JQuery 就是使用此工具打包/压缩。

网页调试工具

browsersync

http://www.browsersync.cn/
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进行调试。

LiveReLoad

http://livereload.com/
动态监视文件夹文件变化，只要发现目标文件夹中有任何一个文件有改动，立刻通知浏览器刷新页面，这样就免除了手动按F5。

IE下内存泄漏排查

  • sIEve

用于抓包调试页面的HTTP代理

IE多版本共存

  • IETester
    虽然IEtester中的IE浏览器表现与系统原生IE浏览器有很多差异，而且还经常崩溃。但毕竟不用装虚拟机那么麻烦。
  • VMware Player
    IEtester中的IE浏览器表现与系统原生IE浏览器有很多差异，这时你需要在虚拟机中安装低版本IE来调试。
    VMware Player 是免费的。
  • IE Collection
    虽然IE Collection中的IE浏览器经常崩溃。但毕竟不用装虚拟机那么麻烦。

Http web服务器(用于测试ajax应用)

  • anywhere 基于Node.js
    任意目录下执行anywhere命令就可以把这个目录变成一个静态文件服务器的根目录
  • Asp.Net微型服务器 http://waw.cnblogs.com/
    小巧（前提是系统必须安装 .NET Framework）
  • Apache
    • PHPTS 5.2.6 https://www.phpts.com/
      一个图形界面的APM管理工具，方便地可视化配置Apache虚拟主机、虚拟目录、端口。集成了 Nginx Web服务器、PHP 7.4/7.3/5.6 多版本语言、MySQL 8.0、Memcached、Redis、MongoDB、InfluxDB、Composer、Bash、phpMyAdmin。

吸色器

  • CPick.exe 小巧217K，够用
  • colorPix

吸色器&配色参照

  • ColorImpact

设计稿标注、测量工具

截图

  • QQ
    QQ随时开着，用来截图很方便，推荐修改一下截图快捷键，不要用到alt键，以免把当前软件展开的下拉菜单折叠。
  • Snipaste 把截图贴在屏幕上的功能特别适合演示
  • skitch
    https://evernote.com/intl/zh-cn/skitch/ 强大的标注功能
  • FastStone Capture
    附带 屏幕取色器 屏幕标尺 屏幕录像功能

看图软件

  • 蜂蜜浏览器 https://www.bandisoft.com/honeyview/ 国产小巧的图片浏览工具，它可以保持原尺寸翻看图片。
  • ACDSee 经典专业的图片浏览工具，它可以保持原尺寸翻看图片。

原型制作

文件比对工具

  • KDiff3 免费
  • beyond compare 收费

知识管理

思维导图

流程图

Git图形界面客户端

MakeDown编辑器

  • Typora 可导出makedown文件为word格式

命令行终端工具

  • ConEmu 多页签，配置项多

解压缩

  • Bandizip
  • 7-Zip

参考手册