sublime text2使用经验

标签：, 18416View

组内的一个关于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 Text 2使用过程的经验和总结

    安装并使用sublime Text2 安装并开始使用Sublime Text2一段时间了，至少用起来比dreamweaver好用多了。下面写一些我遇到的问题和解决方案，也许能帮到一些朋友。 第一：试用了这么久，最早是安装package co ...

  • sublime text2/3安装autoprefixer插件及配置

    Autoprefixer是一个智能的CSS3自动补全插件。Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里，使用Can I Use的数据来决定哪些前缀是需要的。本文主要介绍如何将它安装在sublimeText2/3上。

  • 前端开发必备编辑器：Sublime Text2,前端最好用的编辑器

    Sublime Text2有这么几个优点：1.速度飞快。2.界面简洁。3.功能强大。4.插件众多。5.快捷键多。6.可以不保存关闭下次再开编辑。7.界面好看，可定制。推荐前端开发工程师使用Sublime text2编辑器。

  • sublime text2打开文件为dump格式

    这个问题困惑了我很久，因为之前也出现过，感到很奇怪，怀疑是不是自己的代码写得不规范，所以打开才会出现这种情况，今天又出现了。我决定把这个困惑消灭掉。 查了一些资料，发现是GBK Encoding Support这个插件引起，有时候会出现，有 ...

关注我

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

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

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