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

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

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

Auto Rename Tag

说明文档

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

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

ext install formulahendry.auto-rename-tag
Auto_Rename_Tag

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

说明文档

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

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

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 和自定义命令

ext install formulahendry.code-runner
Code_Runner

Code Spell Checker

说明文档

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

ext install streetsidesoftware.code-spell-checker
Code_Spell_Checker

Color Highlight

说明文档

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

ext install naumovs.color-highlight

Console Ninja

说明文档

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

ext install WallabyJs.console-ninja
Console_Ninja

CSS Navigation

说明文档

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

ext install pucelle.vscode-css-navigation
CSS_Navigation

Error Lens

说明文档

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

ext install usernamehw.errorlens
Error_Lens

ESLint

说明文档

将 ESLint 集成到 VS Code 中

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

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

ext install dbaeumer.vscode-eslint

File Nesting Updater

说明文档

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

ext install antfu.file-nesting
File_Nesting_Updater

Git Graph

说明文档

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

ext install mhutchie.git-graph
Git_Graph

GitLens — Git supercharged

说明文档

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

ext install eamodio.gitlens
GitLens_Git_1
GitLens_Git_2

i18n Ally

说明文档

国际化 （i18n）

ext install Lokalise.i18n-ally
i18n_Ally

Iconify IntelliSense

说明文档

  • 内联显示相应的图标

  • 自动完成图标集

  • 悬浮

  • 片段

ext install antfu.iconify
Iconify_IntelliSense

Image preview

说明文档

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

ext install kisstkondoros.vscode-gutter-preview
Image_preview

Import Cost

说明文档

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

ext install wix.vscode-import-cost

Live Server

说明文档

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

ext install ritwickdey.LiveServer
Live_Server

Markdown Preview Enhanced

说明文档

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

ext install shd101wyy.markdown-preview-enhanced
Markdown_Preview_Enhanced

Markmap

说明文档

这个扩展将 markmap 集成到 VSCode 中

ext install gera2ld.markmap-vscode
Markmap

Prettier - Code formatter

说明文档

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

ext install esbenp.prettier-vscode

Project Manager

说明文档

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

ext install alefragnani.project-manager

px to rem & rpx & vw (cssrem)

说明文档

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

ext install cipchk.cssrem

Stylelint

说明文档

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

ext install stylelint.vscode-stylelint
Stylelint

Todo Tree

说明文档

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

ext install Gruntfuggly.todo-tree
Todo_Tree

TONGYI Lingma

说明文档

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

ext install Alibaba-Cloud.tongyi-lingma
TONGYI_Lingma

tree-extended

说明文档

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

ext install rulyotano.tree-extended

uni-app-schemas

说明文档

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

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

uni-app-snippets

说明文档

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

uni-cloud-snippets

说明文档

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

uni-create-view

说明文档

  • 📁 创建页面、分包页面，自动查找根目录下 pages.json 文件并写入

  • 📦 可深度目录创建，写入 pages.json 后仍可保留注释

  • ✨ 可配置 vue(2|3)| composition-api | setup 组件、页面模板

  • 👕 可配置 scss | less | stylus | sass 预编辑器类型

  • 🦾 typescript 为默认开发语言（可在设置中关闭）

ext install mrmaoddxxaa.create-uniapp-view
uni-create-view

uni-helper

说明文档

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

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

ext install uni-helper.uni-helper-vscode

uni-highlight

说明文档

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

ext install uni-helper.uni-highlight-vscode

uni-ui-snippets

说明文档

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

uniapp小程序扩展

说明文档

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

ext install evils.uniapp-vscode
uniapp小程序扩展

UnoCSS

说明文档

  • 装饰和工具提示用于匹配的实用程序

  • 自动加载配置文件

  • 匹配实用工具的数量

ext install antfu.unocss

Vetur

说明文档

VS Code 的 Vue 工具集

ext install octref.vetur

vscode-icons

说明文档

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

ext install vscode-icons-team.vscode-icons
vscode-icons

Vue - Official

说明文档

Vue 官方推荐扩展

ext install Vue.volar

WakaTime

说明文档

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

ext install WakaTime.vscode-wakatime
WakaTime

WXML - Language Service

说明文档

  • 一键创建小程序组件

  • 标签名与属性自动补全

  • 根据组件已有的属性，自动筛选出对应支持的属性集合

  • 属性值自动补全

  • 点击模板文件中的函数或属性跳转到 js/ts 定义的地方（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）

  • 样式名自动补全（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）

  • 在 vue 模板文件中也能自动补全，同时支持 pug 语言

  • 支持 link（纯 wxml 或 pug 文件才支持，vue 文件不支持）

  • 自定义组件自动补全（纯 wxml 文件才支持，vue 或 pug 文件不支持）

  • 模板文件中 js 变量高亮（纯 wxml 或 pug 文件才支持，vue 文件不支持）

  • 内置 snippets 内置代码片段

  • 支持 emmet 写法

  • wxml 格式化

ext install qiu8310.minapp-vscode
WXML_Language_Service_1
WXML_Language_Service_2
Previous常用Markdown数学公式语法Next新建销售计划-页面卡死问题分析

Last updated

Was this helpful?