github地址 我们前端,每个人都有自己的开发工作环境,工具等,所以我写了这一篇文章,为自己方便把自己常用的**前端工具**记录下来,以便到时候在新的电脑上可以快速搭建自己熟悉的工作环境和使用自己熟悉的工具,同时可能也会对你有少少的帮助吧!

• nvm 管理node 版本, nvm-windows
• volta 同node版本管理,支持目录级别使用不同node版本
• n 同node版本管理
• node 如果不需要多个node版本管理，直接下载这个（不推荐）
• npm , cnpm , 建议使用nrm 包镜像地址管理, spm 安装可以更换淘宝的安装包地址(淘宝镜像)
• pnpm 全新包管理
• nrm 包链接管理
• Python 2.7
• Ruby(git依赖)
• git-ssh 配置和使用 coding
• gulp 下面会列出常用插件 , F.I.S (百度前端工具框架)
• sass 教程/ less
• sass文件编译方案
• git还有另外一个工具(在xp,win7上可用还是图形的哦,还有文章) 点我
• node-sass 依赖node版本列表

1.window 下载 nvm-windows 直接安装好，再根据需要安装对应的node版本， 报错请重启电脑后再试！

方法一： nvm 安装（官网默认下载安装即可）， 找node 官网找到需要安装的 node version，另外一个版本切换工具n 使用命令行

# 查看安装node 12.22.6, 64位版本
nvm install 12.22.6 64
# 查看已安装的node版本列表
nvm list
# 使用某版本
nvm use 12.22.6
# 后面直接使用npm即可

# 版本切换工具2
npm install -g n

# 安装node版本
n 12.22.6

# 切换,输入 n 然后根据列表选择回车即可

方法二： 直接下载 node 应用程序安装即可

2.安装依赖包管理,更多用法请移步到nrm包官网

// 全局安装
npm i nrm - g

// 参考说明文章  https://juejin.cn/post/6969450118839795749
npm i pnpm -g

// 帮助
nrm help

// 查看列表
nrm ls
// eg:
// # 带有 * 为当前安装依赖源
  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

// 切换源(镜像)
nrm use taobao

// 添加源
// eg:
nrm add taobao https://registry.npm.taobao.org/

// yarn
npm install --global yarn 或 npm i -g yarn

// 快速删除 node_modules
npm i -g npkill

// gulp [使用 gulp 构建工程][16]
npm i gulp 

//Webpack
npm i -g webpack

//Browsersync
npm i -g browser-sync

// Debug log输出
npm i debug

// 多项目不同node自动切换
npm install -g avn avn-nvm avn-n
# https://github.com/wbyoung/avn

• git-for-windows
• TortoiseGit 乌龟
• SourceTree / SourceTree 证书下载
• Git Extensions 缺点: 需要自己定义第三方differ工具
• Sublime Merge 优点: 自动隐藏交叉合并,分支更清晰 缺点:只支持x64

• WebStrom 推荐 配置在底部
• vs code 推荐 配置在底部
• ATOM
• sublime_text(文章介绍)
• HBuilder

• tmt-workflow 感觉不好用
• WeFlow tmt-workflow的桌面版 ，也感觉不好用
• iview iview ui自己的手架开发工具
• vue-cli vue spa 方式的手架
• Amazing-Windows-Apps

• JSON 数据的简单可视化工具
• 数据库关系图设计
• github start收藏项目管理工具-AStral
• jscpd 重构,找到重复代码
• jsinspect 重构,检测相似的代码片
• [Shadowsocks 科学上网 带有一个免费账号 https://github.com/yyman001/software] (https://github.com/shadowsocks/shadowsocks-windows)
• Beyond Compare 4 文件对比
• cmder(类似cmd的命令提示符,有自带git版本) 配置教程
• WeChatPlugin-MacOS 微信小助手-调试开发
• 右键助手1.0 (我自己开发的,详细点这里) ,彗星小助手（取色） , W3Cfuns前端开发工具箱 (到百度分享查看下载地址)
• AdobeDreamweaverCS4 写表格,热点图
• FlashFXP (ftp上传工具)
• Markdown Pad 2 (写Markdown格式文档必备的软件,我文章是用在线版)
• Winmerge 开源的文件比较工具(如果你不能使用Beyond Compare)
• DocBlockr Sublime Text 2/3-注释生成插件
• JSDOC 注释文档生成工具
• 字体解决方案1-字蛛是一个中文字体压缩器,让网页自由引入中文字体成为可能
• 字体解决方案2-Fontmin,第一个纯 JavaScript 字体子集化方案
• docker GUI - Now part of the Docker Toolbox

• Easy Moc 模拟数据最好方案,提供的功能非常强大
• postwoman 在线
• postman 测试请求接口
• Postman中文版
• APIPOST
• Apifox API 文档、API 调试、API Mock、API 自动化测试

• 把CSS代码转成SASS的应用
• CSS Sprites 样式生成工具
• koala考拉(Less、Sass、Compass、CoffeeScript编译) ----免费

• Mark 马克鳗 (设计图测量)
• PxCook 像素大厨 智能标注绝对可以解放双手了，强烈推荐。
• Assistor PS (切图工具)

• 在线正则regex pal
• 正则图形显示
• Expresso是一个.NET版本的正则表达式编辑器。可以测试你的正则表达式。
• Regex Match Tracer 2.1 (正则工具)

• [nginx]
• brower-sync 自动刷新页面-多端同步,支持gulp
• WampServer 搭建PHP环境服务器
• phpStudy php搭建环境,包含多个版本随便切换
• MyWebServer 迷你型服务器
• F5 自动刷新浏览器(本地开发)
• 小苹果服务器(手机调试专用win7以上)

• whistle
• Fiddler2 数据拦截 或 360管理软件下载

• Photoshop CS4/CS6 不解释,PS插件?建议去 设计优
• APNG Software 转APNG软件
• iSparta 图片压缩
• limitPNG 无损压缩的极限
• 智图客户端
• 雪碧图合并 Cyotek Spriter
• 雪碧图合并 TexturePackerGUI - 这个厉害点,支持生成雪碧图后的坐标值文件
• gka 是一款简单的、高效的帧动画生成工具，图片处理工具,快速制作高性能帧动画解决方案
• 熊猫png压缩
• 智图(多种图片压缩)
• 雪碧图坐标查询
• 在线切图工具 (最近找到的,不知道如何,欢迎大家测试)
• SETUNA2 (图片裁剪对比)

• gtmetrix 网站性能分析 - 推荐 不想用插件工具就直接访问网页吧
• WebPagetest 一款非常优秀的网页前端性能测试工具 国外在线地址 国内阿里在线地址
• 谷歌插件 PageSpeed (页面性能检测优化 - 我自己测试卡到一半?我浏览器逗比?)
• 谷歌插件 Google Web Tracing Framework (持移动、PC，性能分析的神器,又一个鸡文,反正我是不懂怎么用~)
• 火狐请参考 YSlow
• web应用性能检测-百度只支持移动端页面
• 性能检测工具Tracker.js
• 他的谷歌插件, WEB前端助手(FeHelper)

• Firebug
• YSlow 性能检测
• JSONView 在页面查看那json数据
• CSSUsage 检测无效css
• Dust-Me Selectors 检测页面css沉余
• FireQuery jq语法高亮
• FireRainbow js语法高亮
• HtmlValidator html文档标准检测
• NoScript 控制页面和浏览器js
• FireGestures 用鼠标手势命令
• Adblock Edge 广告过滤
• webDeveloper1.2.2-(zh-cn) 中文版,点我 （除了最后一个网上可能找不到中文版）

• Sight 通过各种主题和字体选项，Sight将网站的源代码以更为视觉舒适的形式强调。
• 海淘访问助手 -免费翻墙谷歌插件-强烈推荐
• octotree 看github的时候生成项目tree 推荐
• Awesome Autocomplete for GitHub - github搜索异步查询结果
• Quick CSS 快速在 Chrome 开发环境检测 CSS 代码的规范性
• AlloyDesigner 嵌入式开发插件-详情自己看连接
• Web Developer (居然被我找到谷歌版的,不过是英文的,不错了)
• Window Resizer (允许你快速调整浏览器窗口分辨率)
• CSSViewer (浮动面板简单显示CSS属性)
• Wappalyze (分析网站使用什么技术,优化的时候可以看人家网站使用什么技术)
• IE Tab (直接在Chrome中使用IE渲染引擎模仿IE,IE6、IE7、IE8和IE9,扩展目前仅适用于Windows系统,感觉有点不靠谱)
• Clear Cache(能让你从工具栏中清除缓存)
• Image Downloader (批量下载图片)
• 谷歌加速插件 替换一些需要翻墙才能链接的js替换为国内链接
• JetBrains IDE Suport (配合WS 在浏览器同步刷新,似乎在谷歌高版本已经无效,如果你不使用ws,可以配合gulp的插件,也可以实现同步更新)
• ReRes 开发的时候替换测试路径为本地,实际是上线后的地址
• Enable Copy 去除右键限制
• JSON View 查看json格式数据
• WEB前端助手(FeHelper)_v5.8
• 有道云笔记网页剪报 (保存页面到有道笔记本)
• Firebug Lite 谷歌用火狐插件(哈哈,开发者用火狐提供的ie火狐js搞的吧)
• 网址转二维码 (手机测试中有用,扫描就打开测试地址了)
• ScriptSafe汉化版 (可以控制页面的js脚本)
• Word Count 是一款用来统计选中网页的字数，支持中文的扩展。
• Chrono下载管理器(https://chrome.google.com/webstore/detail/chrono-download-manager/mciiogijehkdemklbdcbfkefimifhecn)
• ShoeBox 雪碧图-支持多款游戏js框架

• Flux 调整屏幕亮度,暖色调
• ADSafe 过滤广告
• Everything 快速查询
• Wise Registry Cleaner 注册表清理
• Clover 让你的Windows资源管理器拥有像谷歌浏览器一样好用的多标签页
• 360云盘 同步数据文件
• 有道云笔记 协作同步开发
• Proxy SwitchySharp 代理工具,翻墙用的,需要自己找账号信息填写哦
• Snipaste 截图工具
• [Q-Dir 多窗口文件夹管理]
• [Xmanager Enterprise 5 远程服务器连接xshell]
• 自同步（zisync） 多电脑同步数据

• 使用GUI快速创建SVG path
• resizr 测试 CSS media queries 的轻量级应用-需要线上地址,没有线上地址,可以搞个coding-git
• 中国开源在线工具
• cssanimate动画制作工具
• 配色方案(美工的工具)
• CSS3/HTML5/SVG 兼容性查询表
• WhatTheFont-字体查询1 求字体网-字体查询2 What Font is-字体查询3
• 运同步多人办公
• Google 镜像站搜集

• 编译Sass (gulp-ruby-sass || gulp-sass)
• 编译Map文件 (gulp-sourcemaps)
• 自动添加css前缀 （gulp-autoprefixer）
• 压缩css （gulp-minify-css）
• 压缩css使用的 gulp-mini-css[国产.配合清除沉余css插件后的压缩插件,跟上面的不一样哦]
• js代码校验 （gulp-jshint）
• 合并js文件 （gulp-concat）
• 压缩js代码 （gulp-uglify）
• PreCSS预处理1--处理CSS优化 (cssnano)
• BASE64编码图片 (gulp-base64)
• 压缩图片 （gulp-imagemin）
• 雪碧图 (gulp.spritesmith) https://github.com/twolfson/gulp.spritesmith
• 自动刷新页面 （gulp-livereload）//不建议配合WS一起用(WS的自动保存,然后你懂的,但如果你不是用less或者sass开发,还是建议使用的)
• 图片缓存，只有图片替换了才压缩 （gulp-cache） //我也没用过
• 更改提醒 （gulp-notify） //我也没用过
• 外链文件合并 （gulp-htmlone）https://github.com/amfe/or.htmlone.gulp //我也没用过
• 清除文件 （del）
• 替换内容,需自定义范围内容,支持正则[常用于替换上线后的js,css文件路径] （gulp-replace）
• 同上,更加智能 (gulp-rev-collector)
• 智图图片处理插件 (gulp-imageisux)
• 将文件转成utf8编码的gulp插件(gulp-utf8-convert)
• 合并按模块引入的html文件(gulp-content-includer)
• 提取html标记内容合并到指定位置 gulp-html-merge
• 压缩html (gulp-minify-html)

• css手册 在线(里面可以下载,感谢作者:飘零雾雨)
• jQuery手册 ，　其他版本
• Zepto手册
• Less.js 中文文档
• Bootstrap 中文文档
• Underscore.js (1.8.2) 中文文档
• Backbone.js(1.1.2) API中文文档
• Vue.js 2.0 中文文档
• avalon.js
• 其他在线手册 自己看吧,应该有的都有了

• 在 WebStorm/PhpStorm 中开启对 Vue.js 的完美支持
• 在WebStorm中添加Vue.js单文件组件的高亮及语法支持
• 在webstorm中配置sass的自动编译

• VSCode拓展推荐（前端开发）
• Visual Studio Code 最好的功能、插件和设置
• VS Code折腾记

• Sublime Text 3 代码片段插件

• Webpack Monitor 使用图表显示打包后文件包含内容百分比 如果页面打开一直load，请修改node_modules\_webpack-monitor@1.0.13@webpack-monitor\build\index.html 里面js的链接
• webpack进阶面板
• webpack-dev-server 实时重新加载

再一次感谢您花费时间阅读这篇文章,如果你有更好的工具,可以给我留言,其他资料还在整理当中,感谢你的阅读!

作者 @黑色技术 创建时间: 2015 年 3月 15日 更新时间: 2020 年 1月 18日