(网页开发/前端)配置VsCode,让您拥有更舒适的开发环境

news2025/1/24 11:36:25

    vscode,微软旗下的一款强大的IDE集成开发环境,现在,越来越多的网页开发人员选择使用vscode来敲代码。

    但是,在不添加任何扩展的vscode中,想要享受“丝滑”的开发体验是比较困难的。所以,接下来,我将向您分享如何利用open in browser和Live Preview以及一些小小的分栏技巧,使您在编写html/css/javascripe代码时,拥有更舒适的体验。

    配置完成后效果如下:

目录

安装扩展:open in browser

安装扩展:Live Preview

利用向下分栏,同时编辑html和css/javascripe代码


安装扩展:open in browser

这款扩展能使您在vscode中也能打开网页,只需轻敲快捷键alt+B,就能让您的html代码在浏览器中打开。

在扩展商店中搜索open in browser,即可找到该扩展,点击安装即可。

安装扩展:Live Preview

这款扩展能创建预览窗口,让您在修改或添加html/css代码时,在预览窗口中实时观察到代码的运行结果。

安装之后,在vscode中打开任意html文件,可以在右上角看到“show preview"的按钮

点击后即可打开预览窗口,对当前代码进行效果预览

 利用向下分栏,同时编辑html和css/javascripe代码

 我们在html的编写窗口中可以在右上角找到向右拆分编辑器的按钮

点击后会创建一个新的窗口,让我们可以同时编辑两份代码。但这并不是我们想要的,因为新的窗口让代码编辑界面变得细长,不方便观察。于是我们可以选择向下分栏,方法是:按住alt键,此时向右拆分编辑器的按钮就变成了向下拆分编辑器

 向下拆分出的编辑器,可以打开css或者js代码,这样一来,我们的开发环境就舒适了不少,最终我们得到了如下效果:

您可以在左上窗口编写html代码,并在右侧窗口实时浏览您的进度。也可以在左下窗口编写css代码,并在右侧窗口看到代码的效果。

舒适的开发环境,让人有工作的动力,让人有愉悦的体验。无论您是懵懂的新人,还是老练的高手,我都建议您善用扩展来改善您的编程体验。此博客面向刚开始使用vscode来开发前端的朋友,操作简单,希望对您有帮助。

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

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

相关文章

js从地址栏获取参数

一、过程分四步: 1.获取地址栏; var loclocation.href; 2.获取地址栏的长度 var n1loc.length; 3.获取地址栏中第一个等号的位置; var n2loc.indexOf(); 4.以等号位置,截取后面的内容; var strloc.slice(n2…

Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。 其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)。 语法 Object.entries(obj) 参数 obj:可以返回其可枚举属性…

VS2022(Visual Studio)发布ASP.NET Core Web API应用到Web服务器(IIS)

概述 写完代码后,最常用、简单的发布方式,就是将应用发布到文件夹,然后将publish文件夹复制到要部署的机器上(本地、局域网服务器、云服务器等)。 但是在实际工作中,可能会遇到需要频繁地发布&#xff0c…

vue--后台管理系统问题和功能实现思路集锦

目录 一、动态菜单 1、问题:点击菜单,其他菜单都会打开,且选中某个菜单,其他菜单都会选中 2、问题:home页面代码内动态菜单数据获取的位置 二、动态路由 1、问题:刷新home页面后,页面报错&…

微信小程序开发(遇到的报错和注释)

一开始验证文章出错了,一直运行不起来,取消设置,可以正常调用。 页面小程序窗口组件部分:navigationbar导航栏区域,background背景区域(默认不可见,下拉才显示)、页面的主题区域&am…

教你一文解决 js 数字精度丢失问题

文章目录一、关于为什么要解决精度丢失二、怎么解决js的计算精度丢失问题?三、toPrecision 特定方法返回四舍五入长度字符串结语一、关于为什么要解决精度丢失 可以看下例子,因为js失去精度问题也是常见的问题,正常我们可以四舍五入或者 toF…

vue3中使用ant-design-vue的layout组件实现动态导航栏功能(1~2级)

目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果 0 前言 最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少&…

新星微前端MicroApp的基础教程

目录 什么是微前端? 使用场景 microApp介绍 概念图 micorApp的优势 microApp项目的应用 基座 基座路由 子应用 react项目中路由位置进行使用 跨域的问题 react项目中跨域 vue项目中跨域 micorApp基础介绍 micorApp传值(重要) …

Vue 2项目如何升级到Vue 3?

应不应该从 Vue 2 升级到 Vue 3 应不应该升级?这个问题不能一概而论。 首先,如果你要开启一个新项目,那直接使用 Vue 3 是最佳选择。后面课程里,我也会带你使用 Vue 3 的新特性和新语法开发一个项目。 以前我独立使用 Vue 2 开…

【vue】vuex常见面试题

【vue】vuex常见面试题 文章目录【vue】vuex常见面试题一、vuex简介对vuex的理解各模块在流程中的功能:Vuex实例应用二、常见面试题1.Vuex 为什么要分模块并且加命名空间2.Vuex和单纯的全局对象有什么区别?3.为什么 Vuex 的 mutation 中不能做异步操作&a…

css宽高自适应

1. 宽高自适应 举个例子看看什么是宽高自适应, (1)先正常创建一个div标签,有宽和高: 结果: (2)去掉div的宽度,观察结果 结果: 结果占满了整个屏幕&#xff0…

HTML表格样式

9675人阅读 行跟列背景颜色的选择&#xff0c;合并等 列的颜色选择代码 <colgroup span"1" bgcolor"lightgreen"></colgroup> <colgroup span"1" bgcolor"lightyellow"></colgroup> <colgroup span"…

一大波 ChatGPT 开源项目,诞生了!

公众号关注 “GitHubDaily”设为 “星标”&#xff0c;每天带你逛 GitHub&#xff01;大家好&#xff0c;我是小 G。本月初 ChatGPT 问世&#xff0c;犹如平地惊雷般&#xff0c;在技术圈中引起了广泛讨论。作为全球最大的开发者社区&#xff0c;GitHub 平台也在近期诞生了多个…

Ant vue中表单验证(动态校验、部分校验)

前提&#xff1a;写了超级复杂的表单&#xff0c;其中涉及了很多表单验证的地方&#xff0c;现一一记录一下&#xff1b; ant-vue 版本1.7.8 vue 版本2.6.11 校验的原理大体相似&#xff0c;灵活应用&#xff01;&#xff01; 1.动态校验 需求&#xff1a; 1根据读写方式去动态…

Css display 属性详解

css display - 块和内联元素 块级元素(block)块元素是一个元素&#xff0c;占用了全部宽度&#xff0c;在前后都是换行符;总是独占一行&#xff0c;表现为另起一行开始&#xff0c;而且其后的元素也必须另起一行显示内联元素(inline)内联元素只需要必要的宽度&#xff0c;不强…

react简单入门--常用hook中useMemo的使用(详细版)

前言&#xff1a; 作用&#xff1a; 首先useMemo它使用来做缓存用的&#xff0c;只有当一个依赖项改变的时候才会发生变化&#xff0c;否则拿缓存的值&#xff0c;就不用在每次渲染的时候再做计算 场景&#xff1a; 既然是用作缓存来用&#xff0c;那场景就可能有&#xff1a…

vue3的bpmn使用

目录 1.前言 2.安装相关依赖 3.组件部分的template部分 4.组件中的script 5.style代码 6.父组件中的使用场景 7.注意事项 1.前言 由于此次处于自己做项目阶段&#xff0c;基本上只要项目中需要使用到流程这一方面的东西&#xff0c;就需要用到bpmn以及后端的activity流…

VUE3 之 render 函数的使用 - 这个系列的教程通俗易懂,适合自学

目录 1. 概述 2. render 函数 3. 综述 4. 个人公众号 1. 概述 老话说的好&#xff1a;不用想的太多、太远&#xff0c;做好当天的事&#xff0c;知道明天要做什么就可以了。 言归正传&#xff0c;今天我们来聊聊 VUE 中 render 函数的使用。 2. render 函数 2.1 一个简单…

前缀和与对数器与二分法

1. 前缀和 假设有一个数组&#xff0c;我们想大量频繁的去访问L到R这个区间的和&#xff0c;我们该怎么快速的得出。 如果我们每次都遍历一遍累加这样就太慢了。我们可以开辟一个数组&#xff0c;把每个位置的和加在一起存进去。 如果我们要找的L到R中&#xff0c;L是0。那么…

Echarts地图的基本使用方法

echarts使用地图的基本使用方法 引入echarts 第一步&#xff1a;引入js文件 下载的最新完整版本 echarts.min.js 即可 <script src"echarts.min.js"> </script>第二步&#xff1a;指定DOM元素作为图表容器 创建一个DOM来作为绘制图表的容器 <di…