【VScode】VScode 浏览器预览HTML (windows+ubuntu+OS X平台)
2017-02-01 17:18
597 查看
最近开始学习javascript,工具选择了vscode,这里记录学习中遇到的问题和解决方案,备日后查看。
一、windows下使用vscode 配置浏览器预览html文件:
第一步:打开tasks.json文件
ctrl+shift+p 输入 tasks
下拉菜单显示出:Configure Tasks Runner 选中并回车
然后在出现的下拉菜单中选择 Others
就会出现tasks.json
第二步:修改文件
我用的是chrome浏览器,以此为例:
第三步:测试html
执行完以上两个步骤之后,在vscode中打开你要预览的html文件,使用快捷键
ctrl+shift+b 即可看到界面。
二、ubuntu下使用vscode 配置浏览器预览html文件
1、3 步骤同windows下,第二步修改json文件为:(也是以google chrome为例)
三Mac下使用vscode 浏览器预览html文件
快捷键command+⇧+P:输入tasks,选择Configure Default Build Task
然后选择open task.json file
一、windows下使用vscode 配置浏览器预览html文件:
第一步:打开tasks.json文件
ctrl+shift+p 输入 tasks
下拉菜单显示出:Configure Tasks Runner 选中并回车
然后在出现的下拉菜单中选择 Others
就会出现tasks.json
第二步:修改文件
我用的是chrome浏览器,以此为例:
{ See httpsgo.microsoft.comfwlinkLinkId=733558 for the documentation about the tasks.json format version 0.1.0, command chrome, windows { command CProgram Files (x86)GoogleChromeApplicationchrome.exe 你浏览器的exe路径 }, isShellCommand true, args [ ${file} ], showOutput always }
第三步:测试html
执行完以上两个步骤之后,在vscode中打开你要预览的html文件,使用快捷键
ctrl+shift+b 即可看到界面。
二、ubuntu下使用vscode 配置浏览器预览html文件
1、3 步骤同windows下,第二步修改json文件为:(也是以google chrome为例)
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "google-chrome", "isShellCommand": true, "args": ["${file}"], "showOutput": "never" }
三Mac下使用vscode 浏览器预览html文件
快捷键command+⇧+P:输入tasks,选择Configure Default Build Task
然后选择open task.json file
{ "version": "0.1.0", "command": "Chrome", "osx": { "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": [ "${file}" ] }
相关文章推荐
- Flutter beta 版尝鲜(在 Windows + Android Studio 与 MacOS + VS Code 的安装配置)
- [杂乱] go墙内安装以及vscode调试-windows平台
- ubuntu /elementary os下vscode 配置go开发环境
- 【vscode】vscode在windows与ubuntu下编译调试C/C++
- Mac OS X vs. Windows XP vs. Linux
- 操作系统桌面效果:Windows Vista VS Linux Ubuntu
- 操作系统桌面效果:Windows Vista VS Linux Ubuntu
- 操作系统桌面效果:Windows Vista VS Linux Ubuntu
- 操作系统桌面效果:Windows Vista VS Linux Ubuntu
- 操作系统桌面效果:Windows Vista VS Linux Ubuntu
- 四大浏览器Windows 7平台多项测试对比
- 操作系统桌面效果:Windows Vista VS Linux Ubuntu
- 操作系统桌面效果:Windows Vista VS Linux Ubuntu
- ActiveState Komodo IDE v5.2.1.34168 最新版for Linux/Mac OS/Windows 全5大平台
- Code::Blocks中安装boost (windows平台下)
- (原創) 如何讓<a target=_blank>開在新的索引標籤? (Web) (IE) (HTML) (OS) (Windows)
- 操作系统桌面效果:Windows Vista VS Linux Ubuntu
- 操作系统桌面效果:Windows Vista VS Linux Ubuntu
- 基于Windows平台的OS认证
- (1)windows平台-ubuntu虚拟机环境的建立(家庭版)