Sublime Text工具高级使用教程

Sublime Text 基本概念

简介

Sublime Text是一款跨平台代码编辑器（Code Editor），从最初的Sublime Text 1.0，到现在的Sublime Text 3.0，Sublime Text从一个不知名的编辑器演变到现在几乎是各平台首选的GUI编辑器。

说明

Sublime Text 介绍：Sublime Text 是一个轻量、简洁、高效、跨平台的编辑器。
Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。
Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。
Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。
Sublime Text 的特色功能：
良好的扩展功能，官方称之为安装包(Package)。
右边没有滚动条，取而代之的是代码缩略图，这个功能非常赞
强大的快捷命令“可以实时搜索到相应的命令、选项、snippet 和 syntex， 按下回车就可以直接执行，减少了查找的麻烦。”
即时的文件切换。
随心所欲的跳转到任意文件的任意位置。
多重选择(Multi-Selection)功能允许在页面中同时存在多个光标。支持 VIM 模式支持宏，简单地说就是把操作录制下来或者自己编写命令，然后播放刚才录制的操作或者命令。更新非常勤快

优点：

主流前端开发编辑器体积较小，运行速度快文本功能强大支持编译功能且可在控制台看到输出内嵌python解释器支持插件开发以达到可扩展目的Package Control：ST支持的大量插件可通过其进行管理

新建文件时快速生成Html

安装如下插件：

• FileHeader：自动创建文件开头模板，并且会根据最后的保存时间修改更新时间。官网链接。
• CSS Format：css格式化。
• Emmet：它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它，是一个能大幅度提高前端开发效率的一个工具。这个软件的安装过程比较久。官网教程。

开始使用：

新建文件，输入html:5，按[Ctrl + E] 或者 Tab 键，

参考链接：Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】

常用操作

禁用自动完成

自动完成可以用auto_complete设置禁用。要禁用它，添加在偏好设置▸右窗格：

"auto_complete": false

如果禁用自动完成，则可以手动显示完成弹出窗口，或者可以使用制表符插入最高排名的完成，而不显示弹出窗口。

手动显示完成

如果它当前没有显示，按Ctrl +空格键将显示完成弹出窗口。 如果显示，它将选择下一个项目。

提交表

默认情况下，在完成弹出选定的项目将被提交时，按下回车。这可以创建承诺完成之间的歧义，和插入一个换行符。通过设置auto_complete_commit_on_tab设置为true，进入将插入一个换行符，tab将目前完成的。还有其他的好处，因为Sublime Text知道没有歧义，它会显示一个更精确的完成列表，以及一个你想要更多的可能是排在首位。。建议在标签上启用提交，但需要很短时间才能使用。

禁用Tab自动补全

有时“Tab自动补全”并不理想。 要关闭它，就将这行代码添加到首选项▸设置的右侧窗格中：

"tab_completion": false

插入文字标签

要插入标签，而不是一个结束，按Shift + Tab。

Sublime Text 3 无干扰模式

无干扰模式将全屏显示您的文件，只有文本显示在显示器的中心。所有UI Chrome都已隐藏，但可以访问。 无干扰模式可以通过查看(v)▸进入/退出无干扰模式项进入。当进入无干扰模式所有UI Chrome（侧边栏，小地图，状态栏等）都将被隐藏。您可以通过“查看（V）”菜单选择性地启用UI的某些部分 - 下次您进入无干扰模式时，系统会记住您的设置。自定义
当在无干扰模式时，某些设置将被应用。默认设置（located in Packages/Default/Distraction Free.sublime-settings）是：

{
    "line_numbers": false,
    "gutter": false,
    "draw_centered": true,
    "wrap_width": 80,
    "word_wrap": true,
    "scroll_past_end": true
}

您可以通过编辑Packages / User / Distraction Free.sublime设置来自定义这些设置，通过首选项▸设置 - 无干扰模式菜单项可以访问。这是值得注意的wrap_width设置，上面。 值为80导致包装发生在80个字符。 您可能希望将它设置为一个较高的值，或者换到窗口宽度，将其设置为0。

启用经典模式

经典模式是默认禁用的，通过ignored_packages设置。 如果从忽略包列表中删除“Vintage”，您可以使用vi键进行编辑：选择首选项▸设置菜单项
编辑ignored_packages设置，将其更改为：

"ignored_packages": ["Vintage"]

to:

"ignored_packages": []

现在保存文件。未启用经典模式 - 您会在状态栏中看到“INSERT MODE”默认在默认情况下开始插入模式。这可以通过将以下设置添加到您的用户设置来更改：

"vintage_start_in_command_mode": true

项目格式

.sublime-project文件是JSON，并支持三个顶级部分：文件夹，包括文件夹，设置，文件设置覆盖和build_systems，用于特定于项目的构建系统。 一个例子：

{ 
    "folders": 
    [ 
        { 
            "path": "src", 
            "folder_exclude_patterns": ["backup"], 
            "follow_symlinks": true 
         }, 
        { 
            "path": "docs", 
            "name": "Documentation", 
            "file_exclude_patterns": ["*.css"] 
         }
     ], 
   "settings": { "tab_size": 8 }, 
    "build_systems": 
    [ 
        { "name": "List", "shell_cmd": "ls -l" } 
    ]
}

常用插件

SublimeCodeIntel：JavaScript代码自动提示（不好用）

安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。

将

"codeintel_selected_catalogs": ["jQuery"]

改为：

"codeintel_selected_catalogs": ["JavaScript"]

保存后重启软件。

参考链接：#

javascript complet：JavaScript代码自动提示

• 官网链接

• GitHub链接

在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个SublimeAllAutocomp lete

JsFormat：JS代码格式化

快捷键是：选中JS代码，然后按ctrl+alt+f。

或者，先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “Format: Javascript” 就可以使用格式化命令

Sublime Server

我们如果右键在浏览器中打开html网页，其实是以文件路径的方式打开的，导致很多api无法操作。最好的办法是：将html在服务器上打开。

我们如果安装 Sublime Server，就可以让网页在本地的服务器上打开。

安装成功之后，使用步骤如下：

（1）选择菜单栏"Tools --> SublimeServer --> Start SublimeServer"启动服务器。

（2）在html文档里，右键选择 “View in SublimeServer”。

如果想关闭服务器，直接把Sublime Text 整个软件关掉就好。其他的关闭方式容易导致软件卡死。

All Autocomplete

Sublime Text 默认的 Autocomplete 功能只考虑当前的文件，而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。

##3 Alignment　　
代码对齐

AutoFileName

快速帮助你在文件中写路径整体来说还不错

Autoprefixer

这个插件主要应用css的浏览器兼容书写，自动分析你的css文件，解析出新的css文件，可以配置你要兼容的浏览器，不过这个插件要在之前安装nodejs

BracketHighlighter

配置文件的高亮设置，让你的代码有不同的颜色区分该插件提供配对标签，或大括号或字符引号的配对高亮显示，算是对系统高亮的加强吧。

BufferScroll

你可以轻松书写一个文件多个位置了

ChineseLocalization

各国语言包，小日本的都有哦

CSS Comments

该有的都有，不该有的也有了

CSS Format

css序列化插件，支持默认多种序列方案，还可以自己配置自己喜欢的

CSS3

css3语言提示插件，本来不想写的，也不是什么特别的，但是可能会有人用到

CTags

实在方法跳转，跳转到你方法
之后在win7下或者linux下安装ctags软件
打开ctags插件包的use-setting配置"command": "d:/IDE/ctags58/ctags.exe"这个路径是下载ctags的安装路径

这个插件能跨文件跳转，跳转到指定函数声明的地方(ctrl+alt+左键)。 使用package control 搜索ctags 进行安装（安装ctags插件就可以了， 还有一个 CTags for PHP 插件没什么用）,注意安装好插件后要需要安装ctags命令。 将ctags.exe文件放在一个环境变量能访问到的地方。打开cmd， 输入ctags，如果有这个命令，证明成功了。ubuntu下安装运行命令：sudo apt-get install exuberant-ctags 。然后在sublime项目文件夹右键， 会出 现Ctag:Rebuild Tags 的菜单。点击它，然后会生成.tags的文件 然后在你代码中， 光标放在某个函数上， 点击 就可以跳转到函数声明的地方。

DocBlockr

DocBlocker 是在Sublime平台上开发一款自动补全注释插件，支持JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.等众多语言

Emmet

Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度

HTML-CSS-JS Prettify

全能序列化JavaScript

Completions

js最基本的api快查片段

JsFormat

js序列化，能排在下载插件前25位，好的话就不用说了

Keymaps

快速查找所有插件的快捷键

LiveStyle

LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件。利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发，一次配置，简单易用！，并且最近支持less,scss　　你本地css文件可以和浏览器的css文件映射，同步到本地，但是必须在chrome上运行，chrome必须安装相应的插件

PackageResourceViewer

通过这个特殊的插件，会给你查看和编辑SublimeText附带的不同的包带来很多方便。您也可以提取任何给定的包。这一行动将其复制到用户文件夹，以便您可以安全地对其进行编辑。　　
很多人苦恼不能修改左侧导航面板字体大小，用这个可以轻松办到　　安装PackageResourceViewer 快捷键 ⌘(command)+⇧(shift)+P 打开 Command Palette 输入 Package Control:Install 回车，等待加载package列表 搜索并安装 PackageResourceViewer 包　　最后，使用PackageResourceViewer打开Theme文件进行编辑 快捷键 ⌘(command)+⇧(shift)+P 打开 Command Palette 输入 PackageResourceViewer: Open Resource 回车，打开包列表 选择 Theme - Default，再选择 Default.sublimt-theme 搜索 　　sidebar_label，在 “class”: “sidebar_label” 后边加一行：“font.size”: 18，将字体大小设置为18，保存。 好啦，大功告成！　　如果觉得行间距太小，可以往上找下，有个class:“sidebartree”，调一下里边的rowpadding配置即可。

Pretty JSONJSON

一個輕量級的資料交換語言，目前許多網站AJAX request的回應結果都是JSON格式

SublimeCodeIntel

一个全功能的 Sublime Text 代码自动完成引擎 ，本人做过对比，但是如果和webstorm的自动寻找还是稍逊一筹，不过对于大部分人来说够用了，能很方便跳到你想要的方法　　支持的语言挺多的（JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.）

SublimeLinter

代码校验插件，支持多种语言，这个是主插件，如果想检测特定的文件需要单独下载

SublimeLinter-jshint

这个就是单独的插件，上面的一个分支

SublimeTmpl

创建常用文件初始模板，必须html,css,js模板

Tag

HTML/XML标签缩进、补全和校验

Themr

sublime可以下载很多风格样式，用这个插件可以管理所有的风格

SideBarEnhancements

增强右键菜单文件操作功能

代码快速生成

（1）>符号的技巧：

输入ul>li*9，然后按tab键，生成的代码如下；（符号>是包含的关系）

        <div>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
        </div>
    </div>

sublime text 快捷键

Win快捷键	Mac快捷键	作用	备注
html:5+tab		html结构代码
tab		补全标签代码
tab	补全标签代码		比如，在html文件中输入div，然后 按住tab键后，会自动生成<div></div>。
Ctrl + Shift + D	Cmd + Shift + D	复制当前行到下一行
Ctrl+Shift+K		快速删除整行
Ctrl+鼠标左键单击		集体输入
Ctrl+H	Option+Cmd+F	查找替换
Ctrl+/		注释单行
Ctrl+Shift+/		注释多行
Ctrl+L		快速选中整行，继续操作则继续选择下一行，效果和 Shift + ↓ 效果一样
Ctrl+Shift+L		先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行	经常与上一个快捷键结合起来使用
Ctrl + Shift +【↑/↓	Ctrl + Cmd +↑/↓	移动当前行
F11		全屏
鼠标右键+Shift	鼠标左键+选项	添加选区