Sublime Text使用手册范本Word文档格式.docx

Sublime Text使用手册范本Word文档格式.docx

《Sublime Text使用手册范本Word文档格式.docx》由会员分享，可在线阅读，更多相关《Sublime Text使用手册范本Word文档格式.docx（15页珍藏版）》请在冰豆网上搜索。

Simon

审批日期：

审核：

审核日期：

修订记录：

版本号

修订日期

NAMD

修订人

修订容

（N-新建，A-添加，M-修改，D-删除）

1引言

1.1编写目的

SublimeText是一个轻量、简洁、高效、跨平台的编辑器，方便的配色以及兼容vim快捷键等各种优点博得了很多前端开发人员的喜爱！

本文为了程序员快速地熟悉Windows系统环境下，SublimeText的安装与配置而编写，希望能有助于提高前端开发的工作效率。

1.2术语和缩写定义

前端：

HTML、CSS、Javascript、Jquery等网页编程相关的容。

1.3参考文档

●《编码神器之sublime（插件安装）》：

.cnblogs./liuhy/p/3168693.html

●《SublimeText2/3安装使用及常用插件》：

.cnblogs./dudumao/p/4054086.html

●《Sublime创建工程》：

.360doc./content/14/0416/13/13084517_369438723.shtml

2安装与初始化配置

2.1安装SublimeText

官方：

.sublimetext./

SublimeText2下载：

.sublimetext./2

SublimeText3下载：

.sublimetext./3

以下是SublimeText3下载的样例页面：

2.2个人风格配置

选择“preferences”菜单，“settinguser”命令，参考设置如下：

{

//字体大小

"

font_size"

:

15.0,

//字体类型

font_face"

Consolas"

//设置每一行到顶部，以像素为单位的间距，效果相当于行距

line_padding_top"

2,

//设置每一行到底部，以像素为单位的间距，效果相当于行距

line_padding_bottom"

//html和xml下突出显示光标所在标签的两端，影响HTML、XML、CSS等

match_tags"

true,

//是否显示代码折叠按钮

fold_buttons"

true,

//代码提示

auto_complete"

//默认编码格式

default_encoding"

UTF-8"

//左边边栏文件夹动画

tree_animation_enabled"

//删除你想要忽略的插件

ignored_packages"

[

Vintage"

]

}

3系统增强

3.1安装PackageControl

访问PackageControl官网：

https:

//packagecontrol.io/，单击Installation。

该页面里有介绍简单安装和手动安装两种方法。

本文仅介绍简单的安装方法：

使用Ctrl+`快捷键，如果安装了QQ输入法，将会发生快捷键冲突，则可通过View菜单下的ShowConsole命令打开控制台（Console），粘贴官网提供的代码，按回车确认即可安装。

SublimeText3的代码样例如下：

【官网页面显示】

3.2安装Emmet插件

1.官方网址：

emmet.io/。

2.安装方法：

安装了PackageControl之后，使用快捷键“Ctrl+Shift+p”，在弹框中输入install，如图：

选择InstallPackage，回车。

加载完插件包仓库后，会弹出：

在输入框中输入“Emmet”，回车就装上Emmet插件了。

安装后就可以正常使用了。

3.使用Emmet：

（1）快速产生一个英文的HTML5头文件：

空白文档中输入!

，然后按Tab键。

<

!

DOCTYPEhtml>

htmllang="

en"

>

head>

<

metacharset="

title>

Document<

/title>

/head>

body>

/body>

/html>

（2）快速产生一个中文的HTML5头文件：

+doc[lang=zh-CN]，然后按Tab键。

注：

更好的生成方法请参考本文中“配置Emmet自定义模版”相关容。

如图：

可以生成如下代码：

zh-CN"

全部的命令请查看插件包目录下的snippets.json文件，例如snippets.json中描述了生成带lang属性的html5文档的方法：

获得snippets.json文档的方法如下。

方法一：

打开“Preferences-BrowsePackage”

打开安装包所在目录后，向上一级，进入InstalledPackages目录下，如图：

将“Emmet.sublime-package”文件复制，改扩展名为zip，解压缩。

然后，进入“”文件夹即可看见snippets.json文件，用sublime可以打开查看其中的容。

方法二：

Github地址：

//github./sergeche/emmet-sublime/blob/master/emmet/snippets.json

（3）Emmet命令：

输入div>

ul>

li*10然后按tab键，能显示如下代码说明Emmet可以正常使用。

更多类似“div>

li*10”的Emmet命令请查看官方文档或研究透snippets.json文件：

docs.emmet.io/abbreviations/syntax/

其他快速上手参考：

①《Emmet快捷方式查询》emmet.evget./；

②《Emmet最全提示说明》.tuicool./articles/IRvaiy

（4）Emmet特殊的操作快捷键

（参考自官方文档：

//github./sergeche/emmet-sublime#readme）

按键

效果

Tab或Ctrl+E

直接生成代码

Ctrl+Alt+Enter

打开命令编辑栏，输入命令直接在编辑器在中生成代码

Ctrl+↑

数值增大1

Ctrl+↓

数值减小1

Alt+↑

数值增大0.1

Alt+↓

数值减小0.1

Shift+Alt+↑

数值增大10

Shift+Alt+↓

数值减小10

（5）配置Emmet自定义模版：

打开菜单“Preferences-PackageSettings-Emmet-Settings-User”，里面填写的容参考“Preferences-PackageSettings-Emmet-Settings-Default”或参考官方的snippets.json文件

例：

定义一个bootstrap模版（模版参考：

v3.bootcss./getting-started/）。

snippets"

{

//自定义BootStrap模版

"

html"

"

abbreviations"

"

bsdoc"

"

html>

（head>

meta[charset=\"

utf-8\"

]+meta[http-equiv=\"

X-UA-Compatible\"

content=\"

IE=edge\"

]+meta[name=\"

viewport\"

width=device-width,initial-scale=1\"

]+title{${1:

标题}}）+body"

bscss"

linkrel=\"

stylesheet\"

href=\"

cdn.bootcss./bootstrap/3.3.4/css/bootstrap.min.css\"

bstheme"

cdn.bootcss./bootstrap/3.3.4/css/bootstrap-theme.min.css\"

bsjq"

scriptsrc=\"

cdn.bootcss./jquery/1.11.2/jquery.min.js\"

/script>

bsjs"

cdn.bootcss./bootstrap/3.3.4/js/bootstrap.min.js\"

bs"

+bsdoc（div.container+bscss+bstheme+bsjq+bsjs）"

}

}

}

以上配置输入bs后按Tab键，自动生成代码的效果如下：

3.3将SublimeText加入系统右键菜单

1.打开注册表，“开始”菜单，选择“运行”命令，输入“regedit”；

2.找到节点“HKEY_CLASSSES_ROOT→*→Shell”下面，单击右键，新建“项”，命名为EditwithSublime；

3.“新建字符串值”命名为Icon，值为“Sublimetext所在路径,0″，图中就是C:

\ProgramFiles\SublimeText3\sublime_text.exe,0。

4.在EdithwithSublime文件夹下面新建项command，在“默认”字符串值中输入“C:

\ProgramFiles\SublimeText3\sublime_text.exe%1”。

4项目工程

4.1新建工程

SublimeText可以把指定的一个或多个文件夹当作工程的工作空间。

首先，展开SiteBar：

选择“View”菜单，在“SiteBar”子菜单中选择“ShowSideBar”。

其次，创建工程：

选择“Project”菜单，单击“AddFoldertoProject”命令，这时SideBar中就会显示相应目录下的目录树。

如果还需添加其他文件夹，重复创建工程操作即可。

4.2保存工程

选择“Project”菜单，单击“SaveProjectAs”命令。

保存后，SublimeText将自动生成两个文件：

1.project_name.sumlime-project：

包含工程定义文件，该文件会被记录到目录树里。

2.project_name.sublime-workspace：

包含用户的工程数据，例如打开的文件和修改等，该文件不会被记录到目录树里。

在*.sublime-project中，你可以定义工程配置。

详情请参考SublimeText官网提供的文档：

docs.sublimetext.info/en/latest/file_management/file_management.html#projects

简要的配置说明：

1.path：

指定左侧文件所在的目录路径。

默认是“.”，意为显示“AddFoldertoProject”的文件夹下的整个目录树。

2.name：

为SideBar指定一个在目录树中的名字。

1.file_exclude_patterns：

指定排除的文件。

例如：

配置隐藏bootstrap开头的和jquery开头的文件。

2.folder_exclude_patterns：

指定排除的目录。

4.3切换工程

同时有几个工程要开发，点击“Project”菜单，“OpenProject”命令，找到*.sublime-project文件，打开即可。

如果直接使用SublimeText编辑*.sublime-project文件，会自动载入工程。

4.4版本控制

Sublime可以很简单地安装TortoiseSVN插件和Git插件进行工程项目的版本控制。

到PackageControl官网去查看相应的安装和使用方法：

//packagecontrol.io/packages/TortoiseSVN

//packagecontrol.io/packages/TortoiseGIT

注意：

安装版本控制插件前必须先安装相应的软件和配置好环境才能正常使用。

5附录

5.1常用操作快捷键

Ctrl+Shift+P

调出PackageControl

Ctrl+加号（+）

增大字体

Ctrl+-

减小字体

5.2常用编程快捷键

Ctrl+L

选择整行（按住-继续选择下行）

Ctrl+KK

从光标处删除至行尾

Ctrl+KBackspace

从光标处删除至行首

Ctrl+Shift+K

删除整行

Ctrl+Shift+D

复制光标所在整行，插入在该行之前

Ctrl+J

合并行（已选择需要合并的多行时）

Ctrl+KU

改为大写

Ctrl+D

双击后选中第一个词，之后按Ctrl+D下个相同的字符串，（连续多次按可以继续选择），选择后输入字符可以实现批量修改。

Ctrl+M

光标移动至一对括号或花括号开始或结束的位置

Ctrl+Shift+M

选择括号的容（继续按选择父括号）

Ctrl+/

注释整行（如已选择容，同“Ctrl+Shift+/”效果）

Ctrl+Shift+/

注释已选择容

Ctrl+Shift+A

HTML中选择光标位置父标签对儿

Ctrl+Shift+[

折叠代码

Ctrl+Shift+]

展开代码

Ctrl+Shift+↑

与上行互换

Ctrl+Shift+↓

与下行互换

Alt+.

闭合当前HTML标签

更多容请参考SublimeText官网文档：

docs.sublimetext.info/en/latest/index.html