您的位置:

Sublime Text 3使用教程

一、Sublime Text

Sublime Text是一款高级文本编辑器,可用于代码编辑、Markdown编辑等等。它有着简洁明了的界面,而且可以添加各种插件来扩展其功能。使用Sublime Text有许多快捷键和技巧。

二、Sublime使用

1、安装Sublime Text 3。

可以上官网下载Sublime Text 3进行安装,也可以利用Homebrew进行安装:

$ brew cask install sublime-text

2、了解Sublime Text的界面和布局。

Sublime Text的界面有着菜单栏、工具栏、编辑器区域及侧边栏,快捷键也分为全局快捷键和编辑器快捷键。

编辑器区域分为工作区和标签页,标签页可以通过Ctrl+Shift+T打开历史标签页,Ctrl+Tab切换标签页。

侧边栏可以浏览目录。

3、使用Sublime Text进行代码编辑。

对于代码编辑,可以使用快捷键Ctrl+Shift+N进行新建文档,Ctrl+O打开文件,Ctrl+S保存文件,Ctrl+Shift+S另存为。

对于复制黏贴,可以使用Ctrl+C和Ctrl+V进行,删除内容可以使用Backspace或Delete。

此外,Sublime Text还支持自动完成、代码折叠、跨文件搜索、多行选择等功能,可以极大地提高编码效率。

三、Sublime快速生成HTML5

Sublime Text还可以通过插件快速生成HTML5基本文件模板,这里介绍一种Sublime Text插件-Emmet。

1、安装Emmet。

打开Sublime Text的控制台(Ctrl+`),输入以下命令:

import urllib.request,os;pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

安装完成后,重启Sublime Text,按下Ctrl+Shift+P,输入install,选择Package Control: Install Package。

在列表中选择Emmet进行安装。

2、快速生成HTML5。

打开一个新的文件并输入HTML:5,按下Tab键,即可快速生成HTML5文件模板。

如果需要创建包含CSS和JS文件的HTML5文件,可以在head标签内使用link标签和script标签分别引入CSS和JS文件,并将对应文件存放在同一目录下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

四、其他Sublime Text插件

Sublime Text 3有着丰富的插件市场,常用的插件有:

1、ColorPicker,用于选择颜色并生成对应的CSS代码;

2、SideBar Enhancements,用于增强侧边栏的功能,增加文件、文件夹的复制、剪切等操作。

3、Git,用于在编辑器中使用Git进行版本控制。

4、BracketHighlighter,用于加强括号匹配。

5、AutoFileName,用于自动匹配文件名。