强烈推荐前端要安装的vscode扩展
Last updated
Was this helpful?
Last updated
Was this helpful?
用好了 vscode 扩展，可以大大提高我们的开发效率。
以下均为我个人搜集，非常好用的扩展，推荐给大家。
当您重命名一个 HTML/XML 标记时，自动重命名配对的 HTML/XML 标记
在 vscode 快速打开 Ctrl + P, 粘贴以下命令， 按回车键快捷安装
中文（简体）语言包为 VS Code 提供本地化的用户界面体验
运行多种语言的代码片段或代码文件：C、C++、Java、JavaScript、PHP、Python、Perl、Perl 6、Ruby、Go、Lua、Groovy、PowerShell、BAT/CMD、BASH/SH、F# 脚本、F#（.NET Core）、C# 脚本、C#（.NET Core）、VBScript、TypeScript、CoffeeScript、Scala、Swift、Julia、Crystal、OCaml、R、AppleScript、Elixir、Visual Basic .NET、Clojure、Haxe、Objective-C、Rust、Racket、Scheme、AutoHotkey、AutoIt、Kotlin、Dart、Free Pascal、Haskell、Nim、D、Lisp、Kit、V、SCSS、Sass、CUDA、Less、Fortran、Ring、Standard ML、Zig、Mojo、Erlang、SPWN、Pkl、Gleam 和自定义命令
一个基本的拼写检查器，可以很好地处理代码和文档定义命令。这个拼写检查器的目标是帮助捕捉常见的拼写错误，同时尽量减少误报的数量
以为您文档中发现的 CSS/Web 颜色样式进行样式化
Console Ninja 是一个 VS Code 扩展，可以直接在您的编辑器中显示 console.log 输出和运行时错误，这些错误来自您正在运行的浏览器或节点应用程序。它就像您的浏览器开发工具控制台选项卡或来自节点应用程序的终端输出，但不同的是，您无需切换上下文，值与您的代码连接，并以符合人体工程学的方式显示在您的编辑器中
快速定位，从 HTML 跳转到 CSS / Sass / Less 的定义，为类和 ID 名称提供完成和工作区符号，支持从 CSS 到 HTML 的查找引用
ErrorLens 通过突出显示更显著地突出语言诊断功能，突出显示语言生成的每个诊断的整行，并在内联中打印消息，从而增强了语言诊断功能
将 ESLint 集成到 VS Code 中
扩展程序使用已安装在打开的工作区文件夹中的 ESLint 库。如果该文件夹没有提供 ESLint 库，则扩展程序会寻找全局安装版本。如果您尚未在本地或全局安装 ESLint，请在工作区文件夹中运行 npm install eslint 进行本地安装，或者 npm install -g eslint 进行全局安装
在新文件夹上，您可能还需要创建一个 .eslintrc 配置文件。您可以通过使用 VS Code 命令 Create ESLint configuration 或在终端中使用 npx eslint --init 运行 eslint 命令来完成这个操作
vscode-file-nesting-config 的自动更新程序。使用 VS Code 的文件嵌套功能来使您的文件树更加清晰的配置
查看您存储库的 Git 图表，并从图表中轻松执行 Git 操作。可配置为按您的喜好显示！
GitLens 在 VS Code 中增强了您的 Git 使用体验。保持专注至关重要，额外花费的时间在上下文切换或缺少上下文会打断您的工作流程。GitLens 是让 Git 为您服务的终极工具，旨在通过一套强大的工具集提高专注力、生产力和协作能力，帮助您和您的团队更好地理解、编写和审查代码
国际化 （i18n）
内联显示相应的图标
自动完成图标集
悬浮
片段
显示在装订线处的图像预览，并在悬停时显示
此扩展将在编辑器中内联显示导入包的大小。该扩展利用 webpack 来检测导入的大小
启动具有静态页面和动态页面实时重新加载功能的本地开发服务器
Markdown 预览增强是一个扩展程序，为您提供许多有用的功能，如自动滚动同步、数学排版、美人鱼图、PlantUML、pandoc、PDF 导出、代码块、演示文稿编写等。它的许多想法受到 Markdown 预览加和 RStudio Markdown 的启发
这个扩展将 markmap 集成到 VSCode 中
Prettier 是一个有主观性的代码格式化工具。它通过解析你的代码并根据自己的规则重新打印代码来强制执行一致的风格，这些规则考虑了最大行长度，并在必要时换行代码
它帮助您轻松访问您的项目，无论它们位于何处。您可以定义自己的项目（也称为收藏夹），或选择自动检测 Git、Mercurial 或 SVN 仓库、VSCode 文件夹或任何其他文件夹
在 VSCode 中在 px 和 rem 单位之间转换，并支持 WXSS
官方的 Visual Studio Code 插件，用于 Stylelint
此扩展快速搜索（使用 ripgrep）您的工作区以查找诸如 TODO 和 FIXME 等注释标记，并在活动栏中的树视图中显示它们。该视图可以从活动栏拖出到资源管理器窗格（或任何您希望它在的其他位置）
通义灵码，是一款基于通义大模型的智能编码辅助工具，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力，并针对阿里云 SDK/API 的使用场景调优，为开发者带来高效、流畅的编码体验。
只需右键单击工作空间中的任何目录，然后选择 Get tree representation 菜单项, 生成 .tree 个文件
校验 uni-app 中的 androidPrivacy.json、pages.json 和 manifest.json 格式
uni-app 基本能力代码片段
uni-cloud 基本能力代码片段
📁 创建页面、分包页面，自动查找根目录下 pages.json 文件并写入
📦 可深度目录创建，写入 pages.json 后仍可保留注释
✨ 可配置 vue(2|3)| composition-api | setup 组件、页面模板
👕 可配置 scss | less | stylus | sass 预编辑器类型
🦾 typescript 为默认开发语言（可在设置中关闭）
本插件实际上是以下几个插件的扩展包。
uni-app-schemas - 校验 uni-app 中的 androidPrivacy.json、pages.json 和 manifest.json格式，也可以直接在对应的文件中添加 $schema 来使用对应的 schema 文件
uni-app-snippets - 提供 uni-app 基本能力代码片段
uni-cloud-snippets - 提供 uni-cloud 基本能力代码片段
uni-ui-snippets - 提供 uni-ui 基本能力代码片段
uni-highlight - 在 VSCode 中对条件编译的代码注释部分提供了语法高亮
在 VS Code中对条件编译的代码注释部分提供了语法高亮和折叠功能，可分辨出写法是否正确，使得代码更加清晰
uni-ui 基本能力代码片段
一个灵活、好用、持续维护的 uniapp 小程序拓展
装饰和工具提示用于匹配的实用程序
自动加载配置文件
匹配实用工具的数量
VS Code 的 Vue 工具集
将真实的图标引入到您的 Visual Studio Code 中
Vue 官方推荐扩展
WakaTime 是一个开源的 VS Code 插件，可以根据您的编程活动自动生成度量、洞察和时间跟踪
一键创建小程序组件
标签名与属性自动补全
根据组件已有的属性，自动筛选出对应支持的属性集合
属性值自动补全
点击模板文件中的函数或属性跳转到 js/ts 定义的地方（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）
样式名自动补全（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）
在 vue 模板文件中也能自动补全，同时支持 pug 语言
支持 link（纯 wxml 或 pug 文件才支持，vue 文件不支持）
自定义组件自动补全（纯 wxml 文件才支持，vue 或 pug 文件不支持）
模板文件中 js 变量高亮（纯 wxml 或 pug 文件才支持，vue 文件不支持）
内置 snippets 内置代码片段
支持 emmet 写法
wxml 格式化
参考
参考 和
参考
参考 和
参考
参考 和
