高效率的前端开发工具集

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

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字符串

设置快捷键

1. reindent //设置快捷键自动缩进文档
   preferences -> 按键绑定-用户 -> 填入JSON [{ “keys”: [“ctrl+i”], “command”: “reindent” }] -> 全选之后按ctrl+i 排版妥妥的
2. 配置Trimmer的删除行末/空行快捷键

用户自定义设置

• “word_separators”: “./\()\”‘:,.;<>~!@#$%^&*|+=[]{}`~?” // 其实就是去掉了横杠 “-“ 方便选择 a-b 这样的结构 , 当然你们可以按需增删里面的符号
• “spell_check”:true // 检查拼写(我相信你们肯定踩过拼写错误找了很久都没找出来的坑….)

其他技巧

1. 多文件查找
   按Command + Shift + F在Find框中输入待查找的代码。可按Command + E快速使用选择中的代码段。
   在Where框中指定需要查找的文件范围，或填写< open files >表示查找目前打开的文件。
   在Replace框中输入要替换成的代码，按Replace按钮批量替换
2. 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”} }

3. 保存常用代码片段

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/