高效率的前端开发工具集

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

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中的终端打开工具

设计相关

chrome插件

系统工具(mac os app)

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部分)

设计相关

chrome插件 (见mac部分)

其他工具(Windows)

  • GifCam // 非常非常好用的gif录制软件 链接: http://pan.baidu.com/s/1eRjcODG 密码: qfkf
  • fiddler // 代理抓包工具
  • weinre // 移动端调试工具
  • …其他欢迎补充

其他

查阅类型(网站)

chrome插件下载

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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流