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来开发前端的朋友














，操作简单
  
  
  
  
  
  
  
  ，希望对您有帮助






















。