Visual Studio Code里如何运行html (Windows 10 和 Mac OS)

news2024/11/15 21:35:20

在Web 开发时,作为Web 开发基本都是从编写 HTML 网页开始的。这篇文章讲的是如何起步配置开发环境来运行 HTML 代码。

在Windows和Mac 的 VS Code中都可以运行 HTML。

  1. 打开VS Code,在VS Code中安装,Code Runner, 如下所示

2、这是Code Runner安装简介中 运行和停止运行代码的方式

3、Windows 点击: File --> Preferences --> Settings

Mac 点击:Code --> Preferences --> Settings

4. 点击setting右侧的这个图标按钮,来打开一个json文件

5. 在这个settings.json文件中,增加一行code-runner.executorMap,

这里输入code,可以直接选择后面的功能,不用手输,然后回车

记得在上一行的最后输入逗号“,”

6. 在Code Runner里增加运行html的功能!(注意逗号!)

Windows用户:(区分浏览器,选择自己对应的浏览器)

Command [Chrome]: "html":"cd $dir && start chrome $dir && $fileName",

Command [Edge]: "html":"cd $dir && start msedge $dir && $fileName",

Command [Firefox]: "html":"cd $dir && start firefox $dir && $fileName",

如果上述命令行不能运行,则可以尝试以下对应的command:

Command [Chrome]: "html":"cd $dir && start chrome $fileName",

Command [Edge] : "html":"cd $dir && start msedge $fileName",

Command [Firefox] : "html":"cd $dir && start firefox $fileName",

Mac用户

"html":"cd $dir && open -a 'Google Chrome' $fileName",

7. 可以跑一个html测试以下,点击运行,会自动跳转到chrome浏览器 (如果你用的是chrome)

(ps. 这里body文字修改了,不过本质就是这样的)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/605542.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【群智能算法改进】一种改进的算术优化算法 改进算术优化算法 改进AOA[1]【Matlab代码#37】

文章目录 【获取资源请见文章第5节:资源获取】1. 基础算术优化算法2. 改进算术优化算法2.1 随机概率因子2.2 强制切换机制 3. 部分代码展示4. 仿真结果展示5. 资源获取 【获取资源请见文章第5节:资源获取】 1. 基础算术优化算法 算术优化算法是一类基于…

mount -l | grep bpf

BPF & Cillum mount -l | grep bpfBPF(Berkeley Packet Filter)文件系统netfilter和tcprofiling和tracingHTTP、gRPC和Kafka等协议VXLAN组网模式BGP(Border Gateway Protocol) mount -l | grep bpf 这是一个通过运行mount -l…

Linux 实操篇-Linux 磁盘分区、挂载

Linux 实操篇-Linux 磁盘分区、挂载 Linux 分区 原理介绍 Linux 来说无论有几个分区,分给哪一目录使用,它归根结底就只有一个根目录,一个独立且唯一的文件结构, Linux 中每个分区都是用来组成整个文件系统的一部分。Linux 采用了一种叫“载…

使用数据库连接池来快速访问数据库Druid

使用数据库连接池来快速访问数据库Druid 简介为什么使用连接池原理及使用连接池访问数据库的优势开源项目 alibaba/druid 地址 使用方法准备jar包定义Druid的配置文件 代码示例 简介 数据库连接池是一个容器,负责分配、管理数据库的连接(Connection)。通过连接池可…

[图表]pyecharts模块-反转柱状图

[图表]pyecharts模块-反转柱状图 先来看代码: from pyecharts import options as opts from pyecharts.charts import Bar from pyecharts.faker import Fakerc (Bar().add_xaxis(Faker.choose()).add_yaxis("商家A", Faker.values()).add_yaxis("…

图论与算法(2)图的基本表示

1. 图的分类 (1) 有向图和无向图: 有向图(Directed Graph):图中的边具有方向,表示节点之间的单向关系。无向图(Undirected Graph):图中的边没有方向&#x…

【Web开发技术】数据缓存中间件Redis(非关系型数据库)

文章目录 一、引言1、介绍2、五种常用数据类型 二、配置1、下载2、使用 三、使用1、命令行操作(1)字符串(2)哈希(3)列表(4)集合 set(5)有序集合 sorted set&a…

python基础练习题20道,快收藏起来检测自己吧 !

前言 嗨喽,大家好呀~这里是爱看美女的茜茜呐 实例001:数字组合 题目: 有四个数字:1、2、3、4,能组成多少个互不相同且无重复数字的三位数?各是多少? 答案跳转 实例002:“个税计…

路径规划算法:基于乌燕鸥优化的路径规划算法- 附代码

路径规划算法:基于乌燕鸥优化的路径规划算法- 附代码 文章目录 路径规划算法:基于乌燕鸥优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要:本文主要介绍利用智能优化算法…

Leetcode 剑指 Offer II 029. 排序的循环链表

题目难度: 中等 原题链接 今天继续更新 Leetcode 的剑指 Offer(专项突击版)系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 给定循环单调非递减列表中的一个点,写一个函数向这个…

基于QT的智能家居中控系统的简明设计

文章目录 系统总体说明主板UI设计后续改进与完善 系统总体说明 系统采用 “主从式架构” ,即一主多从式,该智能居家控制系统的主要功能包括登录功能、注册功能、音乐播放功能、时间显示、日历显示、温度湿度光照气压海拔数据等环境指标数据显示等。   …

【Linux】基于阻塞队列的生产消费模型

文章目录 生产者消费者模型基本概念生产者消费者模型优点生产者消费者模型的特点 基于阻塞队列的生产者消费者模型阻塞队列-BlockingQueue C模拟实现基于阻塞队列的生产消费模型BlockQueue.hpp基本框架构造析构判空&&判满从阻塞队列插入数据向阻塞队列获取数据 Cptest.…

用pandasai轻松上手Python数据分析

一、引言 最近,一位名叫Gabriele Venturi的软件工程师在github上建立了pandasai的项目。据官方介绍,pandasai是一个 Python 第三方库,将人工智能的生成能力集成到pandas包中,使数据分析具有对话性。实际上,该第三方包…

Vue表格Table精美模板分享

文章目录 🐒个人主页🏅Vue项目常用组件模板仓库📖前言:🎀源码如下: 🐒个人主页 🏅Vue项目常用组件模板仓库 📖前言: 本篇博客主要提供vue组件之表格组件模板…

16、MongonDB数据库的基本使用

1、MongonDB简介 问答什么是MongoDB一个以JSON为数据模型的文档非关系型数据库什么是非关系型数据库NoSQL,—种区分关系型数据库的数据存储方案,具有易扩展,大数据量,高性能,灵活数据模型,高可用等特点为什…

Vue面试题合集(原理深入,持续更新)

2023Vue面试题剖析原理 18.生命周期有哪些19.Vue中的diff算法原理diff概念diff比较流程 20.Vue中key的作用和原理key的概念key的作用 21.Vue.use作用和原理use概念插件的功能实现原理 22.Vue.extend方法的作用Vue.extend概念原理分析 23.Vue组件中data为什么必须是函数24.函数式…

SqlServer的基本使用

本文章主要是交给大家SqlServer的基本用法,因为SqlServer本身的运行机制问题,会让很多人觉得sql语句是不是写错了?这个代码有问题? 文章目录 选中数据库语法报错?执行部分代码存储过程、触发器只能创建一次sql书写建议…

如何在Linux c/c++ 进行多播(组播)编程

第一章: 前言 多播技术,也被称为“组播”,是一种网络通信机制,它允许一个节点(发送者)向一组特定的节点(接收者)发送信息。这种方式在网络编程中非常有用,因为它可以大大提高效率和…

Git、GitFlow协作 、Git commit规范、语义化版本

目录 一、概述 二、Git 2.1 安装与配置 2.2 基本指令操作 2.3 创建一个新的存储库 2.4 推送一个已有的文件夹 2.5 忽略临时文件 2.6 添加commit模板 2.7 冲突解决 二、GitFlow协作 三、Git Commit规范 四、语义化版本 为什么需要语义化版本号? 什么是…

线段树为什么可以开三倍空间

参考链接 四倍空间的原因如上图所示,但是实际操作时,我们可以直接开三倍空间也是可以的。 原因分析: 由于在分割区间时,我们计算mid使用下取整,所以左边区间大小大于等于右边区间大小,如果要实现上图中的树…