Sublime Text使用手册.doc

Sublime Text使用手册文档编号：GUIDE-201500001 密级：公开资料文件密级说明1. 绝密：一旦泄密会使公司利益遭受特别严重的损害；2. 机密：一旦泄密会使公司利益遭受严重的损害；3. 秘密：一旦泄密会使公司利益遭受较大的损害；4. 内部资料：一旦泄密会使公司利益遭受一般损害；5. 公开资料：公开有助于公司利益。版权(免责)声明本文档原始版权归（QQ群：JavaWeb基础群 437873646）所有，并保留一切权利。文件内容可供任何机构或个人修改使用。其仅提供阶段性信息，所含内容可能会随时更新，恕不另行通知。如因文档使用不当造成的直接或间接损失，（QQ群：JavaWeb基础群 437873646）不承担任何责任。文档信息版 本 号：2015.0.1版本日期：2015年4月5日制 作：Scott制作日期：2015年4月5日审 批：Simon审批日期：2015年4月5日审 核：审核日期：修订记录： 版本号修订日期NAMD修订人修订内容（N-新建，A-添加，M-修改，D-删除）目录1引言11.1编写目的11.2术语和缩写定义11.3参考文档12安装与初始化配置12.1安装Sublime Text12.2个人风格配置23系统增强33.1安装Package Control33.2安装Emmet插件33.3将Sublime Text加入系统右键菜单84项目工程94.1新建工程94.2保存工程94.3切换工程114.4版本控制115附录125.1常用操作快捷键125.2常用编程快捷键121 引言1.1 编写目的Sublime Text 是一个轻量、简洁、高效、跨平台的编辑器，方便的配色以及兼容vim快捷键等各种优点博得了很多前端开发人员的喜爱！本文为了程序员快速地熟悉Windows系统环境下，Sublime Text的安装与配置而编写，希望能有助于提高前端开发的工作效率。1.2 术语和缩写定义前端：HTML、CSS、Javascript、Jquery等网页编程相关的内容。1.3 参考文档l 编码神器之sublime（插件安装）：/liuhy/p/3168693.htmll Sublime Text 2/3安装使用及常用插件：/dudumao/p/4054086.htmll Sublime创建工程：/content/14/0416/13/13084517_369438723.shtml2 安装与初始化配置2.1 安装Sublime Text官方网站：/Sublime Text 2下载：/2Sublime Text 3下载：/3以下是SublimeText3下载的样例页面：2.2 个人风格配置选择“preferences”菜单，“setting user”命令，参考设置如下： /字体大小 font_size: 15.0, /字体类型 font_face: Consolas, / 设置每一行到顶部，以像素为单位的间距，效果相当于行距 line_padding_top: 2, / 设置每一行到底部，以像素为单位的间距，效果相当于行距 line_padding_bottom: 2, / html和xml下突出显示光标所在标签的两端，影响HTML、XML、CSS等 match_tags: true, / 是否显示代码折叠按钮 fold_buttons: true, / 代码提示 auto_complete: true, / 默认编码格式 default_encoding: UTF-8, / 左边边栏文件夹动画 tree_animation_enabled: true, /删除你想要忽略的插件 ignored_packages: Vintage 3 系统增强3.1 安装Package Control访问Package Control官网：https:/packagecontrol.io/，单击Installation。该页面里有介绍简单安装和手动安装两种方法。本文仅介绍简单的安装方法：使用 Ctrl+ 快捷键，如果安装了QQ输入法，将会发生快捷键冲突，则可通过View 菜单下的Show Console命令打开控制台（Console），粘贴官网提供的代码，按回车确认即可安装。Sublime Text 3的代码样例如下：【官网页面显示】3.2 安装Emmet插件1. 官方网址：http:/emmet.io/。2. 安装方法：安装了Package Control之后，使用快捷键“Ctrl + Shift + p”，在弹框中输入install，如图：选择Install Package，回车。加载完插件包仓库后，会弹出：在输入框中输入“Emmet”，回车就装上Emmet插件了。安装后就可以正常使用了。3. 使用Emmet：（1） 快速产生一个英文的HTML5头文件：空白文档中输入!，然后按Tab键。 Document （2） 快速产生一个中文的HTML5头文件：空白文档中输入!+doclang=zh-CN，然后按Tab键。注：更好的生成方法请参考本文中“配置Emmet自定义模版”相关内容。如图：可以生成如下代码： Document 全部的命令请查看插件包目录下的snippets.json文件，例如snippets.json中描述了生成带lang属性的html5文档的方法：获得snippets.json文档的方法如下。方法一：打开“Preferences - Browse Package”打开安装包所在目录后，向上一级，进入Installed Packages目录下，如图：将“Emmet.sublime-package”文件复制，改扩展名为zip，解压缩。如图：然后，进入“”文件夹即可看见snippets.json文件，用sublime可以打开查看其中的内容。方法二：Github地址：/sergeche/emmet-sublime/blob/master/emmet/snippets.json（3） Emmet命令：输入divulli*10然后按tab键，能显示如下代码说明Emmet可以正常使用。更多类似“divulli*10”的Emmet命令请查看官方文档或研究透snippets.json文件：http:/docs.emmet.io/abbreviations/syntax/ 其他快速上手参考：Emmet快捷方式查询/；Emmet最全提示说明/articles/IRvaiy（4） Emmet特殊的操作快捷键（参考自官方文档：/sergeche/emmet-sublime#readme）按键效果Tab 或 Ctrl+E 直接生成代码Ctrl+Alt+Enter打开命令编辑栏，输入命令直接在编辑器在中生成代码Ctrl+ 数值增大1Ctrl+ 数值减小1Alt+数值增大0.1Alt+数值减小0.1Shift+Alt+数值增大10Shift+Alt+数值减小10（5） 配置Emmet自定义模版：打开菜单“Preferences - Package Settings - Emmet-Settings-User”，里面填写的内容参考“Preferences - Package Settings - Emmet-Settings-Default”或参考官方的snippets.json文件例：定义一个bootstrap模版（模版参考：/getting-started/）。snippets: / 自定义BootStrap模版html: abbreviations: bsdoc:html(headmetacharset=utf-8+metahttp-equiv=X-UA-Compatible content=IE=edge+metaname=viewport content=width=device-width, initial-scale=1+title$1:标题)+body,bscss:,bstheme:,bsjq:,bsjs:,bs: !+bsdoc(div.container+bscss+bstheme+bsjq+bsjs)以上配置输入bs后按Tab键，自动生成代码的效果如下：3.3 将Sublime Text加入系统右键菜单1. 打开注册表，“开始”菜单，选择“运行”命令，输入“regedit”；2. 找到节点“ HKEY_CLASSSES_ROOT * Shell”下面，单击右键，新建“项”，命名为 Edit with Sublime；3. “新建字符串值”命名为Icon，值为 “Sublime text 所在路径,0，图中就是C:Program FilesSublime Text 3sublime_text.exe,0。4. 在Edith with Sublime文件夹下面新建项command ，在“默认”字符串值中输入“C:Program FilesSublime Text 3sublime_text.exe %1”。4 项目工程4.1 新建工程Sublime Text 可以把指定的一个或多个文件夹当作工程的工作空间。首先，展开Site Bar：选择“View”菜单，在“Site Bar”子菜单中选择“Show Side Bar”。其次，创建工程：选择“Project”菜单，单击“Add Folder to Project”命令，这时Side Bar中就会显示相应目录下的目录树。如果还需添加其他文件夹，重复创建工程操作即可。4.2 保存工程选择“Project”菜单，单击“Save Project As”命令。保存后，Sublime Text将自动生成两个文件：1. project_name.sumlime-project：包含工程定义文件，该文件会被记录到目录树里。2. project_name.sublime-workspace：包含用户的工程数据，例如打开的文件和修改等，该文件不会被记录到目录树里。 在*.sublime-project中，你可以定义工程配置。详情请参考Sublime Text官网提供的文档：/en/latest/file_management/file_management.html#projects简要的配置说明：1. path：指定左侧文件所在的目录路径。默认是“.”，意为显示“Add Folder to Project”的文件夹下的整个目录树。2. name：为Side Bar指定一个在目录树中的名字。如图：1. file_exclude_patterns：指定排除的文件。例如：配置隐藏bootstrap开头的和jquery开头的文件。2. folder_exclude_patterns：指定排除的目录。4.3 切换工程同时有几个工程要开发，点击“Project”菜单，“Open Project”命令，找到*.sublime-project文件，打开即可。如果直接使用Sublime Text编辑*.sublime-project文件，会自动载入工程。4.4 版本控制Sublime可以很简单地安装TortoiseSVN插件和Git插件进行工程项目的版本控制。到Package Control官网去查看相应的安装和使用方法：https:/packagecontrol.io/packages/TortoiseSVNhttps:/packagecontrol.io/packages/TortoiseGIT注意：安装版本控制插件前必须先安装相应的软件和配置好环境才能正常使用。 5 附录5.1 常用操作快捷键按键效果Ctrl+Shift+P调出Package ControlCtrl+加号（+）增大字体Ctrl+ -减小字体5.2 常用编程快捷键按键效果Ctrl+L 选择整行（按住-继续选择下行）Ctrl+KK从光标处删除至行尾Ctrl+K Backspace从光标处删除至行首Ctrl+Shift+K删除整行Ctrl+Shift+D 复制光标所在整行，插入在该行之前Ctrl+J合并行（已选择需要合并的多行时）Ctrl+KU 改为大写Ctrl+D 双击后选中第一个词，之后按Ctrl+D下个相同的字符串， （连续多次按可以继续选择），选择后输入字符可以实现批量修改。Ctrl+M光标移动至一