前端问题：vscode有哪些好用且开发常用的插件？

笔者 | 大澈

大家好，我是大澈！

最近项目比较紧，为了赶进度，一天基本都不怎么离开工位。长时间看显示器，再加上视角需要略微低头，导致我这个颈椎十分不舒服。

为了解决这个问题，我选择投资了一个显示器支架，双屏的那种。之前一直看同事在用，觉得有点鸡肋，自己就不怎么用，现在突然自己整上了，感觉还确实挺酷的哈。

而且，现在看显示器的时候，还需要略微的抬头看，对颈椎确实比较友好，不错不错。

大澈在此呼吁各位新老程序员，爱护颈椎，猿猿有责。

ONE

需求分析，问题描述

一、需求

整理vscode中好用的且开发中常用的插件，不常用的不再列出。

二、问题

1、vscode有哪些好用且开发常用的插件？

TWO

解决问题，答案速览

一、美化类插件

1、Better Comments

插件功能：注释高亮。

此插件可以让我们自定义多行注释的样式，尤其对于一些重要的注释，我们可以做一些醒目的标注，后期维护时也可以更加便捷的查看。

这里我只在vue文件中生效了，在html文件中插件没有生效，具体原因待研究。

2、Volar

插件功能：vue3语法高亮。

此插件为vue3必备插件，不作赘述。

3、Community Material Theme

插件功能：切换编辑器主题。

此插件可以让我们自由切换多种编辑器的主题色，对颜值要求比较高的朋友，快去选择最适合自己的一款去开发吧。

个人不太用，最喜欢的还是深色模式的vscode。

4、Material Icon Theme

插件功能：切换文件图标主题。

此插件可以让我们自由切换多种文件图标的样式，强烈建议安装的一款美化插件，它会让你的项目目录比较清晰。

可惜的是，文件图标的主题目前只能选择一类，希望后期可以多出几套个性化主题。

二、功能类插件

1、Auto Rename Tag

插件功能：修改开始标签，结束标签跟着自动变化。

此插件可以让我们在修改html标签时，只需修改开始标签或结束标签，另外一个标签就会跟着自动修改，写布局时十分实用。

2、Turbo Console Log

插件功能：快速添加和删除console.log。

此插件可以帮助我们快速打印变量，以及在不需要时快速清除所有打印命令，真心推荐使用。快捷键如下所示：

ctrl+alt+l 选中变量之后，使用这个快捷键生成console.logalt+shift+c 注释所有console.logalt+shift+u 启用所有console.logalt+shift+d 删除所有console.log

3、cssrem

插件功能：单位自动转换计算。

此插件为响应式布局专用，好用的一批，可以在px、rem、vw、rpx之间自动转换计算，再也不需要我们自己用计算器去计算了。

4、Markdown PreviewEnhanced

插件功能：markdown文档实时预览。

此插件可以让我们实时编辑预览markdown文档，点击鼠标右键，即可打开侧边预览界面。

5、Vue3 Snippets

插件功能：vue3自动生成代码片段。

此插件可以让我们使用简单的几个关键字，就可以自动生成对应的代码片段，在vue3开发中，非常实用。

6、ChineseSimplified Language

插件功能：语言汉化。

此插件为vscode必备基础插件，不作赘述。

7、Open in browser

插件功能：浏览器预览html页面。

此插件为vscode必备基础插件，不作赘述。

8、Live Server

插件功能：浏览器热更新预览html页面。

此插件为vscode必备基础插件，不作赘述。

其它插件补充中...

- END -