zoukankan      html  css  js  c++  java
  • sublime 前端开发工具

    http://code.kpman.cc/2014/10/14/sublime-text-3-mac-指南/

    gif 屏幕录制:http://recordit.co/ 或者 http://www.cockos.com/licecap/

    http://blog.wpjam.com/m/emmet-grammar/


    Sublime 前端开发工具

    天下武功唯快不破,在项目开发中善于总结经验,提高开发效率。也是一名优秀的工程狮的必备技能。对于编程来说,一款顺手的IDE至关重要。而对于前段工程狮来说 Sublime Text就是一款非常有趣的IDE。善于发现和利用其优势,可以用来打造自己的前端开发工作流。

    常用快捷键

    快捷键 含义
    Ctrl+O 快速开启整个文件夹
    Ctrl+W 关闭当前页面
    Ctrl+N 新建页面
    Ctrl+Shift+T 重新开启刚关闭的页面
    Ctrl+Shift+V 粘贴代码保持缩进
    Ctrl+F 查找
    Ctrl+H 替换
    Ctr+L 选择当前行
    Ctr+D 选中当前单词,继续敲可以选中多个
    Cmd+/ 注释掉/取消注释
    Ctrl+} 增加缩进
    Ctrl+Tab 切换页面
    Ctrl+K,Ctrl+B 显示隐藏sidebar
    Shift-Ctrl-enter 当前行之前开辟一行
    Ctrl+Shift+K 删除整行

    Shift+F11 (或者View --> Enter Distraction Free Mode)进入zen状态,单份文件变成全屏幕,且左边会自动缩排。 使用情境:当不需要切换页面时,如写blog。

    Goto Anything

    • Ctrl+P
      可以快速跳转到当前项目中的任意文件,可进行关键词匹配,支持模糊匹配.
    • Ctrl+P+"@"+function name
      此功能等同于Ctrl+R可以快速跳转到定义的function(css选择器).
    • Ctrl + Shift + F
      全文搜索,可以找出整个Project内的关键字.
    • Ctrl+P+:+行数
      此功能等同于Ctrl+G可以快速的跳到指定行数.

    多行游标

    产生多行游标的四种方法:
    第一种方法:Ctrl+D ,使用 Ctrl+D 选择词的过程中可以使用 Ctrl+K 跳过本次选中。
    第二种方法:Alt+F3 多选
    第三种方法:Ctrl+ACtrl+Shift+L
    第四种方法:使用 “shift+ 鼠标右键点击”可以产生多行游标.
    Ctrl+J 合并行,Ctrl+Shift+K删除行,Ctrl+Shift+D重复行

    Emmet

    emmet是一款编辑器插件,是由Zen Coding的原作者就进行开发。
    安装Emmet,使用sublime安装插件最便利的方式就是通过Package Control进行安装。如果还没装Package Control?不要紧,通过快捷键Ctrl+或者View>Show Console菜单打开控制台,输入以下Python执行代码:

    import urllib.request,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib.request.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
    

    安装完成后,通过Shift+Ctrl+P呼出面板,输入"pci"即可锁定"Package Control:Install Package",回车之后可以看到一个列表,继续输入"emmet"即可找到插件,再次回车等待片刻就安装完成。
    Emmet 的工作流程:打开 HTML 或 CSS 文件->按语法编写指令->摁下 TAB 键->生成!
    ex: #page>div.logo+ul#navigation>li*5>a{Item $}

    <div id="page">
        <div class="logo"></div>
        <ul id="navigation">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </div>
    

    Sublime还有其他不少优秀的插件

    • snippets以模板的方式编程
    • advanceNewfile
    • httpRequest
    • nettus fetch
    • sidebarenhancement
    • 使用lint进行语法及风格校验
  • 相关阅读:
    Effective Java 19 Use interfaces only to define types
    Effective Java 18 Prefer interfaces to abstract classes
    Effective Java 17 Design and document for inheritance or else prohibit it
    Effective Java 16 Favor composition over inheritance
    Effective Java 15 Minimize mutability
    Effective Java 14 In public classes, use accessor methods, not public fields
    Effective Java 13 Minimize the accessibility of classes and members
    Effective Java 12 Consider implementing Comparable
    sencha touch SortableList 的使用
    sencha touch dataview 中添加 button 等复杂布局并添加监听事件
  • 原文地址:https://www.cnblogs.com/code-charmer/p/4889730.html
Copyright © 2011-2022 走看看