文章目录
- Auto Rename Tag 插件是一个高效的前端开发工具，主要用于：自动同步修改 HTML/XML/JSX 标签的开闭标签，避免因手动修改导致标签不匹配的问题。 核心功能： 标签双向同步修改开始标签(如< div>)时，自动同步更新闭合标签(< /div>)。修改闭合标签时，同样反向同步更新开始标签。简单来说：当我们想要修改双标签时，只用修改该标签的其中一个，另一个会自动改变为对应的标签。 多语言支持支持HTML、XML、JSX/TSX(React)Svelte 等基于标签的语法。 精准作用域只在标签内部修改时触发，避免误操作(如字符串中的符号被错误修改)。
- View in Browser 插件是一个轻量级的前端开发工具，主要用于 快速在浏览器中预览 HTML 文件，并支持实时刷新功能。在使用其他方法预览时步骤繁琐，比如手动保存后切换到浏览器刷新页面，这时，使用该插件就便利很多。当安装了该插件之后，在程序页面右击，会增加两个选项： 当我想要进行预览时，只需点击“View In Browser”即可。会直接跳转到浏览器界面显示：
- Live Server 是一个专为前端开发设计的实时本地服务器插件，其核心作用是通过热更新（Hot Reload） 和 本地服务器环境 显著提升开发调试效率。 核心功能： 实时热更新(Live Reload)保存即刷新:修改 HTML/CSS/JS 文件后，浏览器自动刷新(无需手动操作)。CSS 无刷新注入:修改 CSS 时仅更新样式，保持页面状态(如表单输入内容)。性能优化:增量更新资源，避免整页重载。 本地服务器环境http://协议支持:通过 http://localhost:5588访问项目(解决 file://协议下的跨域限制)。API模拟开发:可配合Mock.js或JSON Server 实现前后端并行开发。 多设备同步调试局域网访问:同一网络下的手机/平板可通过 |P 地址实时访问(如 http://192.168.1.100:5500)多浏览器同步:支持 Chrome、Firefox 等同时连接，实时同步操作。 当使用“View In Browser”进行预览后，又将程序修改了，这时在使用预览，浏览器会仍旧停留在上一个内容，需要刷新页面才可以显示新内容。但有了Live Server 组件后，可以不用手动刷新，直接显示新的内容。当安装Live Server 组件后，在程序页面右击，会增加两个选项： 点击“Open whirh Live Server”选项后，会直接在浏览器上显示更新内容。
目录
- 一、Visual Studio Code下载
- 二、汉化
- 三、常用组件
- 1、Auto Rename Tag
- 2、view-in-browser
- 3、Live Server
- 四、基本操作
- 五、总结
下载官网：https://code.visualstudio.com/ 或者点击这里进行下载
进入官网后点击右上角的Download
（可能会比较卡，稍等一会儿）出现以下界面
根据自己电脑的型号进行选择即可。
查看电脑型号：右键点击“此电脑”，选择“属性”
根据指引进行安装即可（可以改变安装路径）
双击打开vscode，进入以下界面：
找到左侧栏中的插件，点击进入搜索框，输入“Chinese”，点击install进行安装。
安装完成后，会出现重启选项，Chinese插件要重启后才能实行。
重启完成后，就汉化成功了。
下面讲解中会用到的代码：
<html>
<head>
<title> 这是页面标题 </title>
</head>
<body>
前端指的是用户在使用网站或应用程序时直接
看到和与之交互的部分，也称为“客户端”。
它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。
简单来说，前端就是用户眼前的一切。
</body>
</html>
上面进行汉化的Chinese组件帮助我们将英语转换为中文，现在再介绍几组其它的常用组件，方便前端开发。安装方法同上。
Auto Rename Tag 插件是一个高效的前端开发工具，主要用于：自动同步修改 HTML/XML/JSX 标签的开闭标签，避免因手动修改导致标签不匹配的问题。
核心功能：
- 标签双向同步
修改开始标签(如< div>)时，自动同步更新闭合标签(< /div>)。
修改闭合标签时，同样反向同步更新开始标签。
简单来说：当我们想要修改双标签时，只用修改该标签的其中一个，另一个会自动改变为对应的标签。 - 多语言支持
支持HTML、XML、JSX/TSX(React)Svelte 等基于标签的语法。 - 精准作用域
只在标签内部修改时触发，避免误操作(如字符串中的符号被错误修改)。
View in Browser 插件是一个轻量级的前端开发工具，主要用于 快速在浏览器中预览 HTML 文件，并支持实时刷新功能。在使用其他方法预览时步骤繁琐，比如手动保存后切换到浏览器刷新页面，这时，使用该插件就便利很多。
当安装了该插件之后，在程序页面右击，会增加两个选项：
当我想要进行预览时，只需点击“View In Browser”即可。会直接跳转到浏览器界面显示：
Live Server 是一个专为前端开发设计的实时本地服务器插件，其核心作用是通过热更新（Hot Reload） 和 本地服务器环境 显著提升开发调试效率。
核心功能：
- 实时热更新(Live Reload)
保存即刷新:修改 HTML/CSS/JS 文件后，浏览器自动刷新(无需手动操作)。
CSS 无刷新注入:修改 CSS 时仅更新样式，保持页面状态(如表单输入内容)。
性能优化:增量更新资源，避免整页重载。 - 本地服务器环境
http://协议支持:通过 http://localhost:5588访问项目(解决 file://协议下的跨域限制)。
API模拟开发:可配合Mock.js或JSON Server 实现前后端并行开发。 - 多设备同步调试
局域网访问:同一网络下的手机/平板可通过 |P 地址实时访问(如 http://192.168.1.100:5500)多浏览器同步:支持 Chrome、Firefox 等同时连接，实时同步操作。
当使用“View In Browser”进行预览后，又将程序修改了，这时在使用预览，浏览器会仍旧停留在上一个内容，需要刷新页面才可以显示新内容。但有了Live Server 组件后，可以不用手动刷新，直接显示新的内容。
当安装Live Server 组件后，在程序页面右击，会增加两个选项：
点击“Open whirh Live Server”选项后，会直接在浏览器上显示更新内容。
这里就先介绍一种，显示页面代码。
快捷键：fn+f12
可以用来快速查看页面代码。所显示的与我在vscode中写的几乎一样。
到此这篇关于前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作的文章就介绍到这了,更多相关vscode安装配置教程内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！
您可能感兴趣的文章:
- vsCode安装使用教程和插件安装方法
- 解决vscode中golang插件依赖安装失败问题
- vscode中安装Go插件和配置Go环境详细步骤
- vscode安装使用的详细教程
- Vscode常用快捷键列表、插件安装、console.log详解