HTML5基础——Sublime Text 3包安装
一、微文概览
- 安装侧边栏Side Bar插件
- 安装View in Browser插件
二、详细介绍
-
安装侧边栏Side Bar包
当我们在使用Sublime Text编写HTML时,单独一个HTML文件还好,如果编辑的HTML文件过多,那么找起来会相当麻烦,这时你可能希望在左侧将这些HTML文件以列表的形式展示出来,如下图所示。
侧边栏效果.png
那么,下面我就开始介绍如何在Sublime Text 3上安装包。
第一个我们要安装的就是侧边栏Side Bar包。安装步骤如下:
1.1 打开Preferences-->Package Control
Package Control.png
1.2 进入Package Control,单击Install Package
安装包.png
1.3 当选择完毕后你会发现界面没什么变化,其实是有变化的,此时,你向窗口的左下方看,会有一个“=”左右滑动,它表明Sublime Text 3正在启动安装包程序。
等待启动安装包程序.png
1.4 等待一会儿后,应该会出现安装包的界面(有时会出现联网错误,重新在启动安装包即可),此时我们向输入框中SideBar后找到SideBarEnhancements,单击它之后,窗口的最下方又会看到“=”号来回滑动,表示包正在安装。
侧边栏SideBarEnhancements.png
1.5 当安装完毕后,如何验证包是否已安装呢?我们点击View会看到Side Bar,说明我们已经安装成功,接着点击Show Side Bar,这时我们就会看到侧边栏了,如本文第一幅图所示。
显示Side Bar.png
PS:如果我们在写代码时不想看到侧边栏,我们可以依次点击View-->Side Bar-->Hide Side Bar将其隐藏。
-
-
安装View in Browser包
我们编写HTML文件后,需要在硬盘上找到HTML文件的位置,有没有一种简单的方式,不用到硬盘上去找,直接在Sublime Text中启动浏览器?答案肯定是有的,那就是安装View in Browser包。下面我将给大家介绍如何安装View in Browser包及其使用方法。
2.1 正如安装侧边栏包一样,进入Package Control,然后点击Install Package安装包。在输入框中输入View,找到View in Browser包,单击安装。
搜索View in Browser包.png
2.2 安装完毕后,我们进入HTML文件,在窗口随意位置单击右键,会发现菜单栏中最下方多了一个View in Browser,说明此包安装成功,然后选择View in Browser。
View in Browser.png
2.3 当我们选择后发现没有反应,此时莫要惊慌,莫要害怕,不是我们安装出错了,而是在安装完毕后还需要对它进行配置。点击Preferences-->Package Settings-->View in Browser-->Settings - User,进入对View in Browser的设置。
设置View in Browser.png
2.4 将下述代码粘贴到设置文件中,注意"browser"后面就是我们要使用的浏览器,默认使用的浏览器是firefox,我这里使用的是chrome。
PS:这里要注意chrome的路径是否与你电脑上的路径一致,如果不一致则需要修改“chrome”后面的路径。
-
{
"posix": {
"linux": {
"firefox": "firefox -new-tab",
"chrome": "google-chrome",
"chrome64": "google-chrome",
"chromium": "chromium"
},
"linux2": {
"firefox": "firefox -new-tab",
"chrome": "google-chrome",
"chrome64": "google-chrome",
"chromium": "chromium"
},
"darwin": {
"firefox": "open -a \"/Applications/Firefox.app\"",
"safari": "open -a \"/Applications/Safari.app\"",
"chrome": "open -a \"/Applications/Google Chrome.app\"",
"chrome64": "open -a \"/Applications/Google Chrome.app\"",
"yandex": "open -a \"/Applications/Yandex.app\""
}
},
"nt": {
"win32": {
"firefox": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe -new-tab",
"iexplore": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
"chrome": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"chrome64": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"yandex": "%Local AppData%\\Yandex\\YandexBrowser\\browser.exe"
}
},
"browser": "chrome"
}
粘贴上述代码到设置文件.png
2.5 粘贴完毕后,按下ctrl + s对文件进行保存。这时我们再回到HTML文件中右键,选择View in Browser,则直接打开chrome浏览器执行我们的HTML文件了。
打开chrome浏览器运行HTML文件.png
以上就是我们现阶段需要用到的包,关于开发HTML5,还有其他的包使用,相信大家通过安装这两个包后积累了经验,以后再安装其它的包就按照上述安装方式进行安装即可。