高效率的前端开发工具集

　　原文链接：http://caibaojian.com/power-frontend-tools.html

　　掌握了这篇文章里面说到的工具，然后你会回来转这篇文章的。我试了一下里面的很多常用神器和快捷键，发现效率真的进步许多，自动化工具对前端开发人员的帮助实在很大。原文来自胖子的博客。·

　　Fe-Dev-In-Mac os

　　sublime text

　　这是我在mac下常操作的…. windows 下状况类似 , 大家多试试就OK了…基本一样的

　　必备快捷键

　　cmd+shift+k 选中标签对 可以快速替换

　　cmd+d 选中标签

　　cmd+k 跳过标签

　　cmd+u 动作回退(注意是动作回退,包括撤销)

　　cmd+g 选下一个(前提是你已经查找过这个字符串)

　　cmd+shift+g 选前一个(前提是你已经查找过这个字符串 如已经使用过cmd+d || cmd+f)

　　cmd+ctrl+g 选择所有相同字符串

　　cmd+shift+v 自动缩进的粘贴

　　cmd+shift+Y css简单计算(这个简直方便)

　　cmd+shift+A html向外选择

　　ctrl+shift+M js向外选择

　　cmd+P 简直神级查找 默认快速在左侧所有文件树中搜索文件,配合 @/#/: 三种符号使用简直感人

　　cmd+T 同上

　　cmd+R html查找id,函数/js查找函数/css查找class/md查找标题(h1-h6)

　　cmd+shift+D 复制粘贴当前行

　　cmd+ctrl+↑ / ↓ 讲当前行上移或者下移

　　cmd+J 没啥用(合并一行)

　　cmd+L 选中当前行 , 多用于删除

　　cmd+shift+L 先选中文本, 打散光标

　　ctrl+shift+k 删除当前行

　　ctrl+T 交换位置

　　ctrl+m 定位成对的括号/花括号/方括号

　　ctrl+tab 最后两个文件位置切换

　　ctrl+k 删除光标前的部分

　　cmd+delete 删除光标前的部分

　　cmd+shift+[ 前一个tab

　　cmd+shift+] 后一个tab

　　cmd+T 搜索所有的文件

　　cmd+enter 下一行插入空行

　　cmd+shift+enter 上一行插入空行

　　ctrl+option+enter 多用于选中插入/emmet效果(sublime最强大的快捷键组合)

　　opt+cmd+F 配合”auto_find_in_selection”: true 用于局部快速替换

　　命令模式

　　file 命令 // 重命名 增删文件 打开文件夹等等….

　　必备插件

　　Package Control

　　Emmet

　　HTMLAttributes

　　Emmet Css Snippets

　　Jquery

　　Sass/Scss/Sass Snippets // 都装上…

　　Alignment

　　ConvertToUTF8 //支持gbk

　　等等….

　　推荐插件

　　Bracket Highlighter //高亮

　　DocBlockr //写好函数之后写注释

　　IMESupport // 输入法跟随(解决windows下中文输入法不跟随光标)

　　LiveStyle // chrome 控制台修改本地css文件

　　SideBarEnhancements // 侧边栏增强

　　clickable URLs // 文档url可点击

　　Csscomb // css排版(配置)

　　Terminal // 终端打开插件 定义快捷键

　　Trimmer // 去空格去空行

　　AutoFileName //方便

　　Autoprefixer //自动前缀

　　AdvancedNewFile //快速创建文件夹/文件 opt+cmd+n

　　SublimeTmpl //模板插件 ctrl+opt+type

　　Markdown Preview // md插件

　　color Highlighter //css颜色

　　HTML-CSS-JS Prettify // 不解释

　　FileDiffs // 查看文件改动

　　QuoteHTML // Html转js字符串

　　设置快捷键

　　reindent //设置快捷键自动缩进文档

　　preferences -> 按键绑定-用户 -> 填入JSON [{ “keys”: [“ctrl+i”], “command”: “reindent” }] -> 全选之后按ctrl+i 排版妥妥的

　　配置Trimmer的删除行末/空行快捷键

　　用户自定义设置

　　“word_separators”: “./\()\”‘:,.;<>~!@#$%^&*|+=[]{}`~?” // 其实就是去掉了横杠 “-“ 方便选择 a-b 这样的结构 , 当然你们可以按需增删里面的符号

　　“spell_check”:true // 检查拼写(我相信你们肯定踩过拼写错误找了很久都没找出来的坑….)

　　其他技巧

　　多文件查找

　　按Command + Shift + F在Find框中输入待查找的代码。可按Command + E快速使用选择中的代码段。

　　在Where框中指定需要查找的文件范围，或填写< open files >表示查找目前打开的文件。

　　在Replace框中输入要替换成的代码，按Replace按钮批量替换

　　space 还是 tab ?

　　设置宏, 新建xxx.sublime-macro，保存在Packages/Users/里面, 在 Preferences 里面找到 Key Bindings - User , { “keys”: [“ctrl+alt+i”], “command”: “run_macro_file”, “args”: {“file”: “Packages/User/xxx.sublime-macro”} }

　　保存常用代码片段

　　node相关

　　nodejs //不解释

　　grunt/gulp/fis // 自动化工具(这里可以开一个教程…)

　　browser-sync // 神级调试工具

　　anywhere // 文件夹随时随地变服务器

　　yeoman // 脚手架工具(这里可以开一个教程…)

　　终端相关

　　Terminal // sublime text 的插件, 方便打开当前文件所在文件夹的路径终端

　　iTerm2 // mac终端替代品

　　如果sublime里面装了Terminal插件的话 记得在 在Terminal用户配置中改成 {“terminal”: “iTerm.sh”}

　　Go2Shell // 配置在finder中的终端打开工具

　　设计相关

　　Photoshop CC // 不解释

　　markman // 标尺 取色工具 psd 不复杂 用这个就可以搞定

　　cutterman //http://www.cutterman.cn/v2/cutterman 切图神器

　　sip // 取色工具 链接: http://pan.baidu.com/s/1kUywjLd 密码: 4ccc

　　chrome插件

　　梧桐雨工具箱 // 链接: http://pan.baidu.com/s/1bos6PDt 密码: pkmz

　　FE助手 //链接: http://pan.baidu.com/s/1qWXN9aG 密码: qmw5

　　Anything to QRcode // 链接: http://pan.baidu.com/s/1bnOeE8v 密码: hy3h

　　Emmet-liveStyle // 方便到令人发指的神器 (请使用最新版,sublime text也要安装对应插件) 链接: http://pan.baidu.com/s/1jHajuz8 密码: bmhq

　　YSlow // 网站优化

　　马克飞象 // markdwon编辑器

　　系统工具(mac os app)

　　Dash // 文档集合

　　Flashlight // 搜索

　　Alferd // 搜索

　　Mou // markdown编辑器

　　BetterTouchTool // 自定义触控板(强烈推荐) 链接http://pan.baidu.com/s/1c0WkjtQ 密码: 368k

　　Divvy //分屏工具 链接: http://pan.baidu.com/s/1eQSIslc 密码: huwp

　　liceCap //录屏软件

　　…其他欢迎补充

　　Fe-Dev-In-Windows

　　sublime text (只给出了快捷键, 其余部分参考mac部分描述)

　　必备快捷键

　　ctrl+d 选中标签

　　ctrl+k 跳过标签

　　ctrl+g 跳到某一行

　　ctrl+shift+v 自动缩进的粘贴

　　ctrl+shift+Y css简单计算(这个简直方便)

　　ctrl+shift+A html向外选择

　　ctrl+P 简直神级查找 默认快速在左侧所有文件树中搜索文件,配合 @/#/: 三种符号使用简直感人

　　ctrl+R html查找id,函数/js查找函数/css查找class/md查找标题(h1-h6)

　　ctrl+shift+D 复制粘贴当前行

　　ctrl+shift+↑ / ↓ 讲当前行上移或者下移

　　ctrl+ ↑ / ↓ 数字增减

　　ctrl+J 可能会写数组的时候有用(合并一行)

　　ctrl+L 选中当前行 , 多用于删除

　　ctrl+shift+L 先选中文本, 打散光标

　　ctrl+shift+k 删除当前行

　　ctrl+T 选中交换位置

　　ctrl+m 定位成对的括号/花括号/方括号

　　ctrl+tab 最后两个文件位置切换

　　shfit+ delete 删除光标前的部分

　　ctrl+shift+delete 删除光标后的部分

　　ctrl+pageUp 前一个tab

　　ctrl+pageDown 后一个tab

　　ctrl+enter 下一行插入空行

　　ctrl+shift+enter 上一行插入空行

　　ctrl+alt+enter 多用于选中插入/emmet效果(sublime最强大的快捷键组合)

　　ctrl+shift+g 光标所在区域 加包裹层

　　ctrl+H 配合”auto_find_in_selection”: true 用于局部快速替换

　　ctrl+shift+F 强大的搜索和替换

　　node相关 (见mac部分)

　　略

　　设计相关

　　Photoshop //公司电脑根本没法选择 ╮(╯▽╰)╭

　　markman //不解释

　　cutterman //http://www.cutterman.cn/v2/cutterman 切图神器

　　小吸管 // 非常非常小的取色工具 链接: http://pan.baidu.com/s/1pKytCxX 密码: ryqh

　　chrome插件 (见mac部分)

　　略

　　其他工具(Windows)

　　GifCam // 非常非常好用的gif录制软件 链接: http://pan.baidu.com/s/1eRjcODG 密码: qfkf

　　fiddler // 代理抓包工具

　　weinre // 移动端调试工具

　　…其他欢迎补充

　　其他

　　查阅类型(网站)

　　http://docs.w3cub.com/ //文档集合(英文)

　　http://tool.oschina.net/apidocs //文档集合(在线)

　　http://hemin.cn/jq/ // 这人整理的jq api很出名….

　　http://caniuse.com/ // 这个有终端方式 , 但我比较喜欢网页

　　http://fontfamily.io/ // 系统字体查询

　　http://screensiz.es/phone // 设备查询

　　http://mydevice.io/devices/ // 设备查询

　　http://www.atool.org/ //这里啥工具都有….

　　http://f2er.club/ // 前端相关

　　还有太多太多…….

　　chrome插件下载

　　墙内用户请点击: http://www.crx4chrome.com/

　　来源：前端开发博客