【H2O2|全栈】关于VS code你不得不知道的一些事（一）【前端

本文链接：https://blog.csdn.net/ZC13786305863/article/details/141959207

VS code 便捷使用（一）【随笔】

前言

写了很多期HTML的编程相关的博文了，一直使用的编辑器是VS code，它因强大的功能性和可扩展性深受广大开发者的喜爱。

本期博客将讲解一些好用的VS code插件，使用它们可以让你的使用体验和开发效率都得到极大提升。由于博主从事的是全栈行业，所以这一篇会说一些偏向前端的插件（当然全类型开发可用的也有哈）。

写作水平不高，多多担待（捂脸）。

插件

在哪里下载插件？

打开VS code，在左下角找到管理的图标：

考虑到很多朋友在初次使用VS code的时候，默认的界面是英文，所以也截一下英文版的管理菜单：

找到扩展（Extensions）选项，点击打开。

或者直接在左边的选项卡中找到下面这个图标也可。

然后，就可以在搜索（Search）框中搜索我们想要的插件了。

注意，搜索插件的名称请输入英文哦。

中文简体（汉化包）

其实大部分的英文单词对于编程领域的朋友们来说都是信手捏来的，但是对于刚刚踏入编程领域的小白来说，使用英文的编辑器页面在阅读上是有一定的困难的，这个时候就会涉及到汉化的功能。

在搜索框中，输入Chinese，可以看到下面的几个插件：

大陆地区的朋友们可以选择第一个中文（简体）插件，这个是使用最多的。港澳台地区的朋友可以选择中文（繁體）插件，按照个人阅读习惯来即可。

这两个是Microsoft官方提供的版本，其他的版本不做推荐。

点击Install（下载），下载完成后VS可能会提示需要重启才能生效，右下角提示信息如下：

点击Change Language and Restart（改变语言并重启），重启VS之后，界面就变成下面这个样子了：

Markdown文件编辑

有关Markdown文件的介绍和使用，可以去本文所在专栏的另一篇博文Markdown的使用里自行阅读，这里不展开来讲了。

VS中推荐的Markdown文件格式的检查工具是markdownlint，但是我个人不是很喜欢，使用它总是会强制要求格式化，否则将会报错。

我推荐的是官方认证的插件Office Viewer(Markdown Editor)，就是下面这个：

你可以使用它的颜色主体和文件图标主题，但是它会把VS整个工作区的颜色和所有文件的图标都改了，我个人不喜欢，但是诸位也可以试试看。

想把主题改回来，还是在管理界面，找到主题以更改样式：

说回这个插件，在安装之后，打开Markdown文件，右上角会出现这个像笔一样的图标：

点击它，就可以进到下面这个界面了：

上方的工具栏里可以设置格式，省去了学习Markdown语法的过程，可以直接像写Word文档或博客一样编辑Markdown文件，非常方便。

*当然，想学习Markdown可以看我之前提到的自己的专栏文章，不过里面使用的是有道云笔记*

HTML快速添加双标签

使用到的插件是htmltagwrap，就是下面这个：

这个插件的功能是，选中一块区域，为这个区域快速添加标签，默认添加的标签是p标签。

使用方法是光标先选中一块文字：

然后使用快捷键Alt+W，可以看到默认包裹了一个p标签：

不要点击其他地方，因为已经选中标签两侧的内容了，直接输入你想要的标签名进行更改，比如我想改成div标签，直接输div就行了：

HTML快速修改双标签

使用到的插件是Auto Rename Tag，就是下面这个：

这个插件的功能是，修改双标签一侧的内容，另一侧的内容会自动被修改。

比如我现在有这么一大串代码：

我现在要把他们都改成别的标签，如果没有安装这个插件，那么我将要按照这个步骤去更改一个双标签：

删除开始标签名
写上新的标签名
复制新的标签名
覆盖结束标签名

这样一来，就需要花费成倍的时间来修改标签，这是得不偿失的。

现在，有了这个插件，我只需要执行前面的两步就可以了，后两部是同时完成的，非常方便。

WEB网页编辑效果实时预览

使用到的插件是Live Preview，就是下面这个：

这个插件的功能是，编写WEB代码的时候，可以实时看到网页的效果。

比如，现在有下面这个网页，未安装插件时，我想要查看它的效果，只能使用浏览器打开查看；修改网页内容后，需要保存文件，然后在浏览器中刷新来看。

而现在，我们只需要右键单击，在出现的菜单中选择显示预览：

那么，在右侧区域就会自动显示实时的网页效果：

当然选择右上角的这个图标也是可以的：

省去了不断保存再切换浏览器的时间，非常方便。

WEB网页快速浏览器打开

使用到的插件是Open in Browser，就是下面这个：

这个插件的作用是，快速以脱离编辑器的方式，在指定浏览器打开网页。

使用方法是在HTML文档中右键单击，选择下面的两个选项（需安装对应启动插件）之一即可，第一个是默认浏览器，后面是其他浏览器。

WEB网页编辑器服务端口打开

使用到的插件是Live Server，就是下面这个：

这个插件的作用是，在VS code的服务端口http://127.0.0.1:5500/打开你的网页。

适用于一些需要基于服务器才能启用的功能，比如对算力要求比较大的Canvas库绘图相关的功能。

浏览器启动插件（两个）

我推荐下载使用下面两个浏览器启动插件Open Browser Preview和Microsoft Edge Tools，分别是默认浏览器打开和Edge浏览器打开，比较常用：

这类插件配合上面的WEB网页快速浏览器打开使用，类似的插件可以输入你平常使用的浏览器的英文名称自行搜索。

本期汇总

本期博客涉及的插件我放在下面这个表格里了：

插件名称	功能
Chinese	汉化
Office Viewer	Markdown快速编辑
htmltagwrap	快速添加双标签
Auto Rename Tag	快速更改双标签
Live Preview	快速实时预览
Open in Browser	快速浏览器打开
Live Server	服务端口打开
Open Browser Preview	默认浏览器打开
Microsoft Edge Tools	Edge中打开