VS Code在前端开发中必备插件

1、界面汉化

• 插件名：Chinese (Simplified) Language Pack for Visual Studio Code
• 功能：为VS Code提供中文界面.
  

2、页面在浏览器中预览

• 插件名：Open in Browser
• 功能：使用VS Code预览前端页面.
• 使用方法1：右键 - Open In Default Browser
• 使用方法2：Alt + B

3、 代码自动格式化/自动整理

• 插件名：JS-CSS-HTML Formatter

• 功能：自动格式化JS、CSS、HTML

• 使用方法： 保存代码后自动格式化

• 使用插件前：

• 使用插件后：:
  

4、自动更改匹配的标签

• 插件名：Auto Rename Tag
• 功能：更改双标签其中一个时，另一个标签也跟着改.
• 效果图：
  

5、转至css定义处

• 插件名：CSS Peek
• 功能：转到css的定义处
• 使用方法：单击类名-右键-转到定义处 或直接使用 F12
  

6、保存代码自动刷新浏览器中的界面

6.1 在vs code安装LiveReload插件

在vs中安装livereload插件,如下图所示

6.2 在vs code开启LiveReload服务

• 在vs code按下组合键Ctrl + Shift + P，点击一下开启服务，再点击一下关闭服务，若没反应再点击一下。
  

6.3 在谷歌浏览器中安装LiveReload插件

• 下载Chrome版本的LiveReload的插件。如果会科学上网的话，可在Chrome的插件管理中下载，也可以使用离线版的安装包 ，安装教程自行百度。>>> 百度网盘下载或优快云站内下载。
• 安装完毕后是空心的一个刷新标识，再点击一下会变成实心的。
  
  
• 至此，在vs code保存代码，即可自动刷新浏览器中的界面。