sublime text 3 教程(2)

这一节主要来安装一些sublime text 3的插件。

一、常用插件安装

1、ConvertToUTF8 插件安装

a)功能说明:ConvertToUTF8 能将除UTF8编码之外的其他编码文件在 Sublime Text 中转换成UTF8编码,在打开文件的时候一开始会显示乱码,然后一刹那就自动显示出正常的字体,当然,在保存文件之后原文件的编码格式不会改变。

b)安装方法一:快捷键 <font color=”#f00”>Ctrl+Shift+p ,打开 “Command Palette” 悬浮对话框,在顶部输入 “install”, 然后下选点击 “Package Control:Install Package”。

sublime text 3 教程(2)_第1张图片

在出现的悬浮对话框中输入 “convert”, 然后点选下面的 “ConvertToUTF8” 插件,就会自动开始安装,请耐心等待。

sublime text 3 教程(2)_第2张图片

当插件安装成功后,Sublime Text 3 编辑器底端的状态栏会有安装成功的提示。

c)安装方法二:你还可以下载完整的插件包后解压,放入 D:\sublime Text3\Data\Packages目录下,以达到安装插件的目的。下载地址:https://github.com/seanliang/ConvertToUTF8。

如何找到 Packages 目录?一个快捷的方法是:双击打开你的 “Sublime Text 3”,点菜单 “Preferences—>Browse Packages…”。

它会直接打开插件包存放的目录 “Packages”。然后你就可以把下载后解压好的插件包复制到这个 Packages 目录下。

当然,如果你熟悉 git,你还可以用 git 从插件的 GitHub 库直接克隆插件包到 Packages 目录下。

sublime text 3 教程(2)_第3张图片

注意:

以后所有插件都可以通过以上介绍的两种方法安装,将不再赘述,推荐方法一,使用“ Package Control”安装插件。

2、BracketHighlighter 插件

功能说明:高亮显示匹配的括号、引号和标签。

插件地址:https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

sublime text 3 教程(2)_第4张图片

3、Emmet 插件

功能说明:Emmet的前身是大名鼎鼎的Zen codin。前端开发必备,HTML、CSS代码快速编写神器。

使用方法:默认快捷键 TabCtrl + e

插件地址:https://github.com/sergeche/emmet-sublime

辅助工具:PyV8 下载地址: https://github.com/emmetio/pyv8-binaries

注意:Emmet 插件需要 PyV8 插件的支持,所以在安装 Emmet 时,会自动安装 PyV8 插件,如果安装后 Emmet 不能正常保用,因为D:\sublime Text3\Data\Packages没有emmet相关内容,手动下载emmet插件解压放入D:\sublime Text3\Data\Packages文件夹。下载地址在上面。

sublime text 3 教程(2)_第5张图片

使用方法示例:书写代码 ul#nav>li.item$*8>a{Item $}

sublime text 3 教程(2)_第6张图片

然后把光标定在这行代码的最后面,按 Tab 键,就会自动生成:

sublime text 3 教程(2)_第7张图片

关于Emmet的更多介绍,请查看官方文档,还有这份速查表帮你快速记忆简写形式

4、JsFormat 插件

功能说明:JavaScript代码格式化。

使用方法:在打开的JavaScript文件里点右键,选择JsFormat或者使用默认快捷键(Ctrl+Alt+F)。

插件地址:https://github.com/jdc0589/jsformat

sublime text 3 教程(2)_第8张图片

5、Compact Expand CSS Command 插件

功能说明:使CSS属性展开及收缩,格式化CSS代码。

使用方法:按 Ctrl+Alt+[ 收缩CSS代码为一行显示,按 Ctrl+Alt+] 展开CSS代码为多行显示。

插件地址:https://gist.github.com/vitaLee/2863474 或者:https://github.com/TooBug/CompactExpandCss

快捷键 Ctrl+Alt+[ 收缩CSS代码为效果:

sublime text 3 教程(2)_第9张图片

6、SublimeTmpl 插件

功能说明:快速生成文件模板。

使用方法:SublimeTmpl默认的快捷键如下,如果快捷键设置冲突可能无效。

   Ctrl+Alt+h              新建 html 文件

   Ctrl+Alt+j              新建 javascript 文件

   Ctrl+Alt+c              新建 css 文件

   Ctrl+Alt+p              新建 php 文件

   Ctrl+Alt+r              新建 ruby 文件

   Ctrl+Alt+Shift+p        新建 python 文件

插件地址:https://github.com/kairyou/SublimeTmpl

下图为按快捷键 Ctrl+Alt+h 新建的一个 html 文件。

sublime text 3 教程(2)_第10张图片

相应的模板为tmpl格式的文件,它们保存在D:\sublime Text3\Data\Packages\SublimeTmpl\templates下。

sublime text 3 教程(2)_第11张图片

当然你可以根据自己的喜好来更改模板格式。例如把“html.tmpl”改为早期的html标准格式后保存。

新增语言:你还可以增加模板文件夹中没有的文件模板,并做相应的设置来使用这一功能。具体可以参考它的中文文档:http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/

7、Alignment 插件

功能说明:使代码格式的自动对齐。

使用方法:快捷键Ctrl+Alt+A,可能与QQ截图冲突,二者中的一个要重置快捷键。

插件地址:https://github.com/kevinsperrine/sublime_alignment

sublime text 3 教程(2)_第12张图片

8、AutoFileName 插件

功能说明:自动补全文件(目录)名。

插件地址:https://github.com/BoundInCode/AutoFileName

sublime text 3 教程(2)_第13张图片

9、DocBlockr 插件

功能说明:快速生成JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust语言函数注释。

使用方法:在函数上面输入/**,然后按Tab 就会自动生成注释。

插件地址:https://github.com/spadgos/sublime-jsdocs

sublime text 3 教程(2)_第14张图片

10、HTML-CSS-JS Prettify 插件

功能说明:HTML、CSS、JS格式化。

插件地址:https://github.com/victorporof/Sublime-HTMLPrettify

安装方法:安装这个插件前必须先安裝node.js,指定 node.exe 的执行档所在位置。进而安装HTML-CSS-JS Prettify。

使用方法一:View -> Show console 或者使用快捷键(Ctrl + `),在命令列的地方輸入:view.run_command(“htmlprettify”),然后按下Enter。

使用方法二:默认快捷键:Ctrl+Shift+H

你也可以自行设置快捷键,菜单 “Preferences—> Key Bindings – User” 里新增:

{
    "keys": ["ctrl+shift+o"], 
    "command": "htmlprettify" 
}

完成后保存,以上代码设定执行此插件的快捷键是:Ctrl+Shfit+O,自己设定的话就要测试一下,不要跟其他快捷键冲突。

格式化前:

sublime text 3 教程(2)_第15张图片

格式化后:

sublime text 3 教程(2)_第16张图片

11、SideBarEnhancements 插件

功能说明:侧栏菜单扩充功能。

插件地址:https://github.com/titoBouzout/SideBarEnhancements/tree/st3

sublime text 3 教程(2)_第17张图片

12、JavaScript Completions插件

功能说明:提示 js Api,更快地编写脚本,提示和完成。

插件地址:https://github.com/pichillilorenzo/JavaScript-Completions

二、插件列表

快捷键 Ctrl+Shift+P,在对话框中输入“list”,选择“Package Control:List Packages”。

sublime text 3 教程(2)_第18张图片

会列出所有已安装的插件。这样可以很方便地了解自己已经安装了哪些插件。

三、移除插件

有时候我们需要移除自己不想要的插件,具体操作如下:快捷键 Ctrl+Shift+P,在对话框中输入“remove”,选择“Package Control: Remove Packages”。

sublime text 3 教程(2)_第19张图片

然后在出现的插件列表中点选你要移除的插件。

四、Sublime Text 的窗口操作

1、分屏

Sublime Text有多种分屏形式,让我来具体地看一看。菜单 “View-Layout”就可以选择你的分屏样式。

sublime text 3 教程(2)_第20张图片

对应的快捷键与分屏情况如下:

   Alt+Shift+1       Single             独屏

   Alt+Shift+2       Columns:2          纵向二栏分屏

   Alt+Shift+3       Columns:3          纵向三栏分屏

   Alt+Shift+4       Columns:4          纵向四栏分屏

   Alt+Shift+8       Rows:2             横向二栏分屏

   Alt+Shift+9       Rows:3             横向三栏分屏

   Alt+Shift+5       Grid               四格式分屏

2、创建新窗

快捷键Ctrl+Shift+N 创建一个新窗口。

sublime text 3 教程(2)_第21张图片

你可能感兴趣的:(sublime,text,sublime-text-3)