visual-studio-code - 有没有办法查看网页的预览？

Question

我想知道是否有一种方法可以直接从 Visual Studio Code 编辑器在 Web 浏览器中查看我们正在处理的网页的预览，而不必单击文件使其默认打开网页浏览器。

Answer 1

您可以通过使用节点模块 gulp-open 配置 gulp 任务，在浏览器窗口中打开您的 Visual Studio Code 项目。然后您可以从 Visual Studio Code 中运行 gulp 任务。

以下是配置 gulp 任务的方法:

var open = require('gulp-open');
gulp.task('browser', function(){
  // Define the source to match the file you wish to open:
  gulp.src('./www/index.html')
    // Designate the browser you wish the file opened in:
    .pipe(open('<%file.path%>', {app: 'google-chrome'}));
  });
});

因为我们已经将我们的任务命名为“浏览器”，所以我们可以从 Visual Studio Code 中点击命令/控件 P 来调出命令面板并键入任务。然后开始输入浏览器。您应该在键入时看到完整任务的完整代码。点击返回，它将在您指定的浏览器中打开您的文件。打开浏览器后，您可以调整它和 Visual Studio Code 的大小，使它们并排放置。然后，在您工作时，您可以刷新浏览器以查看您的更改。

您可以查阅 gulp-open 的文档 on NPM .