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