编辑器插件推荐

我的全部插件如下，可以复制保存为extensions.json，也可以点击下载，放到任何一个项目的.vscode文件夹下即可自动提示安装这些插件。

{% hideToggle extensions.json,bg,color %}

[
  {
    "metadata": {
      "id": "d3836729-9cc1-42c1-b2af-d50071f57d29",
      "publisherId": "formulahendry.auto-close-tag",
      "publisherDisplayName": "formulahendry"
    },
    "name": "auto-close-tag",
    "publisher": "formulahendry",
    "version": "0.5.13"
  },
  {
    "metadata": {
      "id": "6e440e71-8ed9-4f25-bb78-4b13096b8a03",
      "publisherId": "formulahendry.auto-rename-tag",
      "publisherDisplayName": "formulahendry"
    },
    "name": "auto-rename-tag",
    "publisher": "formulahendry",
    "version": "0.1.9"
  },
  {
    "metadata": {
      "id": "5a6e2b21-1d61-4acd-b31b-907f9c23f18a",
      "publisherId": "CoenraadS.bracket-pair-colorizer-2",
      "publisherDisplayName": "CoenraadS"
    },
    "name": "bracket-pair-colorizer-2",
    "publisher": "CoenraadS",
    "version": "0.2.2"
  },
  {
    "metadata": {
      "id": "a6a0c5b2-d078-4bf5-a9ee-4e37054414b3",
      "publisherId": "formulahendry.code-runner",
      "publisherDisplayName": "formulahendry"
    },
    "name": "code-runner",
    "publisher": "formulahendry",
    "version": "0.11.6"
  },
  {
    "metadata": {
      "id": "e337c67b-55c2-4fef-8949-eb260e7fb7fd",
      "publisherId": "Shan.code-settings-sync",
      "publisherDisplayName": "Shan"
    },
    "name": "code-settings-sync",
    "publisher": "Shan",
    "version": "3.4.3"
  },
  {
    "metadata": {
      "id": "eaa2127d-cb69-4ab9-8505-a60c9ee5f28b",
      "publisherId": "oderwat.indent-rainbow",
      "publisherDisplayName": "oderwat"
    },
    "name": "indent-rainbow",
    "publisher": "oderwat",
    "version": "8.2.2"
  },
  {
    "metadata": {
      "id": "5db78037-f674-459f-a236-db622c427c5b",
      "publisherId": "PKief.material-icon-theme",
      "publisherDisplayName": "PKief"
    },
    "name": "material-icon-theme",
    "publisher": "PKief",
    "version": "4.11.0"
  },
  {
    "metadata": {
      "id": "26a529c9-2654-4b95-a63f-02f6a52429e6",
      "publisherId": "zhuangtongfa.material-theme",
      "publisherDisplayName": "zhuangtongfa"
    },
    "name": "material-theme",
    "publisher": "zhuangtongfa",
    "version": "3.13.16"
  },
  {
    "metadata": {
      "id": "a41c1549-4053-44d4-bf30-60fc809b4a86",
      "publisherId": "christian-kohler.path-intellisense",
      "publisherDisplayName": "christian-kohler"
    },
    "name": "path-intellisense",
    "publisher": "christian-kohler",
    "version": "2.7.0"
  },
  {
    "metadata": {
      "id": "797a79de-a0fd-4349-9034-bec47be9a941",
      "publisherId": "2gua.rainbow-brackets",
      "publisherDisplayName": "2gua"
    },
    "name": "rainbow-brackets",
    "publisher": "2gua",
    "version": "0.0.6"
  },
  {
    "metadata": {
      "id": "71fb5a1d-a73f-4234-a943-e9b116c28c5f",
      "publisherId": "xuedao.super-translate",
      "publisherDisplayName": "xuedao"
    },
    "name": "super-translate",
    "publisher": "xuedao",
    "version": "1.0.12"
  },
  {
    "metadata": {
      "id": "21b3e09e-b3f7-4e20-9302-50039286650d",
      "publisherId": "mkxml.vscode-filesize",
      "publisherDisplayName": "mkxml"
    },
    "name": "vscode-filesize",
    "publisher": "mkxml",
    "version": "3.1.0"
  }
]

{% endhideToggle %}

下面我简单介绍一下这些插件的用途。

类别	名称	ID(精准搜索)	备注
基本	GitHub Copilot	github.copilot	Github的官方AI智能提示助手，很强大，需要Github Pro才能使用
	GitHub Copilot Labs	github.copilot-labs	更多扩展功能
	ChatGPT	gencay.vscode-chatgpt	非常热门的生成式语言模型
	Bookmarks	alefragnani.bookmarks	添加书签，可以方便对不同项目不同文件进行管理
	Bracket Pair Colorization Toggler	dzhavat.bracket-pair-toggler	彩虹色大括号
	indent-rainbow	oderwat.indent-rainbow	彩虹色空格
	Code Runner	formulahendry.code-runner	直接运行代码片段，支持非常多的常用语言
	ESLint	dbaeumer.vscode-eslint	代码格检查
	Prettier	esbenp.prettier-vscode	代码格式化
	GZip Status	logerfo.gzip-status	状态栏实时显示当前文件大小
	Image preview	kisstkondoros.vscode-gutter-preview	左侧装订线预览图片
	Svg Preview	simonsiefke.svg-preview	对上者的补充
	Open	sandcastle.vscode-open	使用系统默认应用打开文件
	Path Intellisense	christian-kohler.path-intellisense	文件路径智能提示
	Todo Tree	gruntfuggly.todo-tree	列出项目中的所有TODO
主题	Material Icon Theme	pkief.material-icon-theme	项目图标主题
	Material Product Icons	pkief.material-product-icons	编辑器图标主题
	One Dark Vivid Theme	fivepointseven.vscode-theme-onedark-vivid	代码主题
正则	any-rule	russell.any-rule	正则大全，快速生成对应正则的数据
注释	Better Comments	aaron-bond.better-comments	快速生成各类注释，例如 Alerts，Queries， TODOs，Highlights等
	koroFileHeader	obkoro1.korofileheader	一键生成文件头部注释
HTML	Auto Complete Tag	formulahendry.auto-complete-tag	自动生成关闭标签
CSS	colorize	kamikillerto.vscode-colorize	可视化颜色
	Iconify IntelliSense	antfu.iconify	Iconify图标支持和提示
Python	Python	ms-python.python	python语法支持
容器	Dev Containers	ms-vscode-remote.remote-containers	连接并管理Docker 容器内的文件
	Docker	ms-azuretools.vscode-docker	方便的创建、管理和发布Docker应用
	DotENV	mikestead.dotenv	.env文件(环境变量)支持

下面是一些我没有安装，但是也很推荐的插件。

名称	ID(精准搜索)	备注
markdownlint	davidanson.vscode-markdownlint	Markdown/CommonMark语法样式检查
GitLens	eamodio.gitlens	Git可视化
Slidev	antfu.slidev	程序员的slides
Tailwind CSS IntelliSense	bradlc.vscode-tailwindcss	tailwindcss语法支持
UnoCSS	antfu.unocss	UnoCSS语法支持
Volar	vue.vscode-typescript-vue-plugin	Vue语法支持
YAML	redhat.vscode-yaml	YMAL语法支持