淘先锋技术网

首页 1 2 3 4 5 6 7

高效率的前端开发工具集

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

Fe-Dev-In-Mac os

sublime text

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

必备快捷键

命令模式

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

必备插件

  • Package Control
  • Emmet
  • HTMLAttributes
  • Emmet Css Snippets
  • Jquery
  • Sass/Scss/Sass Snippets // 都装上…
  • Alignment
  • ConvertToUTF8 //支持gbk
  • 等等….

推荐插件

设置快捷键

  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)

其他

查阅类型(网站)

chrome插件下载

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