#挑战30天在头条写日记#

Visual Studio Code 是由微软开发的一款免费的、针对于编写现代Web和云应用的跨平台源代码编辑器。它包含了一个丰富的插件市场，提供了很多实用的插件。下面就来分享 2023 年前端必备的 VS Code 插件！

一些常见插件

首先：

1. Live Server：提供一个本地开发服务器，支持实时预览和自动刷新。
2. Vue Language Features (Volar)

默认情况下，我们的 Vue 组件看起来像这样：

使用该插件可以获得漂亮的语法高亮显示、错误检查和代码格式化。并且，它还添加了很多 Vue 指令和事件处理程序，在输入时提供很好的建议。

volar 是专门为 Vue 3 构建的语言支持插件。它基于 @vue/reactivity 按需计算一切，实现原生 TypeScript 语言服务级别的性能。

随着 Vue 3 + TypeScript 越来越流行，Vetur（Vue 的官方 VS Code 扩展）开始出现问题，例如，将 Vue 与 TypeScript 一起使用时 CPU 使用率过高，或者不支持 Vue 3 的新 <script setup> 语法。而 Volar 就解决了 Vetur 的问题，并为 Vue 3 + TypeScript 用户提供了最佳的开发体验。它为 Vue 3 提供完整的语言支持，包括标准的单文件组件 (SFC) 语法及其最新添加的 <script setup>。

GitLens

增强了对Git仓库的可视化和交互，提供了更强大的代码审查和版本控制功能。

该插件增强了 VS Code 中的 Git，并从每个存储库中释放隐藏数据。可以快速查看代码的编写者、轻松导航和探索 Git 存储库、通过丰富的可视化效果和强大的比较命令获取有效信息，以及执行更多操作，帮助我们更好地理解代码。

Git History

该插件用于查看 Git 日志和文件历史记录并比较分支或提交。

Git Graph

Git Graph 插件用于可视化查看存储库的 Git 操作，并从图形中轻松执行Git操作。

VS Code Counter

VS Code Counter 插件用于统计项目代码的行数，安装插件之后，右键点击需要统计代码的文件夹，选择“Count lines in directory”，这时就会在项目根目录出现一个名为 .VSCodeCounter 的文件夹，包含了不同格式的结果，编辑器会打开其中的的 .md 格式。结果中会显示代码总行数，不同格式文件行数，不同路径文件函数等。代码行数中有纯代码行数、空白行数、注释行数。

Path intellisense

该插件用于自动补全文件名。当 import 其它文件时，能够对文件进行提示，快速补全要引入的文件名。

Code Spell Checker

Code Spell Checker 插件可以检查单词拼写是否出现错误，检查的规则遵循 camelCase （驼峰拼写法）。

后面推荐几个编程美化好玩的插件

Highlight Matching Tag

当有很多 HTML 标签时，有时很难将结束标签定位到对应的开始标签，反之亦然。使用该插件，单击开始标签时，会看到结束标签带有下划线。此外，它还会突出显示代码树中的开始和结束标签。如果需要，可以自定义样式以使下划线更加突出。

除此之外，该插件还有一些方便的命令，因此当单击标签时，可以使用ctrl + shift + P打开命令面板并搜索“Highlight Matching Tag”，会看到两个可以在项目中使用的命令。

TODO Highlight

如果想在将代码发布到生产环境之前提醒自己注意事项或代码中未完成的事情，TODO Highlight VS Code 插件会非常有用。该插件会在代码注释中突出显示某些关键字，如 FIXME: 和 TODO: 以提醒注意事项或尚未完成的事情。

除此之外，使用快捷键 ctrl + shift + P 打开命令面板并搜索 Todo Highlight 选择 List the Highlighted annotations，然后选择 All 以列出在所有文件中留下的所有突出显示的注释。

Better comments

该插件对不同类型的注释会附加了不同的颜色，更加方便区分，帮助我们在代码中创建更人性化的注释。

Colorize

Colorize 会给颜色代码增加一个当前匹配代码颜色的背景。它通过 CSS 变量、预处理器变量、hsl/hsla 颜色、跨浏览器颜色、exa、rgb、rgba和argb的彩色背景将 CSS 颜色可视化，帮助开发者快速区分颜色。

Image preview

通过此插件，当鼠标悬浮在图片的链接上时，可以实时预览该图片，除此之外，还可以看到图片的大小和分辨率。

CodeSnap

CodeSnap 用于对代码的进行截图和共享。屏幕截图可以用文本或形状进行注释，并通过链接共享或包含在网站或文档中。只需使用 ctrl + shift + P 并输入 CodeSnap，然后按回车键，CodeSnap 窗口就会打开。

Error Lens

Error Lens 是一款把代码检查(错误、警告、语法问题)进行突出显示的插件。Error Lens 通过使诊断更加突出，增强了语言的诊断功能，突出显示了由该语言生成的诊断所在的整行，并在代码行的位置以行方式在线打印了诊断消息。

还有一些，我不详细介绍了 ，但是也好用

• Prettier：自动格式化代码，支持多种编程语言，使代码风格保持一致。
• ESLint：集成了JavaScript和TypeScript的静态代码分析工具，用于检查和修复代码中的常见问题。
• Bracket Pair Colorizer：用不同的颜色高亮显示代码中的括号，使代码结构更清晰。
• IntelliSense for CSS class names：为HTML和CSS提供智能的类名补全和代码提示功能，加快开发速度。
• Docker：提供了与Docker容器和镜像的集成，方便进行容器化开发和部署。
• Code Runner：可以直接在VSCode中运行和调试多种编程语言的代码片段，提高开发效率。
• Vue.js Extension Pack：为Vue.js开发提供一揽子的插件集合，包括语法高亮、代码片段、调试等功能。
• REST Client：允许您直接在VSCode中发送HTTP请求，方便测试和调试API接口。

如果您想在工作之余放松一下，以下是一些能让您在VSCode中摸鱼的插件：

1. VSCode Tetris：一个经典的俄罗斯方块游戏，可以在VSCode中玩耍。
2. VSCode Chrome Dinosaur：将Chrome浏览器的小恐龙游戏带入VSCode，让您在断网或无聊时玩耍。
3. VSCode Cat Coding：在VSCode的侧边栏中添加一只可爱的猫，可以和它互动、喂食等，增加一些乐趣。
4. VSCode Music Time：集成Spotify、Apple Music和其他音乐平台，让您在VSCode中听音乐，增添工作时的舒适感。
5. Code Runner：虽然不是专门为摸鱼设计的插件，但它允许您在VSCode中直接运行各种编程语言的代码片段，包括游戏脚本等。

这些插件提供了一些小游戏、小功能，可以让您在工作间隙或休息时间愉快地放松一下。请注意，尽量在合适的时间和环境下使用这些插件，避免影响工作效率。