# 强烈推荐前端要安装的vscode扩展

用好了 `vscode` 扩展，可以大大提高我们的开发效率。

以下均为我个人搜集，非常好用的扩展，推荐给大家。

## Auto Rename Tag

[说明文档](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

当您重命名一个 `HTML/XML` 标记时，自动重命名配对的 `HTML/XML` 标记

在 `vscode` 快速打开 `Ctrl + P`, 粘贴以下命令， 按回车键快捷安装

```shell
ext install formulahendry.auto-rename-tag
```

![Auto\_Rename\_Tag](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Auto_Rename_Tag.gif)

## Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

[说明文档](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans)

中文（简体）语言包为 `VS Code` 提供本地化的用户界面体验

```shell
ext install MS-CEINTL.vscode-language-pack-zh-hans
```

## Code Runner

[说明文档](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)

运行多种语言的代码片段或代码文件：`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` 和自定义命令

```shell
ext install formulahendry.code-runner
```

![Code\_Runner](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Code_Runner.gif)

## Code Spell Checker

[说明文档](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

一个基本的拼写检查器，可以很好地处理代码和文档定义命令。这个拼写检查器的目标是帮助捕捉常见的拼写错误，同时尽量减少误报的数量

```shell
ext install streetsidesoftware.code-spell-checker
```

![Code\_Spell\_Checker](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Code_Spell_Checker.gif)

## Color Highlight

[说明文档](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

以为您文档中发现的 `CSS/Web` 颜色样式进行样式化

```shell
ext install naumovs.color-highlight
```

## Console Ninja

[说明文档](https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja)

`Console Ninja` 是一个 `VS Code` 扩展，可以直接在您的编辑器中显示 `console.log` 输出和运行时错误，这些错误来自您正在运行的浏览器或节点应用程序。它就像您的浏览器开发工具控制台选项卡或来自节点应用程序的终端输出，但不同的是，您无需切换上下文，值与您的代码连接，并以符合人体工程学的方式显示在您的编辑器中

```shell
ext install WallabyJs.console-ninja
```

![Console\_Ninja](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Console_Ninja.gif)

## CSS Navigation

[说明文档](https://marketplace.visualstudio.com/items?itemName=pucelle.vscode-css-navigation)

快速定位，从 `HTML` 跳转到 `CSS` / `Sass` / `Less` 的定义，为类和 `ID` 名称提供完成和工作区符号，支持从 `CSS` 到 `HTML` 的查找引用

```shell
ext install pucelle.vscode-css-navigation
```

![CSS\_Navigation](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/CSS_Navigation.gif)

## Error Lens

[说明文档](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

`ErrorLens` 通过突出显示更显著地突出语言诊断功能，突出显示语言生成的每个诊断的整行，并在内联中打印消息，从而增强了语言诊断功能

```shell
ext install usernamehw.errorlens
```

![Error\_Lens](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Error_Lens.png)

## ESLint

[说明文档](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

将 `ESLint` 集成到 `VS Code` 中

扩展程序使用已安装在打开的工作区文件夹中的 `ESLint` 库。如果该文件夹没有提供 `ESLint` 库，则扩展程序会寻找全局安装版本。如果您尚未在本地或全局安装 `ESLint`，请在工作区文件夹中运行 `npm install eslint` 进行本地安装，或者 `npm install -g eslint` 进行全局安装

在新文件夹上，您可能还需要创建一个 `.eslintrc` 配置文件。您可以通过使用 `VS Code` 命令 `Create ESLint configuration` 或在终端中使用 `npx eslint --init` 运行 `eslint` 命令来完成这个操作

```shell
ext install dbaeumer.vscode-eslint
```

## File Nesting Updater

[说明文档](https://marketplace.visualstudio.com/items?itemName=antfu.file-nesting)

`vscode-file-nesting-config` 的自动更新程序。使用 `VS Code` 的文件嵌套功能来使您的文件树更加清晰的配置

```shell
ext install antfu.file-nesting
```

![File\_Nesting\_Updater](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/File_Nesting_Updater.png)

## Git Graph

[说明文档](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

查看您存储库的 `Git` 图表，并从图表中轻松执行 `Git` 操作。可配置为按您的喜好显示！

```shell
ext install mhutchie.git-graph
```

![Git\_Graph](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Git_Graph.gif)

## GitLens — Git supercharged

[说明文档](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

`GitLens` 在 `VS Code` 中增强了您的 `Git` 使用体验。保持专注至关重要，额外花费的时间在上下文切换或缺少上下文会打断您的工作流程。`GitLens` 是让 `Git` 为您服务的终极工具，旨在通过一套强大的工具集提高专注力、生产力和协作能力，帮助您和您的团队更好地理解、编写和审查代码

```shell
ext install eamodio.gitlens
```

![GitLens\_Git\_1](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/GitLens_Git_1.png)

![GitLens\_Git\_2](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/GitLens_Git_2.png)

## i18n Ally

[说明文档](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally)

国际化 `（i18n）`

```shell
ext install Lokalise.i18n-ally
```

![i18n\_Ally](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/i18n_Ally.gif)

## Iconify IntelliSense

[说明文档](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)

* 内联显示相应的图标
* 自动完成图标集
* 悬浮
* 片段

```shell
ext install antfu.iconify
```

![Iconify\_IntelliSense](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Iconify_IntelliSense.png)

## Image preview

[说明文档](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)

显示在装订线处的图像预览，并在悬停时显示

```shell
ext install kisstkondoros.vscode-gutter-preview
```

![Image\_preview](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Image_preview.png)

## Import Cost

[说明文档](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

此扩展将在编辑器中内联显示导入包的大小。该扩展利用 webpack 来检测导入的大小

```shell
ext install wix.vscode-import-cost
```

## Live Server

[说明文档](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

启动具有静态页面和动态页面实时重新加载功能的本地开发服务器

```shell
ext install ritwickdey.LiveServer
```

![Live\_Server](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Live_Server.gif)

## Markdown Preview Enhanced

[说明文档](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)

`Markdown` 预览增强是一个扩展程序，为您提供许多有用的功能，如自动滚动同步、数学排版、美人鱼图、`PlantUML`、`pandoc`、`PDF` 导出、代码块、演示文稿编写等。它的许多想法受到 `Markdown` 预览加和 `RStudio Markdown` 的启发

```shell
ext install shd101wyy.markdown-preview-enhanced
```

![Markdown\_Preview\_Enhanced](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Markdown_Preview_Enhanced.png)

## Markmap

[说明文档](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode)

这个扩展将 `markmap` 集成到 `VSCode` 中

```shell
ext install gera2ld.markmap-vscode
```

![Markmap](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Markmap.png)

## Prettier - Code formatter

[说明文档](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

`Prettier` 是一个有主观性的代码格式化工具。它通过解析你的代码并根据自己的规则重新打印代码来强制执行一致的风格，这些规则考虑了最大行长度，并在必要时换行代码

```shell
ext install esbenp.prettier-vscode
```

## Project Manager

[说明文档](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

它帮助您轻松访问您的项目，无论它们位于何处。您可以定义自己的项目（也称为收藏夹），或选择自动检测 `Git`、`Mercurial` 或 `SVN` 仓库、`VSCode` 文件夹或任何其他文件夹

```shell
ext install alefragnani.project-manager
```

## px to rem & rpx & vw (cssrem)

[说明文档](https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem)

在 `VSCode` 中在 `px` 和 `rem` 单位之间转换，并支持 `WXSS`

```shell
ext install cipchk.cssrem
```

## Stylelint

[说明文档](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)

官方的 `Visual Studio Code` 插件，用于 `Stylelint`

```shell
ext install stylelint.vscode-stylelint
```

![Stylelint](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Stylelint.png)

## Todo Tree

[说明文档](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

此扩展快速搜索（使用 `ripgrep`）您的工作区以查找诸如 `TODO` 和 `FIXME` 等注释标记，并在活动栏中的树视图中显示它们。该视图可以从活动栏拖出到资源管理器窗格（或任何您希望它在的其他位置）

```shell
ext install Gruntfuggly.todo-tree
```

![Todo\_Tree](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/Todo_Tree.png)

## TONGYI Lingma

[说明文档](https://marketplace.visualstudio.com/items?itemName=Alibaba-Cloud.tongyi-lingma)

通义灵码，是一款基于通义大模型的智能编码辅助工具，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力，并针对阿里云 `SDK/API` 的使用场景调优，为开发者带来高效、流畅的编码体验。

```shell
ext install Alibaba-Cloud.tongyi-lingma
```

![TONGYI\_Lingma](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/TONGYI_Lingma.avif)

## tree-extended

[说明文档](https://marketplace.visualstudio.com/items?itemName=rulyotano.tree-extended)

只需右键单击工作空间中的任何目录，然后选择 `Get tree representation` 菜单项, 生成 `.tree` 个文件

```shell
ext install rulyotano.tree-extended
```

## uni-app-schemas

[说明文档](https://marketplace.visualstudio.com/items?itemName=uni-helper.uni-app-schemas-vscode)

校验 `uni-app` 中的 `androidPrivacy.json`、`pages.json` 和 `manifest.json` 格式

```shell
ext install uni-helper.uni-app-schemas-vscode
```

## uni-app-snippets

[说明文档](https://marketplace.visualstudio.com/items?itemName=uni-helper.uni-app-snippets-vscode)

* `uni-app` 基本能力代码片段
* 参考 [uni-app 官方组件文档](https://uniapp.dcloud.net.cn/component/)
* 参考 [Vue.js 2 风格指南](https://v2.cn.vuejs.org/v2/style-guide/) 和 [Vue.js 3 风格指南](https://cn.vuejs.org/style-guide/)

```shell
ext install uni-helper.uni-app-snippets-vscode
```

## uni-cloud-snippets

[说明文档](https://marketplace.visualstudio.com/items?itemName=uni-helper.uni-cloud-snippets-vscode)

* `uni-cloud` 基本能力代码片段
* 参考 [uni-cloud 官方文档](https://doc.dcloud.net.cn/uniCloud/)
* 参考 [Vue.js 2 风格指南](https://v2.cn.vuejs.org/v2/style-guide/) 和 [Vue.js 3 风格指南](https://cn.vuejs.org/style-guide/)

```shell
ext install uni-helper.uni-cloud-snippets-vscode
```

## uni-create-view

[说明文档](https://marketplace.visualstudio.com/items?itemName=mrmaoddxxaa.create-uniapp-view)

* 📁 创建页面、分包页面，自动查找根目录下 `pages.json` 文件并写入
* 📦 可深度目录创建，写入 `pages.json` 后仍可保留注释
* ✨ 可配置 `vue(2|3)`| `composition-api` | `setup` 组件、页面模板
* 👕 可配置 `scss` | `less` | `stylus` | `sass` 预编辑器类型
* 🦾 `typescript` 为默认开发语言（可在设置中关闭）

```shell
ext install mrmaoddxxaa.create-uniapp-view
```

![uni-create-view](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/uni-create-view.gif)

## uni-helper

[说明文档](https://marketplace.visualstudio.com/items?itemName=uni-helper.uni-helper-vscode)

本插件实际上是以下几个插件的扩展包。

* `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` 中对条件编译的代码注释部分提供了语法高亮

```shell
ext install uni-helper.uni-helper-vscode
```

## uni-highlight

[说明文档](https://marketplace.visualstudio.com/items?itemName=uni-helper.uni-highlight-vscode)

在 `VS Code`中对条件编译的代码注释部分提供了语法高亮和折叠功能，可分辨出写法是否正确，使得代码更加清晰

```shell
ext install uni-helper.uni-highlight-vscode
```

## uni-ui-snippets

[说明文档](https://marketplace.visualstudio.com/items?itemName=uni-helper.uni-ui-snippets-vscode)

* `uni-ui` 基本能力代码片段
* 参考 [uni-ui 官方组件文档](https://github.com/dcloudio/uni-ui#readme)
* 参考 [Vue.js 2 风格指南](https://v2.cn.vuejs.org/v2/style-guide/) 和 [Vue.js 3 风格指南](https://cn.vuejs.org/style-guide/)

```shell
ext install uni-helper.uni-ui-snippets-vscode
```

## uniapp小程序扩展

[说明文档](https://marketplace.visualstudio.com/items?itemName=evils.uniapp-vscode)

一个灵活、好用、持续维护的 `uniapp` 小程序拓展

```shell
ext install evils.uniapp-vscode
```

![uniapp小程序扩展](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/uniapp小程序扩展.gif)

## UnoCSS

[说明文档](https://marketplace.visualstudio.com/items?itemName=antfu.unocss)

* 装饰和工具提示用于匹配的实用程序
* 自动加载配置文件
* 匹配实用工具的数量

```shell
ext install antfu.unocss
```

## Vetur

[说明文档](https://marketplace.visualstudio.com/items?itemName=octref.vetur)

`VS Code` 的 `Vue` 工具集

```shell
ext install octref.vetur
```

## vscode-icons

[说明文档](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

将真实的图标引入到您的 `Visual Studio Code` 中

```shell
ext install vscode-icons-team.vscode-icons
```

![vscode-icons](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/vscode-icons.gif)

## Vue - Official

[说明文档](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

`Vue` 官方推荐扩展

```shell
ext install Vue.volar
```

## WakaTime

[说明文档](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)

`WakaTime` 是一个开源的 `VS Code` 插件，可以根据您的编程活动自动生成度量、洞察和时间跟踪

```shell
ext install WakaTime.vscode-wakatime
```

![WakaTime](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/WakaTime.png)

## WXML - Language Service

[说明文档](https://marketplace.visualstudio.com/items?itemName=qiu8310.minapp-vscode)

* 一键创建小程序组件
* 标签名与属性自动补全
* 根据组件已有的属性，自动筛选出对应支持的属性集合
* 属性值自动补全
* 点击模板文件中的函数或属性跳转到 `js/ts` 定义的地方（纯 `wxml` 或 `pug` 文件才支持，`vue` 文件不完全支持）
* 样式名自动补全（纯 `wxml` 或 `pug` 文件才支持，`vue` 文件不完全支持）
* 在 `vue` 模板文件中也能自动补全，同时支持 `pug` 语言
* 支持 `link`（纯 `wxml` 或 `pug` 文件才支持，`vue` 文件不支持）
* 自定义组件自动补全（纯 `wxml` 文件才支持，`vue` 或 `pug` 文件不支持）
* 模板文件中 `js` 变量高亮（纯 `wxml` 或 `pug` 文件才支持，`vue` 文件不支持）
* 内置 `snippets` 内置代码片段
* 支持 `emmet` 写法
* `wxml` 格式化

```shell
ext install qiu8310.minapp-vscode
```

![WXML\_Language\_Service\_1](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/WXML_Language_Service_1.gif)

![WXML\_Language\_Service\_2](https://github.com/ougege/blog/blob/master/Images/Essay/强烈推荐前端要安装的vscode扩展/WXML_Language_Service_2.gif)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ougege.gitbook.io/blog/docs/articles/essay/qiang-lie-tui-jian-qian-duan-yao-an-zhuang-de-vscode-kuo-zhan.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.