目录
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中打开 |
预告和回顾
下一期VS code便捷使用中，我会讲述一些VS编辑器的快速生成代码命令和快捷键，敬请期待。
还是那句话，博主的初心不变，分享知识、交流心得，并共同进步。
有关全栈学习的其他学前内容，可以看我下面这个专栏：
专栏 | 前端学习开始前
http://t.csdnimg.cn/B9jdK
后话
笔者也是一个刚刚接触全栈的小白，对于这些东西也是才会使用不久。关于这篇博客，主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
【H2O2】
标签：插件,code,浏览器,H2O2,标签,全栈,VS,使用,Markdown From： https://blog.csdn.net/ZC13786305863/article/details/141959207