sublime text2使用经验

文章目录

组内的一个关于sublime text2的使用教程,全面高级的快捷键,详细完整的教程。值得看看

写在最前面

教程

入门教程: http://lucifr.com/2011/08/31/sublime-text-2-tricks-and-tips/

入门视频: http://v.youku.com/vshow/idXMzU5NzQ5ODgw.html

使用插件前,请先安装Package Control 方法

  1. 打开 Sublime Text 2,按下 Control +` 调出 Console
  2. 将以下代码粘贴进命令行中并回车:
    import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
    
  3. 安装成功后,重启sublime
  4. ctrl + shift + p 调出Package Control 面板,输入 'Package Control' 则可以查看相关命令。

配置 - 快捷方式、设置全局提示等

  • ctrl + shift + p, 输入 'setting - user',然后enter 调出文件 Preferences.sublime-settings,然后加入以下内容:
    "auto_complete_selector": "source,text",                    //开发html 代码片段全局提示
    "word_wrap": true                                           //自动折行
    
  • 加入常用快捷方式,打开Preference > Key binding - user:
    { "keys": ["ctrl+shift+r"], "command": "reindent" }         //代码缩进(系统自带)
    

目录

sublimeText
|-- installation
|   `-- Sublime Text 2 汉化包.zip
`-- packages
    |-- AutoFileName
    |-- AndyJS2
    |-- ConvertToUTF8
    |-- BracketHighlighter
    |-- DocBlockr
    |-- Emmet
    |-- Emmet Css Snippets
    |-- HTMLHTMLAttributes
    |-- PyV8
    `-- View in bowser
  • installation 目录为sublime 安装相关的一些包。Sublime Text 2 汉化包.zip的安装,压缩后详见 “使用说明.txt”。
  • packages 目录为sublime 常用的插件包,直接粘贴内容到C:\Users\{你的用户名}\AppData\Roaming\Sublime Text 2\Packages目录则可以正常使用。

插件包使用说明

ConvertToUTF8 -- 让sublime支持GBK

配置

  • 设置新建文档的编码为GBK,打开Preference > packages setting > ConvertToUTF8 > Setting user:
    {
        "default_encoding_on_create" : "GBK"
    }
    
  • 设置UTF-8的快捷方式,打开Preference > Key binding - user:
    { "keys": ["ctrl+shift+u"], "command": "convert_to_utf8", "args": {"encoding": "UTF-8", "stamp": "0" } }
    

说明

  • 用 快捷键 ctrl+shift+c 转换'GBK'编码;
  • 或者菜单选择 “文件 -- set File encoding to” 选择想转换的编码
  • 转换成功后,状态栏左下角有个GBK的字符。

Emmet -- 原名zencoding,快速生成html标签结构

详细使用教程

http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

配置

清除CSS属性与属性值之间的空格,如position:relative,打开Preference > packages setting > Emmet > Setting user:

{
    "preferences": {
        "css.valueSeparator": ":"
    }
}

举例

  • ctrl+alt+enter 输入
    ul.ulTxt>li.li$*4>a>img[width=100 height="75" src="http://dummyimage.com/100x75/f1f1f1/999"]
    
  • 输出
    <ul class="ulTxt">
        <li class="li1"><a href=""><img src="http://dummyimage.com/100x75/f1f1f1/999" alt="" width="100" height="75" /></a></li>
        <li class="li2"><a href=""><img src="http://dummyimage.com/100x75/f1f1f1/999" alt="" width="100" height="75" /></a></li>
        <li class="li3"><a href=""><img src="http://dummyimage.com/100x75/f1f1f1/999" alt="" width="100" height="75" /></a></li>
        <li class="li4"><a href=""><img src="http://dummyimage.com/100x75/f1f1f1/999" alt="" width="100" height="75" /></a></li>
    </ul>
    

演示

emmet_html


PyV8 -- Emmet 依赖包

目录

    PyV8
    |--win32        //32位系统
    `--win64        //64位系统

特别说明


Emmet Css Snippets -- CSS 代码片段

说明

  • <style></style>标签或者.css后缀的文件中,属于相关代码即可以调出自动补全提示。

演示

emmet


AndyJS2-master -- Javascript 代码片段

说明

  • <script></script>标签或者.js后缀的文件中,属于相关代码即可以调出自动补全提示。

DocBlockr -- 写文档说明好帮手

使用

  • 在java,javascript,php等文件中,输入/** 然后按 tab键即可以输出结构:
    /** 
    *           //继续输入enter 会新增一行 
    */
    

BracketHighlighter -- 选中标签高亮

说明

  • 选中标签,标签的起始和结束标签都会高亮。

HTMLAttributes -- html属性补全功能

说明

  • 在html标签输入相关代码即可以调出自动补全提示。

演示

HTMLAttribute


AutoFileName -- 自动补全文件(目录)名

说明

  • src,href补全文件(目录)名,类似于DW的补全功能。

CSS Format -- CSS格式化

触发条件

  1. ctrl+shift+p 调出控制面板,输入fortmat就可以调出 CSS Format的相关命令
  2. 选中要格式化的css,然后右键调出菜单,选择CSS Format > 下的命令
  3. 设置快捷键:
    {"keys": ["ctrl+alt+["], "command": "css_format", "args": {"action": "expand"} }, 
    {"keys": ["ctrl+alt+]"], "command": "css_format", "args": {"action": "compact-ns"} }, 
    {"keys": ["ctrl+alt+\\"], "command": "css_format", "args": {"action": "compress"} } 
    

演示


View in bowser -- 在浏览器中查看文件

官网链接

https://github.com/adampresley/sublime-view-in-browser#configure-to-view-on-local-server

配置

1.配置firefox(如果你用的默认浏览器是非firefox,请直达第2步设置)

  • 文件夹中打开 "View In Browser.sublime-settings" 文件, 修改firefox 程序所在路径
    {
        "supportedBrowsers": {
            "firefox": [
                {
                    "osname": "posix",
                    "platform": ".*",
                    "command": "firefox"
                },
                {
                    "osname": "nt",
                    "platform": "win32",
                    "command": "D:/program files/Mozilla Firefox/firefox.exe" //修改此处,注意路径为 "/"
                }
            ],
    ...
    

2.配置快捷方式

  • 菜单选择 Preferences -- 键绑定-用户
  • 加入以下设置:(快捷方式可以视个人情况而定)
    { "keys": ["ctrl+shift+b"], "command": "view_in_browser"}
    
  • 配置成功后, ctrl+shift+b 或者 f12 在浏览器中查看文件

3.配置用服务器地址新开窗口

  • 菜单选择 “项目 -- 添加文件夹到项目”,此处一般添加的路径为 apache配置的 htdocs 路径(可以参考 apache 配置文件)
  • 菜单选择 “项目 -- 项目另存为”
  • 菜单选择 “项目 -- 编辑项目”,会出现如下代码:
    {
        "folders":
        [
            {
                "path": "/E/wamp"                       // 每个人的项目路径都不一样,这里也会不一样
            }
        ]
    }
    
  • 修改为如下代码:
    {
        "folders":
        [
            {
                "path": "/E/wamp"
            }
        ],
        "settings":
        {
            "sublime-view-in-browser":
            {
                "basePath": "E:\\wamp",                 //apache配置的 **htdocs** 路径, \\为转义
                "baseUrl": "http://192.168.50.104"      //本机ip地址
            }
        }
    }
    
  • 配置成功后, ctrl+shift+b 在浏览器中查看文件,即可以以服务器的方式打开连接。

extend --自定义的一些扩展(cms + css + html +...)

题外话

目录

extend
|-- cms
|   `-- cms
|-- css
|   |-- common  
|   |-- foot
|   |-- layout
|   `-- module
|-- html
|   |-- common
|   |-- layout
|   `-- module
|       |-- box
|       |-- focus
|       |-- pic
|       |-- pic-txt
|       |-- slide
|       |-- tab
|       |-- template
|       `-- text 
`-- javascript

快捷键

常用快捷键

选择类

  • Ctrl+D:选中光标所占的文本,继续操作则会选中下一个相同的文本(重要特性选中上一个空格、符号、tab与下一个空格、符号、tab之间的内容)。
  • Alt+F3:选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。
  • Ctrl+L:选中整行,继续操作则继续选择下一行,效果和Shift+↓,效果一样。
  • Ctrl+Shift+L:先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行。
  • Ctrl+Shift+M:选择括号内的内容(继续选择父括号)。举个栗子:快速选中删除函数中的代码,重写函数体代码或重写括号内里的内容。
  • Ctrl+M:光标移动至括号内结束或开始的位置。
  • Ctrl+Enter:在下一行插入新行。举个栗子:即使光标不在行尾,也能快速向下插入一行。
  • Ctrl+Shift+Enter:在上一行插入新行。举个栗子:即使光标不在行首,也能快速向上插入一行。
  • Ctrl+Shift+[:选中代码,按下快捷键,折叠代码。
  • Ctrl+Shift+]:选中代码,按下快捷键,展开代码。
  • Ctrl+K+0:展开所有折叠代码。
  • Ctrl+←:向左单位性地移动光标,快速移动光标。
  • Ctrl+→:向右单位性地移动光标,快速移动光标。
  • shift+↑:向上选中多行。
  • shift+↓:向下选中多行。
  • Shift+←:向左选中文本。
  • Shift+→:向右选中文本。
  • Ctrl+Shift+←:向左单位性地选中文本。
  • Ctrl+Shift+→:向右单位性地选中文本。
  • Ctrl+Shift+↑:将光标所在行和上一行代码互换(将光标所在行插入到上一行之前)。
  • Ctrl+Shift+↓:将光标所在行和下一行代码互换(将光标所在行插入到下一行之后)。
  • Ctrl+Alt+↑:向上添加多行光标,可同时编辑多行。
  • Ctrl+Alt+↓:向下添加多行光标,可同时编辑多行。

编辑类

  • Ctrl+J:合并选中的多行代码为一行。举个栗子:将多行格式的CSS
  • 属性合并为一行。
  • Ctrl+Shift+D:复制光标所在整行,插入到下一行。
  • Tab:向右缩进。
  • Shift+Tab:向左缩进。
  • Ctrl+K+K:从光标处开始删除代码至行尾。
  • Ctrl+Shift+K:删除整行。
  • Ctrl+/:注释单行。
  • Ctrl+Shift+/:注释多行。
  • Ctrl+K+U:转换大写。
  • Ctrl+K+L:转换小写。
  • Ctrl+Z:撤销。
  • Ctrl+Y:恢复撤销。
  • Ctrl+U:软撤销,感觉和Gtrl+Z一样。
  • Ctrl+T:左右字母互换。
  • F6:单词检测拼写
  • Ctrl+F2:设置/删除标记 (F2跳转标记的位置,方便编辑多个位置)

搜索类

  • Ctrl+F:打开底部搜索框,查找关键字。
  • Ctrl+shift+F:在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,略高端,未研究。
  • Ctrl+P:打开搜索框。举个栗子:1、输入当前项目中的文件名,快速搜索文件,2、输入@和关键字,查找文件中函数名,3、输入:和数字,跳转到文件中该行代码,4、输入#和关键字,查找变量名。
  • Ctrl+G:打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位。
  • Ctrl+R:打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数。
  • Ctrl+:打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。
  • Ctrl+Shift+P:打开命令框。场景栗子:打开命名框,输入关键字,调用sublime:text或插件的功能,例如使用package安装插件。
  • Esc:退出光标多行选择,退出搜索框,命令框等。

显示类

  • Ctrl+Tab:按文件浏览过的顺序,切换当前窗口的标签页。
  • Ctrl+PageDown:向左切换当前窗口的标签页。
  • Ctrl+PageUp:向右切换当前窗口的标签页。
  • Alt+Shift+1窗口分屏,恢复默认1屏(非小键盘的数字)
  • Alt+Shift+2:左右分屏-2列
  • Alt+Shift+3:左右分屏-3列
  • Alt+Shift+4:左右分屏-4列
  • Alt+Shift+5:等分4屏
  • Alt+Shift+8:垂直分屏-2屏
  • Alt+Shift+9:垂直分屏-3屏
  • Ctrl+K+B:开启/关闭侧边栏。
  • F11:全屏模式
  • Shift+F11:免打扰模式

高级快捷键

  • Ctrl+Shift+G:选中区域增加父级标签
  • Ctrl+Shift+r:sublime自带代码缩进(需要配置,配置方式在正文配置 - 快捷方式、设置全局提示等处)
  • Ctrl+Alt+Enter:进入emmet的可是化模式
  • Ctrl+Shift+A:选择当前标签前后,修改标签用的,重复可选择父级的内容
  • Ctrl+Shift+V:粘贴并格式化

Snippet - 代码片段

说明

  • snippet可以帮助我们省下很多功夫,免除很多重复劳动。本文中的extend扩展包就是由一些snippet组成的。
  • snippet的后缀名为:.sublime-snippet

使用

创建

  • 打开 tools > New snippets 演示
    <snippet>
        <content><![CDATA[
            Hello, ${1:this} is a ${2:snippet}.
        ]]></content>
        <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
        <!-- <tabTrigger>hello</tabTrigger> -->
        <!-- Optional: Set a scope to limit where the snippet will trigger -->
        <!-- <scope>source.python</scope> -->
    </snippet>
    
  • <snippet> </snippet> 为根节点
  • <content> </content> 为输出的内容
  • <tabTrigger> </tabTrigger> 为触发条件
  • <scope> </scope> 为作用域,以下为常用作用域:
    语言                  作用域
    HTML                text.html
    CSS                 source.css
    JAVASCRIPT          source.js
    JAVA                source.java
    XML                 text.xml
    Ruby on Rails       source.ruby.rails
    PHP                 source.php
    Objective-C         source.objc
    Markdown            text.html.markdown
    JSP                 text.html.jsp
    ActionScript        source.actionscript.2
    ActionScript 3      source.actionscript.3
    
  • 新建的snippet,文件保存路径为:/%安装目录%/\Data\Packages\User。注意:snippet文件存放位置可以改变

触发

  • 在相应的作用域中,输入<tabTrigger> </tabTrigger>的内容(如果开启了代码全局提示"auto_complete_selector": "source,text",在输入过程中会有相关提示,强烈建议开启),然后按tab即可调出<content> </content>的内容了。

css自动补全去掉空格

浏览插件目录,找到CSS目录,打开css_completions.py

修改190行

1
l.append((p, p + ": ")) 改为 l.append((p, p + ":"))

我用的是sublime text 2 2.0.2

如果是使用emmet自动完成,则要修改设置

{
"preferences": {
"css.valueSeparator": ":"
// "css.propertyEnd": ";"
}
}

原创文章:sublime text2使用经验 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/sublime-text2-toturial.html)
评论已关闭。