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代码自动提示

在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+tabhtml结构代码
tab补全标签代码
tab补全标签代码比如,在html文件中输入div,然后 按住tab键后,会自动生成<div></div>
Ctrl + Shift + DCmd + Shift + D复制当前行到下一行
Ctrl+Shift+K快速删除整行
Ctrl+鼠标左键单击集体输入
Ctrl+HOption+Cmd+F查找替换
Ctrl+/注释单行
Ctrl+Shift+/注释多行
Ctrl+L快速选中整行,继续操作则继续选择下一行,效果和 Shift + ↓ 效果一样
Ctrl+Shift+L先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行经常与上一个快捷键结合起来使用
Ctrl + Shift +【↑/↓Ctrl + Cmd +↑/↓移动当前行
F11全屏
鼠标右键+Shift鼠标左键+选项添加选区
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天涯学馆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值