VS Code编辑器插件推荐

2023年10月26日 · 890 字 · 2 分钟 · IDE 推荐

我的全部插件如下，可以复制保存为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 Copilotgithub.copilotGithub的官方AI智能提示助手，很强大，需要Github Pro才能使用
GitHub Copilot Labsgithub.copilot-labs更多扩展功能
ChatGPTgencay.vscode-chatgpt非常热门的生成式语言模型
Bookmarksalefragnani.bookmarks添加书签，可以方便对不同项目不同文件进行管理
Bracket Pair Colorization Togglerdzhavat.bracket-pair-toggler彩虹色大括号
indent-rainbowoderwat.indent-rainbow彩虹色空格
Code Runnerformulahendry.code-runner直接运行代码片段，支持非常多的常用语言
ESLintdbaeumer.vscode-eslint代码格检查
Prettieresbenp.prettier-vscode代码格式化
GZip Statuslogerfo.gzip-status状态栏实时显示当前文件大小
Image previewkisstkondoros.vscode-gutter-preview左侧装订线预览图片
Svg Previewsimonsiefke.svg-preview对上者的补充
Opensandcastle.vscode-open使用系统默认应用打开文件
Path Intellisensechristian-kohler.path-intellisense文件路径智能提示
Todo Treegruntfuggly.todo-tree列出项目中的所有TODO
主题Material Icon Themepkief.material-icon-theme项目图标主题
Material Product Iconspkief.material-product-icons编辑器图标主题
One Dark Vivid Themefivepointseven.vscode-theme-onedark-vivid代码主题
正则any-rulerussell.any-rule正则大全，快速生成对应正则的数据
注释Better Commentsaaron-bond.better-comments快速生成各类注释，例如 Alerts，Queries， TODOs，Highlights等
koroFileHeaderobkoro1.korofileheader一键生成文件头部注释
HTMLAuto Complete Tagformulahendry.auto-complete-tag自动生成关闭标签
CSScolorizekamikillerto.vscode-colorize可视化颜色
Iconify IntelliSenseantfu.iconifyIconify图标支持和提示
PythonPythonms-python.pythonpython语法支持
容器Dev Containersms-vscode-remote.remote-containers连接并管理Docker 容器内的文件
Dockerms-azuretools.vscode-docker方便的创建、管理和发布Docker应用
DotENVmikestead.dotenv.env文件(环境变量)支持

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

名称ID(精准搜索)备注
markdownlintdavidanson.vscode-markdownlintMarkdown/CommonMark语法样式检查
GitLenseamodio.gitlensGit可视化
Slidevantfu.slidev程序员的slides
Tailwind CSS IntelliSensebradlc.vscode-tailwindcsstailwindcss语法支持
UnoCSSantfu.unocssUnoCSS语法支持
Volarvue.vscode-typescript-vue-pluginVue语法支持
YAMLredhat.vscode-yamlYMAL语法支持