在sublime text中搭建完美可交互的网页前端编写环境

自从frontpage和dream waver等网络三剑客离我们远去了，似乎要建立一个轻量级的网页前端编辑和实时预览的环境变的不那么方便，这里，我们尝试用sublime text来实现它。如果可以在sublime text中搭建完美可交互的网页前端编写环境，使用sublime text编写网页其实还是感觉不错的！

一、插件安装与设置

1、插件安装

我们在菜单prefrences下找到package control，选择install package，在弹出的输入框中输入view in browser，回车即可完成安装。这里不再赘述。
补充一句，如果你想要编写css时能够如同vscode一样有颜色预览，那就顺便安装一下colorhelper这个插件。

2 、默认浏览器设置（Settings User）

安装好了插件，如果我们在setting-default中的设置刚好和你的机器匹配，那你就可以直接使用右键菜单中的View in Broser来进行预览了。但如果不匹配，那我们就必须进行下面的设置。

这里，我们需要对我们使用的浏览器进行设置，否则插件找不到对应的浏览器就不会响应你的预览指令。

首先，我们要打开settings-default,找到你们的默认设置，并复制到剪贴板中，然后打开setting-user中，如果我们的settings-user中没有内容，那系统就会按照settings-default中的设置运行。所以这一步必须操作，我的电脑上是有微软的edge，所以我进行了这样的设置：

{
	"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",
			"edge": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe" ,
			"chrome": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
			"chrome64": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
			
		}
	},
 
	"browser": "edge"
}

到此为止，你至少可以正常的通过菜单中的view in Browser来预览你的html文件了。

3、快捷键设置（Key bindings）

这个设置只关系到我们使用过程中的快捷键问题，比如我们习惯用F5来设置keys,如果我们希望每次保存都有能进行一次预览，那么你就可以完全按照我的设置来，不用修改。

[{
    "keys": ["ctrl+s"],
    "command": "view_in_browser",
    "args":{
        "browser":"edge"
    }
},{
    "keys": ["f4"],
    "command": "view_in_browser",
    "args":{
        "browser":"firefox"
    }
}]

完成上面的设置，你就可以通过快捷键来预览你的网页了。下面这部分是要给使用node.js搭建网站的童鞋的。

二、建立可预览的交互网站

1、安装node.js和express

这部分内容在我其他的博客中已经多次介绍，大家可以参考这里《nodejs上通过express搭建一个轻量小巧服务器》

2、编写一个可以解析html文件的js

以下代码主要是建立一个监听服务。如果只做前端的童鞋可以不必了解。

//webdemo.js 文件
var express = require('express');
var app = express();
const path=require('path');
app.use(express.static(path.join(__dirname,'public')))
var server = app.listen(3000, ()=> {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("webdemo listening at port:3000,you can http://%s:%s", "0.0.0.0",host, port)
 
})

3、浏览指定网页

在express的工程里面，比如你建立的一个工程为js_project的工程，上面的webdemo.js就在其根目录下，然后我们的html放在哪里呢？必须要放在子目录public下面。如此，我们输入http://localhost:3000/index.html时，就可以直接访问了。

4、快捷键预览

我们前面安装view in Browser时是设置了快捷键对吧，但那个只是预览了html文件，那是不能进行网络的js程序与服务器交互的功能预览的。说白了，那是一个死的html，要想交互那么就必须启动指定的网址，如前面说道的http://localhost:3000/index.html。
我们可以在修改好html代码后每次都跑到这个网址去刷新一下，但这肯定不是我们想要的，我们将第一部分中提到的Settings User中的有关浏览器的那一句修改成如下即可：

"edge": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe http://localhost:3000/index.html",

完成上面的设置，你成功在sublime text中搭建完美可交互的网页前端编写环境了，你就可以做到适时修改实时预览啦。