欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何在Sublime Text3 中打开浏览器预览效果

程序员文章站 2022-05-30 17:27:08
...

由于最近在学习网页制作,目前还只是在起步的HTML阶段。

昨晚用记事本写了写HTML代码,深感不爽,今早便在知乎上寻找了一款受欢迎的编辑器——Sublime Text3

话不多说,下课后吃完饭立马打开电脑开始安装Sublime Text3,刚进去的页面便让英语不好的我感受到了一丝凉意,还有复制进去昨晚写的代码为啥全是一色显示,也没有想象中的语法高亮显示啊。还有这个到底怎么才能运行。。。。。

下面便开始逐一解决问题。

关于基本的安装和插件,这里推荐这篇文章,适合小白的细心教程。

Sublime Text 3安装及常用插件安装

关于汉化,也是比较简单的,戳这里!

那么,大家关心的语法高亮怎么实现呢?

在Sublime Text3的右下角有个选择的小按钮,需要选择语言才行。。没找到的戳这里!

最后就到了唯一有些难度的运行问题了,我们肯定是希望能够直接在编辑器中按一个键然后就在网页中预览到当前效果。

然后去百度了一下,需要自己设置快捷键。

没有经过汉化的是这样的

如何在Sublime Text3 中打开浏览器预览效果

而我的经过了汉化的是这样的

如何在Sublime Text3 中打开浏览器预览效果

其实都差不多,然后点进去是这个页面,左面是默认的一些快捷键,可以了解一下。右面空空的地方就是可以自己定义的了。

如何在Sublime Text3 中打开浏览器预览效果

我这里设置了三种浏览器打开,分别为默认,IE和chorme

如何在Sublime Text3 中打开浏览器预览效果

"keys": ["f2"] :

keys:表示快捷键,即 F2 可以启动chorme浏览器进行预览。

"application": "C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe"

application:表示浏览器所在的安装路径,上面的这个路径是我电脑上的浏览器路径。

如果直接从属性中复制路径,注意斜杠!!!注意斜杠!!!注意斜杠!!!

这里出现了一个尴尬的问题,设置完了按快捷键却好像没啥反应,哪里错了嘛

找了半天,原来是需要安装一个插件:SideBarEnhancements

方法:ctrl+shift+P 选 Package Control: Install Package 找 SideBarEnhancements 安装即可。

然后推荐一些个好看的主题:点这里!

最后附上我的设置

[    
	{ "keys": ["f3"], "command": "open_in_browser" },
//ie
    {
        "keys": ["f1"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files (x86)\\Internet Explorer\\iexplore.exe",
            "extensions": ".*"
        }
    },
//chorme
     {
        "keys": ["f2"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
            "extensions": ".*"
        }
    }]