一、基础的

Auto Rename Tag⭐

插件地址

Auto Rename Tag

修改标签会同步修改

Code Runner⭐

插件地址

Code Runner

快速运行 调试js

CSS Peek

插件地址

CSS Peek1

CSS Peek2

跳转对应 css

DotENV

插件地址

DotENV

高亮ENV文件

Error Lens⭐

插件地址

Error Lens

实时显示错误

ESLint

插件地址

GitLens — Git supercharged⭐

插件地址

image-20230104135949372

git相关操作,git 相关在每行代码查看代码是谁修改的
现在已经收费,不过对于个人开放的仓库不会影响使用

jsdoc

插件地址

image-20230104140038243

快速生成函数注释

open in browser

插件地址

image-20230104140224748

CTRL + B 快捷键在浏览器打开

Path Intellisense⭐

插件地址

image-20230104140257877

智能路径引入

Prettier - Code formatter

插件地址

Perttier

Smart Click

插件地址

image-20230104140336602

双击标签,选中标签包裹的内容

GitHub Copilot⭐⭐

插件地址

Copilot

在编写代码时提供智能的自动完成和代码建议, 提效神器

Turbo Console Log

插件地址

image-20230104140506060

快速高效的Console Log

vscode extension for ECharts

插件地址

image-20230104140608693

智能提示 echarts 的 options

i18n Ally⭐

插件地址

image-20230105102945850

i18n 插件,实时预览,非常的好用,

记得在 settings.json 中配置下面的代码

{
  "i18n-ally.localesPaths": "locales",
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sortKeys": true,
  "i18n-ally.namespace": true,
  "i18n-ally.enabledParsers": ["yaml", "js"],
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.displayLanguage": "zh-CN",
  "i18n-ally.enabledFrameworks": ["vue"],
}

Tailwind CSS IntelliSense⭐

插件地址

下载Tailwind CSS

Tailwind CSS效果

智能提示 Tailwind CSS语法

vue-helper

插件地址
image-20230107085841024

Vue2 组件跳转源码 包括 Element-UI 和 vux 和 iView,也可以比如输入el-table,可以生成一个骨架

JSON to TS

插件地址

image-20230107144600771

Json数据一键转Ts

二、Vue相关的

Vue - Official ⭐⭐⭐

插件地址

Vue-Official

Volar 正式升级更名为 Vue-Official !
不需要安装VolarTypeScript Vue Plugin (Volar),安装这一个插件即可

Vue Language Features (Volar)⭐⭐⭐

image-20230104141249104

被 Vue - Official 取代
vue项目必开插件
注意!!!VuterVolar 两个插件不可以共同使用,否则会冲突报错!!!,现在不管是vue2 还是 vue3 都使用这个插件

TypeScript Vue Plugin (Volar)

插件地址

image-20230104141445500

被 Vue - Official 取代
Vue3项目使用的插件

Vue 3 Snippets

插件地址

image-20230104140836503

这个插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets(代码片段)。

Vue VSCode Snippets

插件地址

image-20230104140944234

也是一个vue的代码片段

vue-component

插件地址

vue-component

智能引入自己写的组件 + 跳转组件 >>> 详情去看官方说明

三、美化

Material Icon Theme⭐

插件地址

Material Icon Theme

文件图标美化

Vitesse Theme⭐⭐⭐

插件地址

Vitesse Theme
效果展示
Vitesse
Vitesse Dark

推荐使用 Vitesse Dark Soft

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐