前端开发工具

TOC
  1. 1. Fe-Dev-In-Mac os
    1. 1.1. sublime text
      1. 1.1.1. 必备快捷键
      2. 1.1.2. 命令模式
      3. 1.1.3. 必备插件
      4. 1.1.4. 推荐插件
      5. 1.1.5. 设置快捷键
      6. 1.1.6. 用户自定义设置
      7. 1.1.7. 其他技巧
    2. 1.2. node相关
    3. 1.3. 终端相关
    4. 1.4. 设计相关
    5. 1.5. chrome插件
    6. 1.6. 系统工具(mac os app)
  2. 2. Fe-Dev-In-Windows
    1. 2.1. sublime text (只给出了快捷键, 其余部分参考mac部分描述)
      1. 2.1.1. 必备快捷键
    2. 2.2. node相关 (见mac部分)
    3. 2.3. 设计相关
    4. 2.4. chrome插件 (见mac部分)
    5. 2.5. 其他工具(Windows)
  3. 3. 其他
    1. 3.1. 查阅类型(网站)
  4. 4. chrome插件下载

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/

访客评论