大前端应用开发与架构设计-Sublime Text基本使用
大前端应用开发与架构设计
如果因为某些原因你不喜欢Visual Studio Code，那么可以使用Sublime Text作为前端开发的编辑器。
Sublime Text介绍
Sublime是一个文本编辑器，可以用来编辑HTML,CSS,JavaScript,PHP应用，具有跨平台(Windows,Ubuntu,Mac),体积小，速度快，扩展性强(支持大量插件)的特点，同时也是一款收费软件。
Sublime Text 下载和安装
官方网站:https://www.sublimetext.com/ ，根据自己的系统版本下载对应的Sublime Text。
安装注意事项
- 安装路径必须不能出现中文
- 必须安装在本地磁盘(C:\Program Files\Sublime Text 3)
Sublime Text 基本使用
使用Sublime Text实现HTML版Hello World
- 首先在本地磁盘创建一个目录(例如D:/web)
- 启动Sublime Text后使用快捷键Ctrl+N创建文件,保存到D:/web/index.html,即文件名为index.html，然后使用!+TAB键(前提是得安装Emmet插件)快速创建HTML5模板,并修改网页的标题和添加网页的主体内容，完整的代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是网页的标题</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
如果想在浏览器中查看运行效果，只需要使用右键菜单Open in Broswer打开即可，运行效果如下图所示:
- 使用Project->AddFolder to Project 管理项目,这样项目就可以在Sublime的左边栏管理了,如右图所示。
Sublime Text 插件安装和卸载
Package Control安装
Sublime Text可以通过Package Control插件包管理器组件来管理插件(浏览、安装、卸载)，首先使用快捷键Ctrl+Shift+p调出命令命令面板，然后输入Install Package Control回车即可安装,如下图所示。
当安装成功后会出现如下消息提示
如果想退出命令面板，按esc键即可。
或者通过ctrl+~调出Sublime Text的控制台，然后输入如下内容并回车即可安装Package Control,该内容来源https://packagecontrol.io/installation#st3
import urllib.request,os,hashlib; h = ‘6f4c264a24d933ce70df5dedcf1dcaee‘ + ‘ebe013ee18cced0ef93d5f746d80ef60‘; pf = ‘Package Control.sublime-package‘; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/‘ + pf.replace(‘ ‘, ‘%20‘)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install‘ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb‘ ).write(by)
如果控制台输出如下内容即表示安装成功
使用Pacakge Control安装插件
首先使用Ctrl+Shift+p调出命令面板，然后输入Package Control:Install Pacakge（支持模糊查询）,此时Sublime Text会列出所有可以安装的插件
，然后在搜索栏中输入你想要安装的插件名称后双击即可安装。这里以ConvertToUTF-8插件为例子
当插件安装成功之后，Sublime Text会生成以下消息
Emmet插件的使用
Emmet插件用于快速编写HTML和CSS代码。
首先使用Ctrl+Shift+p调出命令面板，然后输入Package Control:Install Package
列出插件列表，然后输入Emmet,双击后安装。
如下应用案例展示了Emmet的基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emmet插件的使用</title>
</head>
<body>
<!--
Emmet常用语法:后代
当元素之间存在上下级关系时，可以使用”>“运算符 快速创建嵌套关系的元素
-->
<!--输入div>ul>li*3后按住TAB键会有如下效果 -->
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--
Emmet常用语法:同代
当元素之间存在同级关系时，可以使用+快速创建元素
-->
<!--
当输入 div+ul>li*3+p 后按TAB会有如下效果
-->
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
<p></p>
</ul>
<!--
Emmet常用语法:分组
当元素内存在多组元素时(例如div中包含了header和footer元素),可以使用()表示
-->
<!--当输入div>(header>ul>li)+(fotter>ul>li*2) 会有以下效果 -->
<div>
<header>
<ul>
<li></li>
</ul>
</header>
<fotter>
<ul>
<li></li>
<li></li>
</ul>
</fotter>
</div>
</body>
</html>
更完整的案例可以参考官网提供的Emmet文档
使用Package Control卸载插件
首先使用Control+Shift+p调出命令面板，然后输入Package Control:Remove Package,此时会列出已经安装的列表，然后在搜索框中输入想要删除的插件双击即可删除。
Sublime Text 插件推荐
| 插件名称 | 插件功能 |
|---|---|
| IMESupport | 输入法跟随光标显示 |
| SublimeCodeIntel | 代码智能提示插件 |
| ColorPicker | 颜色拾取器 |
| DocBlockr | 增强js注释 |
| AutoFileName | 文件路径自动提示 |
| Git | 分布式版本管理 |
原文地址：https://www.cnblogs.com/ittimeline/p/9270923.html