以下的这些插件都有使用过可取对自己编码有用的选择安装。 智能补全 / 提示类插件1.Auto Import在编码时选择有对应导入包的选项自动为 JS/TS 文件中的使用项补全并添加 import 声明极大提高开发效率。2.Iconify IntelliSense提供 Iconify 图标库如 Material、Carbon、FontAwesome 等的图标名称自动补全适合在 Vue/React 中使用图标。3.JavaScript (ES7) code snippets快速输入常用 ES7/React/Redux 的代码片段如useEffect、rcc、useState等。4.Vue 3 Snippets提供 Vue 3 的 Composition API 代码片段极大提升开发效率如setup、ref、watch等快捷键。5.Path IntelliSense自动补全文件路径import语句中非常有用。并且实现按住 command 路径跳转到对应文件。6.Node.js Modules IntelliSense为 Node.js 原生模块如fs,path或第三方模块提供自动提示。7.Alias别名路径跳转结合 webpack/vite 配置为/components/...这类路径提供跳转和提示功能。40. Code Spell Checker检查代码单词是否拼写错误。44. Tailwind CSS IntelliSensetailwindcss 提示插件。48. :emojisense::emojisense: 的主要作用是——在 VS Code 中智能提示 emoji 表情的输入。在你输入冒号:时提供 emoji 自动补全 功能比如选择了:smile: 它会自动插入:smile:或直接替换成表情符号 取决于设置。49. Backticks在 VS Code 中写模板字符串...时内部语法也能被正确高亮、提示和识别。55. Image preview在 image 图片提供默认小图预览和 hover 大图预览。 代码质量 / 格式化 / 清理8.ESLint检查 JS/TS/React/Vue 等代码质量配合.eslintrc可实现强制规范、标红错误。9.Prettier - Code Formatter格式化代码风格如自动换行、缩进、引号格式等配合 ESLint 一起使用最佳。11.Stylelint类似 ESLint但用于 CSS/SCSS/LESS 等样式文件的规范和错误提示。13.TypeScript Errors高亮和显示 TS 报错信息辅助调试。41. Error Lens报错信息直接展示在代码后面。52. Formatting Toggle一键开启或关闭代码自动格式化功能Formatting。使用场景比如正在修改别人旧代码不想破坏原格式只想局部修改一点不希望 Prettier/Eslint 自动格式化。 UI/界面增强14.Colorize为 CSS/JS/HTML 中的颜色代码如#fff、rgba、red添加背景色直观显示。15.Material Icon Theme为侧边栏文件添加美观的 Material 风格图标提高可读性。16.One Dark ProAtom 风格的 One Dark 主题深色主题中最受欢迎之一。17.Dracula Theme著名 Dracula 暗色主题配色柔和适合长时间编程。18.vscode-icons-mac为 mac 风格的文件夹提供美化图标。19.Indent-Rainbow为不同缩进级别的代码块添加不同颜色方便阅读嵌套结构。20.Bracket Pair Colorizer高亮匹配的括号对如{},[],()不同层级不同颜色。45. vscode-icons-macvscode 在 mac 上的文件图标插件。50. Better Comments默认情况下VS Code 中的注释// ... 或 /* ... */都是单一颜色的比如灰色。但在实际开发中我们会写很多不同语义的注释TODO待办事项、FIXME需要修复、WARNING警告、 QUESTION问题、 !、*、NOTE等等这些都混在一起时根本看不出重点。 Better Comments 会根据关键字或符号自动给注释加上不同的颜色高亮。51. colorize为 css 颜色设置加上可视化背景在编译器中直观看到设置颜色。59. Symbols文件图标主题60. VSCode Great Icons文件图标。62. Markdown Preview Enhanced增强 markdown 支持实时同步滚动刷新目录查看。 代码功能增强21.Auto Close Tag自动补全 HTML/Vue/JSX 标签的闭合输入div自动补全/div。22.Auto Rename Tag修改 HTML/Vue/JSX 的标签名时自动同步闭合标签名。23.CSS Peek在 HTML 或 Vue 中按住Ctrl 点击 class可跳转到对应 CSS 定义位置。24.i18n Ally多语言文件如zh.json,en.json管理工具支持翻译键提示、缺失高亮、自动提取。25.Image Preview悬浮在 HTML 或 CSS 中的图片链接上可预览图片适用于静态资源。26.Todo Tree提取所有注释中的// TODO、// FIXME在侧边栏统一显示便于管理待办事项。26. TODO HighlightTODO 高亮。27.Live Preview / Live Server提供一个本地服务器预览 HTML 页面支持自动刷新适合纯 HTML/CSS 项目。28.Debugger for Chrome在 VSCode 中调试前端页面HTML/JS/Vue/React时与 Chrome 浏览器联调。46. Hungry Delete智能删除插件自动删除无用空格。47. Turbo Console Log快捷打印插件。选中变量 →CtrlAltLWin/ OptionControlLMac。立刻出现带文件名、行号、函数名的日志console.log( file:api.ts ~ line:42 ~ token, token);还有其他强大的功能可以自行尝试。我习惯于把行号和文件名都打印出来便于调试。56. TypeScript ToolboxTypeScript Toolbox 是一组提高 TypeScript 编写效率的小工具合集提供类型转换、接口生成、类型预览、复制等便捷操作。57. Remove Unused Imports移除未使用的 import 导入。58. Pretty TypeScript Errors美化简化TypeScript 报错信息。60. Local History文件本地历史记录。 Vue/前端专属插件29.Vue - Official (官方)Vue 3 项目中替代 Vetur 的官方推荐插件支持语法提示、类型推断、错误检查等。30. **Vue Language Features **Vue 官方维护的语言工具插件Vue 2/3 都支持但推荐配合 Volar 使用。31.Tailwind CSS IntelliSense对 Tailwind CSS 类名进行自动补全、语义提示、错误检查非常适合实用派开发者。 Git / 云端协作32.GitLens强大的 Git 增强工具查看每行代码的提交者、历史、对比变更、Blame、提交详情等。34.GitHub Repositories允许你打开远程 GitHub 仓库代码进行浏览、编辑不需要 clone 到本地。35.Remote Repositories与 GitHub Repositories 类似支持浏览任意远程仓库无需本地 clone。53. Git Graph在 VS Code 内直接以**图形化界面Graph**显示 Git 提交历史、分支、合并关系并支持执行各种 Git 操作提交、切换分支、合并、rebase、查看 diff、push/pull 等。54. gitignore从一些现成的 github库 中拉取 gitignore 文件模板。57. LeetCode with labuladonglabuladong 的力扣刷题插件。 语言支持 / 本地化36.Chinese (Simplified) Language Pack将 VS Code 界面翻译成简体中文。 环境辅助工具37.dotenv为.env文件提供高亮、语法支持常用于环境变量管理。38.npm Intellisense自动提示node_modules中的包名适用于导入模块时自动补全。 工具增强类39.Local History每次保存文件自动备份一个版本在.history中可快速回退历史版本。42. Numbered Bookmarks书签便于快速找到代码。43. REST Client在本地快速开启一个网络请求服务。55. Code Runner运行各种语言的代码文件。56. Database Client可视化数据库。
