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来开发前端的朋友，操作简单，希望对您有帮助。

(网页开发/前端)配置VsCode，让您拥有更舒适的开发环境相关推荐

php和python哪个用了开发web好-php与python谁更适合web开发？为什么？
就单纯PHP和python比较的话,甚至说是强大的Java(Java的优势是复杂业务逻辑,企业级应用,当然电商领域例如阿里也喜欢)来说,PHP就是为Web而生的!开课通知:php中文网<第10期 ...
arduino开发ESP8266配置方法，入门必看，esp8266开发板库离线安装包package2.7.1
公众号关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 群里经常有朋友问arduino开发ESP8266的配置方法,今天在之前的文章基础上, ...
200528更新arduino开发ESP8266配置方法，入门必看，esp8266开发板库离线安装包package2.7.1...
公众号关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 群里经常有朋友问arduino开发ESP8266的配置方法,今天(200528)在之 ...
ARM开发板配置rzsz
@TOC 1 交叉编译rzsz 这里说的rzsz并不是真的是rzsz库,发现并不好用,而确实好用. rzsz-3.48.tar.gz==>不好用,建议别下了 https://ohse.de/uw ...
疫情下更合适的开发模式
问题的提出任何复杂的软件都是团队工作的产物,所以我们会利用版本控制工具和不同的分支策略来协助团队的日常开发和交流,mainline开发模式和pull request开发模式(以下简称PR)则是最常用 ...
Script Lab 续：为 Officejs 开发配置 VSCode 环境
垫场AA:深度:从 Office 365 新图标来看微软背后的设计新理念 -------------------------------------------------- 前期01:尝试:Scri ...
Vue项目部署到云开发前端网页托管｜unicloud版
Vue项目部署到云开发前端网页托管-unicloud版前言创建Vue项目一.检查环境 1.检查`Node`环境 2.检查`Vue`环境二.创建项目 1.项目创建 2.创建成 ...
前端开发必备的VSCode插件
本文总结了一下前端开发人员一些经常用的可以提高开发效率的VSCode插件,好的工具可以事半功倍.主要分为:基础通用篇,自由可选篇,框架工具篇,主题篇(按照我自己的想法分的) 基础通用篇 Chinese ...
环境搭建：如何配置 vscode 远程开发 + 免密登录
如何配置 vscode 远程开发 + 免密登录 1.在 vscode 中安装 remote development 插件点击: Extensions (vscode界面左侧),找到 Remote - ...

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

安装扩展：open in browser

安装扩展：Live Preview

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

(网页开发/前端)配置VsCode，让您拥有更舒适的开发环境相关推荐

最新文章

热门文章