vscode有哪些比较好用的扩展组件？

本文将介绍一些本人正在使用且比较好用的插件。

界面优化

中文语言包

• 插件名称：Chinese (Simplified)
• 功能：将操作界面的英文语言转化为中文，方便英文水平不好的人使用idea。
• 个人评价：英文学渣的必备组件。

编辑器主题

• 插件名称：One Dark Pro
• 功能：优化操作界面的页面设计，提供更友好的视觉体验。
• 个人评价：One Dark Pro 是我使用下面体验感最舒服的主题。

缩进高亮

• 插件名称：indent-rainbow
• 功能：对代码中的缩进进行高亮展示，提供更好的代码层级关系展示。
• 个人评价：在HTML代码中，由于层级关系不明显，所以该功能显得尤为重要。

文件图标美化

• 插件名称：Material Icon Theme
• 功能：优化编辑器原版的文件图标，提供更好的视觉体验。
• 个人评价：我感觉原版的文件图标设计蛮丑的，这个插件的图标设计好很多。

注释美化

• 插件名称：Better Comments
• 功能：高亮不同类型的代码注释，提供更好的视觉体验。
• 个人评价：这个插件更倾向于让你写好注释。!是警告注释，通常用于修复问题带出问题的情况；?是逻辑不清晰等问题注释；*重点注释，通常用在文件说明；todo是待开发功能注释；普通注释则日常使用较多

特定界面优化

Vue3代码高亮

• 插件名称：Vue - Official（Volar已改名）
• 功能：高亮Vue3框架下的vue代码。
• 个人评价：使用时发现与Vue2的vetur插件存在冲突，使用时请卸载vetur组件。

快速定位CSS样式

• 插件名称：CSS Peek
• 功能：支持点击样式名称快速定位到生效代码为止。
• 个人评价：好用，减少了ctrl+f全局搜索的工作量。

项目管理

Git 可视化

• 插件名称：Git Graph
• 功能：为 git 提供查看 git 取消图的功能。

Git 日志

• 插件名称：GitLens — Git supercharged
• 功能：每一行代码旁边都会显示日志，默认格式为：提交者 + 修改日期 + commit 。

代码格式检查

• 插件名称：ESLint
• 功能：静态 JavaScript 代码分析器,用于对代码风格进行规范。

格式化代码

• 插件名称：Prettier - Code formatter
• 功能：代码格式化工具，配合 es-lint 使用，达到规范代码的目的。

npm包校验

• 插件名称：npm
• 功能：用于校验 package.json 中的第三方包的状况。

当 package.json 中的 modules 出现以下情况时，插件会提示警告：

• 在 package.json 中定义了却没有安装。
• 已安装模块，但是却没有在 package.json 中定义。
• 已安装模块的版本号与 package.json 中定义的版本号不一致。

辅助编码

HTML元素自动填充

• 插件名称：IntelliSense for CSS class names in HTML
• 功能：支持tab键自动填充原生HTML元素，支持搜索已存在CSS类名。
• 个人评价：好用，不需要敲完全部的内容。

自动修改HTML标签

• 插件名称：Auto Rename Tag
• 功能：自动完成另一侧标签的同步修改。支持在 .vue .js .md 等文件中修改。

自动关闭HTML标签

• 插件名称：Auto Close Tag
• 功能：自动添加HTML/XML关闭标签。

路径依赖自动填充

• 插件名称：Path Intellisense
• 功能：引入路径自动填充，能有效的提高开发效率。

个人评价：好用，减少手动输入路径依赖的工作。

英文拼写检查

• 插件名称：Code Spell Checker
• 功能：检查英语单词拼写错误，单词拼写错误有波浪线提示。
• 个人评价：对我这种英语水平较差的有很大的帮助。

AI编码

• 插件名称：通义灵码
• 功能：阿里推出的面向消费者的免费AI，他可以辅助我们编码，通过分析代码上下文帮助解决代码编码问题。
• 个人评价：好用，能够极大的提高编码的效率。AI能够帮助程序员解决重复工作和简单问题，使程序员有更多时间关注其他事情。

JavaScript代码重构

• 插件名称：JavaScript Booster
• 功能：重构选中的JavaScript代码，提高代码的可读性和性能。

JavaScript代码片段

• 插件名称：JavaScript (ES6) code snippets
• 功能：整理常用的JavaScript代码片段为快捷键，帮助快速生成JavaScript代码片段。

代码翻阅

文档标记

• 插件名称：bookmarks
• 功能：标记当前代码位置，用于查看关联较深的代码时使用

使用前需要设置三个键位 ：

• toggle 标记/取消
• jump to preview 跳到上一个
• jump to next 跳到下一个

无用小功能

为什么叫无用小功能？因为这类功能可有可无，并不会提高编码效率，也起不到美化效果。

文件大小

• 插件名称：filesize
• 功能：在浏览器左下角显示当前文件大小。

导入文件大小

• 插件名称：Import Cost
• 功能：在文件右侧显示导入文件大小。

预览图片

• 插件名称：Image preview
• 功能：显示图片的缩略图。