前端探索VSCode 插件
编辑器增强类
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| Code Runner | Code Runner | 运行多种语言的代码片段或代码文件 |
| Auto Close Tag | Auto Close Tag | 自动添加闭合标签 |
| Auto Import | Auto Import | 自动查找、解析并提供所有可用导入的代码操作和代码补全 |
| Auto Rename Tag | Auto Rename Tag | 修改标签时自动修改闭合标签名字 |
| Beautiful css/sass/scss/less | Beautiful css/sass/scss/less | 美化 css、sass 和 less 代码 |
| Document This | Document This | 在 TypeScript 和 JavaScript 文件中自动生成详细的 JSDoc 注释 |
| Easy Less | Easy Less | 自动在保存时将 LESS 编译为 CSS |
| EditorConfig for VS Code | EditorConfig for VS Code | Visual Studio Code 的 EditorConfig 支持 |
| Error Lens | Error Lens | 改善错误、警告和其他语言诊断的突出显示 |
浏览器相关类
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| Browse Lite | Browse Lite | VS Code 中的嵌入式浏览器 |
| Code Translate | Code Translate | 代码翻译 |
| Console Ninja | Console Ninja | 在 VSCode 中显示 console.log 结果 |
| glsl-canvas | glsl-canvas | GLSL 着色器的实时 WebGL 预览 |
| Image preview | Image preview | 在 gutter 和悬停时显示图像预览 |
| Live Server | Live Server | 在本地/网络服务器上为静态和动态页面提供实时重载 |
| Microsoft Edge Tools for VS Code | Microsoft Edge Tools for VS Code | 为 VS Code 提供 Microsoft Edge 浏览器开发工具 |
| open in browser | open in browser | 在默认浏览器中打开 HTML 文件 |
版本控制与协作工具
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| GitLens — Git supercharged | GitLens — Git supercharged | 增强 Visual Studio Code 内置的 Git 功能 |
| GitHub Pull Requests and Issues | GitHub Pull Requests and Issues | 创建、管理和接收 GitHub 的 Pull Requests 和 Issues 的通知 |
| GitHub Theme | GitHub Theme | Visual Studio Code 的 GitHub 主题 |
| Gist | Gist | 创建、打开和编辑 Gists |
| Git History | Git History | 查看 git 日志、文件或行历史记录 |
代码质量与规范工具
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| Babel Javascript | Babel Javascript | 为今天的 JavaScript 提供 VSCode 语法高亮 |
| Babelrc | Babelrc | Babelrc 的 JSON 验证 |
| Eslint | Eslint | 将 ESLint JavaScript 集成到 VS Code 中 |
| Stylelint | Stylelint | CSS/SCSS/Less 样式表的 Linter |
| Prettier - Code formatter | Prettier - Code formatter | 代码格式化工具 |
| Better Comments | Better Comments | 通过警告、信息、TODO 等改进您的代码注释 |
| Import Cost | Import Cost | 在编辑器中显示导入/ require 包的大小 |
| Error Gutters | Error Gutters | 在行号右边显示错误标记 |
| Code Spell Checker | Code Spell Checker | 代码拼写检查 |
项目管理与辅助工具
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| Project Tree | Project Tree | 将您的项目转换为树视图 |
| Path Intellisense | Path Intellisense | 路径自动完成 |
| File Icons | File Icons | VSCode 中的文件特定图标 |
| vscode-icons | vscode-icons | 文件类型图标 |
| Paste Image | Paste Image | 粘贴图片并插入 Markdown |
| koroFileHeader | koroFileHeader | 生成文件头部注释 |
| New Relic CodeStream | New Relic CodeStream | 代码旁添加评论 |
| Turbo Console Log | Turbo Console Log | 快捷添加 consolelog |
CSS 工具
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| Color Highlight | Color Highlight | 在编辑器中突出显示 Web 颜色 |
| CSS Peek | CSS Peek | 允许从 HTML 文件到相应 CSS 的 ID 和类字符串定义进行查看 |
| PostCSS Sorting | PostCSS Sorting | PostCSS 属性排序 |
| px to rem & rpx & vw (cssrem) | px to rem & rpx & vw (cssrem) | 单位转换插件 |
| Sass(.sass only) | Sass(.sass only) | Sass 语法支持 |
| SCSS Formatter | SCSS Formatter | SCSS 格式化工具 |
| SCSS IntelliSense | SCSS IntelliSense | SCSS 的智能感知 |
| Less IntelliSense | Less IntelliSense | LESS 的高级自动完成和重构支持 |
Vue 相关工具
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| Svg Preview | Svg Preview | Svg 预览 |
| TypeScript Vue Plugin(Volar) | TypeScript Vue Plugin(Volar) | TypeScript 和 Vue 的全能插件 |
| Vue3 Snippets | Vue3 Snippets | Vue 3 的代码片段 |
| Vue Language Features | Vue Language Features | Vue 语言支持 |
| vue-helper | vue-helper | Vue 助手 |
测试工具
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| Jest | Jest | 使用 Facebook 的 Jest 愉快地编写测试 |
| Wallaby.js | Wallaby.js | 实时代码覆盖率 |
| Vitest | Vitest | 用于 Vite 的测试插件 |
其他工具
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| canvas-snippets | canvas-snippets | canvas 代码片段 |
| CodeSnap | CodeSnap | 代码截图 |
| DotEnv | DotEnv | 支持 dotenv 文件语法 |
| Goto defination alias | Goto defination alias | 跟随别名重定向的定义 |
| il8n Ally | il8n Ally | VSCode 的一站式国际化扩展 |
| Iconify IntelliSense | Iconify IntelliSense | 智能 Iconify 预览和搜索 |
| json2ts | json2ts | 将 JSON 对象转换为 TypeScript 接口 |
YAML 工具
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| YAML | YAML | YAML 语法支持 |
微信小程序相关插件
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| 小程序开发助手 | 小程序开发助手 | 微信小程序开发辅助工具，支持智能补全等 |
| wxml | wxml（cnyballk） | 提供格式化和高亮组件功能 |
| wxapp-helper | wxapp-helper（Sean） | 生成页面/组件、模板配置等功能 |
| wechat-snippet | wechat-snippet(ChandZhang) | 从微信官方文档搬运的代码片段 |
| vscode wxml | vscode wxml(codefee) | VSCode 中的 wxml 语法支持及代码片段 |
| vscode weapp api | vscode weapp api(codefee) | 微信小程序 API 提示及代码片段 |
uniapp 相关插件
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| uni-ui-snippets | uni-ui-snippets | uni-ui 组件库的代码片段 |
| uni-highlight | uni-highlight | 对条件编译的代码注释部分提供了语法高亮 |
| uni-helper | uni-helper | uni-app 代码片段 |
| uni-create-view | uni-create-view | uni-app 创建页面代码片段 |
| uni-cloud-snippets | uni-cloud-snippets | uni-app 云函数代码片段 |
| uni-app-snippets | uni-app-snippets | uni-app 代码片段 |
| uni-app-schemas | uni-app-schemas | 校验 uni-app 中的 androidPrivacy.json、pages.json 和 manifest.json 格式 |
Flutter 相关插件
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| Awesome Flutter Snippets | Awesome Flutter Snippets | 包含常用 Flutter 类和方法的代码片段集合 |
| Dart | Dart | Visual Studio Code 的 Dart 语言支持和调试器 |
| Dart Data Class Generator | Dart Data Class Generator | 轻松、快速地创建 dart 数据类，无需编写样板或运行代码生成 |
| Flutter | Flutter | Visual Studio Code 的 Flutter 支持和调试器 |
| Flutter Color | Flutter Color | 帮助您轻松可视化颜色的插件 |
| Flutter GetX Generator - 猫哥 | Flutter GetX Generator - 猫哥 | GetX 项目代码生成工具 |
| Flutter Widget Snippets | Flutter Widget Snippets | 日常 Flutter 开发中有用的小部件片段集合 |
| Json to Dart Model | Json to Dart Model | 将 Json 转换为 Dart 模型类的扩展 |
Markdown 相关插件
| 名字 | 插件 ID | 插件描述 |
|---|---|---|
| Markdown All in One | Markdown All in One | 撰写 Markdown 所需的一切 |
| Markdown Preview Enhanced | Markdown Preview Enhanced | Markdown Preview Enhanced 移植到 VSCode |