VSCode插件_好用的插件推荐

系列文章 - 开发工具系列

Visual Studio Code(简称：VS Code) 作为前端同学常用的代码编辑器，不仅开源、免费、颜值高，而且还有丰富的插件。

---

---

一、代码助手

Chinese （简体中文语言包） ⭐

’ Ctrl+Shift+P ‘ 组合键以显示“命令面板 粘贴 ‘ Configure Display Language ’ 选择语言。

vetur ⭐

Vetur插件的目标是为 Vue.js 开发者提供一套强大的代码工具，以便获取更轻松地开发、调试和维护 Vue.js 应用程序。
插件功能：1、 语法高亮。2、 智能代码补全。3、 代码片段。4、 代码格式化。5、 语法检查等

ESLint ⭐

用于 JavaScript/TypeScript 代码的语法检查和代码格式化。
1、在插件市场找到 ESLint 插件并安装。

2、设置图标 –> 设置（或者文件 –> 首选项 –> 设置），查询 ‘ formatter ’ 勾选下面选项。

3、设置图标 –> 设置（或者文件 –> 首选项–>设置），查询 ‘ ESLint ’ 勾选下面选项。

4、设置图标 –> 设置（或者文件 –> 首选项–>设置），查询 ‘ save ’ 勾选下面选项。

5、.在项目根目录中创建 eslintrc.js 文件

Prettier - Code formatter（Prettier - 代码格式化）⭐

点击左下角的设置，搜索 ‘ settings ’。

点击左下角的设置，搜索 ‘ settings ’ 在界面输入以下代码
这样我们就可以使用 alt+shift+f 组合键来快速格式化在 VS Code 中的代码了。

/*  prettier的配置 */
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 4, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "prettier.tslintIntegration": false,
    "terminal.integrated.allowMnemonics": true,
    "terminal.integrated.automationShell.linux": "" // 不让prettier使用tslint的代码格式进行校验
///报错的话，检查一下有没有用逗号与上一项设置分隔

驼峰翻译助

i18n Ally ⭐

i18n-ally 是一个为 VS Code 设计的国际化项目时的扩展插件，旨在简化前端项目的国际化流程。
它支持多种框架和库，如 Vue、React、Angular 等，并提供了强大的机器翻译功能和便捷的自动化翻译管理界面。
安装好插件之后，选择需要翻译的内容，按快捷键就可以调出上面的翻译内容，选择你需要的就行了。
win：’ win+shoft+t ‘ ，mac：‘ cmd+shift+t ’

Vue Language Features (Volar)（vue语言功能volar）

VueLF 是一个专门为 Vue 3 构建的语言支持插件。它基于@vue/reactivity按需计算一切，实现原生 TypeScript 语言服务级别的性能。

Vue VSCode Snippets / Vue 3 Snippets （快速生成vue模板插件）

快速生成 Vue 项目的各种模板，包括 Vue 组件、Template、Script、Composition API、Vuex 状态管理、Vue Router 路由配置、Vue 配置项以及 Nuxt 的页面和配置等。

Auto Close Tag（自动闭合标签） ⭐

Auto Close Tag 插件的核心功能是自动添加关闭标签。它通过监听用户的输入，当检测到打开标签的结束括号时，自动插入相应的关闭标签。此外，插件还支持手动添加关闭标签，以及自定义不自动关闭的标签列表。

Auto Rename Tag（自动重命名标签）⭐

开发者在使用 HTML 或 JSX 时自动重命名配对的标签。当您修改一个标签的开始标签时，该插件会自动更新对应的结束标签，从而提高编码效率并减少错误。

Bracket Pair Colorizer 2 （括号对色）⭐

用于为匹配括号着色的可定制扩展，v2 使用与 VSCode 相同的括号解析引擎，大大提高了速度和准确性。因为清理了设置，打破了向后兼容性，所以发布了一个新版本。

Code Runner（代码运行器）

运行代码：
1、使用快捷方式 Ctrl+Alt+N
2、或者按F1后选择/输入Run Code
3、或右键点击文本编辑器，然后单击 Run Code 编辑器上下文菜单
4、或单击 Run Code 编辑器标题菜单中的按钮
5、或者单击 Run Code 文件资源管理器上下文菜单中的按钮
停止正在运行的代码：
1、使用快捷键 Ctrl+Alt+M
2、或者按F1后选择/输入Stop Code Run
3、或单击 Stop Code Run 编辑器标题菜单中的按钮
4、或者右键单击输出通道，然后单击 Stop Code Run上下文菜单

Code Spell Checker（代码拼写检查器）

Code Spell Checker 能够帮助我们检查单词拼写是否出现错误，检查的规则遵循 camelCase （驼峰拼写法）。

Color Highlight（颜色高亮）⭐

Color Highlight 是一个强大的 Sublime Text 插件，它能够自动识别并高亮显示各种格式的颜色代码，包括 CSS3 颜色名称、十六进制、RGB、HSL、HSV、HWB、CIELAB 等多种格式。更重要的是，它不仅会在编辑器中以背景色的形式展示这些颜色，还会在侧边栏中显示对应的颜色图标，让你一眼就能确认颜色是否正确。

Turbo Console Log（Turbo控制台日志）

Turbo Console Log是一款专为 JavaScript 开发者设计的智能日志插入插件。
Ctrl + Alt + l 选中变量之后，使这个变量快捷生成 console.log()
Alt + Shift + c 注释所有的 console.log()
Alt + Shift + u 启用所有的 console.log()
Alt + Shift + d 删除所有的 console.log()

One Dark Pro（代码主题插件）

One Dark Pro 是一款源自 Atom 的经典主题，如今已成为 VS Code 中最受欢迎的主题插件之一。它的设计简洁而深邃，无论是在编码还是阅读代码时，都能为用户提供舒适的视觉体验。

Codelf (变量命名神器)

Codelf 是通过搜索在线开源平台 Github, Bitbucket, Google Code, Codeplex, Sourceforge, Fedora Projec 的项目源码，帮开发者从中找出已有的匹配关键字的变量名。它支持中文查询，可以根据需要查询尽可能满足我们所需要的结果，并展示与查询结果相关的支持各种编程语言的代码片段以及代码库。
使用：新建一个变量名 输入变量的中文意义，单击鼠标右键 ,即可查看海量变量名,选择一个合适的复制粘贴即可。

Surround （添加包装代码片段）

VSCode-surround 是一个专为 Visual Studio Code (VSCode) 设计的插件，意在简化开发者在编写代码过程中的代码包围操作。通过这个插件，您可以便捷地选择代码片段并将其用特定的代码结构（如括号、引号、条件语句等）包围起来，极大地提高了编程效率和代码的可读性。

Code Spell Checker （检查拼写错误）

帮助我们检查单词拼写是否出现错误，检查的规则遵循 camelCase （驼峰拼写法）。

Markdown Preview Enhanced

支持实时预览 Markdown 文件效果，并具备导出 PDF、支持数学公式、流程图等多种高级功能，提供了丰富的定制选项和兼容性，极大地提升了 Markdown 文档的编辑和预览体验。
它提供了许多实用的功能，如自动滚动同步、数学公式渲染、Mermaid 图表、PlantUML、Pandoc 集成、PDF 导出、代码块执行、演示文稿编写等。该插件的灵感来源于 Markdown Preview Plus 和 RStudio Markdown。

Markdown All in One

Markdown All in One 是一个 Visual Studio Code 扩展，它提供了一组实用的 Markdown 编辑工具和功能，如语法高亮、预览、表格生成器、TOC 生成器等。它可以帮助用户更轻松地编写和阅读 Markdown 文档。

indent-rainbow

indent-rainbow 是一个 VSCode 扩展，旨在使代码缩进更加易于阅读。该扩展通过在每个缩进步骤上交替使用四种不同的颜色来突出显示缩进，从而帮助开发者更容易地识别代码的结构。这对于编写 Python、Nim、Yaml 等依赖缩进的语言尤其有用。

CSS Peek

该插件帮助我们从 HTML 和 JavaScript 文件快速导航和编辑外部样式表中定义的 CSS 样式。它提供了一个“Peek”功能，在 HTML 中选择某个 class 或者 id 名称按住Ctrl键 + 鼠标左键可以直接定位到该名称的 CSS 的位置

二、前端框架

Vue - Official ⭐

支持通过鼠标拖拽来导入组件，告别手动引入！
操作步骤：按住鼠标左键，把组件拖拽到想要引入的地方，VSCode 会提示按住 shift 放入编辑器中，此时我们按 shift 并放开鼠标左键，即可自动导入组件。

Vue 3 Snippets

Vue 3 Snippets插件为 VSCode 提供了丰富的 Vue3 代码片段，可以让我们在编写代码时更加迅速。。比如，只需输入 vtemplate，然后按下 Tab 键，即可自动生成一个Vue模板的代码片段。此外，该插件还支持自定义代码片段，可以根据自己的需求进行扩展。

Vue VSCode Snippets ⭐

Vue VSCode Snippets 插件，快速生成Vue项目的各种模板，包括Vue组件、Template、Script、Composition API、Vuex状态管理、Vue Router路由配置、Vue 配置项以及 Nuxt 的页面和配置等。

.

React Native Tools

React Native Tools 给 React Native 项目提供了一个开发环境。你可以调试你的代码、通过命令面板终端快速的运行 react-native 命令、并且支持代码智能补全,对象搜索浏览、方法、参数以及其他一些 React Native API。

Tailwind CSS IntelliSense ⭐

这是一个提供智能代码补全和语法高亮插件。可以根据你的项目配置和 Tailwind Css 的类名规则，提供准确的代码提示和自动完成的功能。

JavaScript (ES6) code snippets

为JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的语法支持。

Typescript React Code Snippets

此插件包含了使用 Typescript 的 React 代码片段，它支持 Typescript(.ts) 或 TypeScript React (.tsx) 等语言。以>.下是使用 TypeScript 创建 React 组件的两个片段。

ES7+ React/Redux/React-Native snippets

提供了许多速记前缀来加速开发并帮助开发人员为 React、Redux、GraphQL 和 React Native 创建代码片段和语法。

三、Git 集成#

GitLens ⭐

GitLens 是强大的 Git 集成插件，可以帮助我们实时查看 Git 提交信息，轻松的对代码进行溯源。

Git Graph ⭐

Git Graph 是服务于 Git 分支管理的一种可视化工具，帮助开发者直观地管理 Git 仓库的繁杂分支信息。

Git History ⭐

Git History 是一个 Visual Studio Code 的扩展插件，用于可视化查看 Git 仓库的历史记录。

GitHub Repositories

GitHub Repositories 插件主要提供了与 GitHub 仓库的交互功能，例如浏览仓库、查看提交历史、拉取和推送代码等。它通过与 GitHub 的 API 进行通信来获取仓库的相关信息，并在插件中显示。但是，它并不会自动将整个仓库的代码下载到本地。

四、主题美化

Colorize

是一个用于自动为代码着色的工具，它可以将普通的文本格式的代码转换成具有颜色高亮的 HTML 格式。这样可以使代码更易于阅读和理解。

CodeSnap

CodeSnap 插件可以帮助你将代码片段转换为漂亮的代码截图，并支持自定义样式和主题。提供不同的样式和主题选择，包括代码高亮、背景颜色、字体大小等，以创建符合你需求的漂亮截图。该插件还支持自定义代码片段的尺寸、文件类型和文件名，以及添加标题和描述等元数据。

Error Lens ⭐

Error Lens，这个插件它能够以高亮、内联显示代码中的错误、警告和其他诊断信息，让开发者无需查看控制台或问题面板，就能在编辑代码的过程中直观地看到并快速定位到代码中的潜在问题。它可以支持多种编程语言，包括 JavaScript、TypeScript、Python、C# 等

Todo Tree

Todo-Tree是一款由 Gruntfuggly 开发的 VSCode 扩展，它允许你自定义搜索关键字，并以树形结构显示这些标记。此项目意在解决开发环境中的一个常见问题：如何快速定位到需要处理的任务或待办事项。通过提供可视化的界面。

Image preview

当鼠标悬浮在图片的链接上时，可以实时预览该图片，除此之外，还可以看到图片的大小和分辨率。

Better comments

创建更加人性化的代码注释。通过这个扩展，开发者可以将注释分类为不同的类型，如警告、查询、TODO 等，
对不同类型的注释会附加了不同的颜色，更加方便区分。

TODO Highlight

实时高亮显示 TODO, FIXME 等标记。
自定义关键字列表，方便适应不同的项目规范。
支持正则表达式匹配，提供更高的灵活性。
快速导航到下一个/上一个待办事项。
在侧边栏中查看所有待办事项的列表。
通过命令面板或快捷键操作，便于在代码间切换。

Highlight Matching Tag

实时高亮显示匹配的标签对，方便用户在 HTML 或 XML 代码中快速找到配对的标签。它可以在点击一个标签时，自动显示配对的标签，并通过下划线或其他样式来指示它们之间的对应关系。

Pretty TypeScript Errors

自定义TextMate语法：为了能够正确地高亮显示 TypeScript 错误中的类型信息，项目创建了一个新的TextMate语法，称为type，它是 TypeScript 语法的一个超集。
VSCode 扩展开发：利用 VSCode 的扩展 API ，实现了在错误信息中添加按钮、导航等功能，使得用户可以更方便地查看和理解错误。
主题兼容性：支持亮色和暗色主题，确保在不同主题下都能提供一致的视觉体验。

Ayu

Ayu 是一个流行的开源主题项目，主要用于美化代码编辑器和开发环境的界面。该项目提供了多种颜色方案和界面设计，旨在提高开发者的编码体验。Ayu 主题支持多种编辑器和IDE，包括 Visual Studio Code、Sublime Text 和 Atom 等。
安装完成后，点击 重新加载 以激活扩展。
进入 文件 -> 首选项 -> 颜色主题。
选择 Ayu 主题

vscode-icons

VSCode 官方出品的图标库。

Material Icon Theme

该插件根据最新的 Material Design 主题为文件和文件夹提供图标。它可以帮助我们识别文件并为编辑器添加自定义的外观。

Peacock

允许开发者为 Visual Studio Code 的工作区界面（如侧边栏、底栏和标题栏）自定义颜色，以区分不同的项目或编码环境。

Rainbow Fart Waifu

当你在敲代码的时候一直用甜美的话语鼓励你，还提供了一位虚拟老婆供以娱乐，有多种模型可选。

五、数据分析

Import Cost

Import Cost 是一个高效且实用的开发工具，旨在帮助开发者即时了解 JavaScript 或 TypeScript 项目中引入的包的大小，从而优化应用的性能。通过在编辑器内直接显示导入模块的成本，它使得开发者能够更加直观地管理代码体积，特别是在对前端应用进行性能敏感调整时显得尤为关键。该项目支持多种IDE环境，包括 Visual Studio Code、JetBrains 系列（如WebStorm）等，利用Webpack技术来精确计算导入依赖的大小。

Time Master

从编程过程中自动生成的指标、见解和时间跟踪。
记录 VSCode 在编译时代码编译时间及打开编辑器的时间。

VS Code Counter

VS Code Counter 是一款统计代码、注释、空格行数插件，你可以统计单个文件、文件夹或者是工作空间。
1、顶部菜单栏 【查看】(View) 选择下拉菜单 【命令面板】打开命令输入栏，或者直接快捷键Shift+Ctrl+P 打开命令输入栏。
在命令控制栏中输入 VSCodeCounter 并选择 Count lines in directory，如果要统计整个工作区间的代码也可以，选择下面的 Count lines in workspace。
然后输入指定目录并回车就可以统计代码了。
2、直接右击指定目录，选择 Count lines in directory 就可以了。
当选择代码统计之后，底部会出现 VSCodeCounter 的提示，耐心等待。
目目录里会出现 .VSCodeCounter的目录，并按照统计时间展现对应的代码统计数据。
这里需要注意的是，记得在 .gitignore 增加 .VSCodeCounter 目录过滤，避免上传到代码仓库。
从时间、目录、总数、语言以及各目录的统计都有。

WakaTime

WakaTime 是一个开源的VS代码插件，用于在编程活动中自动统计工作量、代码提交和时间跟踪等，并能为我们定期提供各种高质量的工作统计图表。

六、摸鱼神器

Weixin Read

专门适配微信读书网页版的阅读插件，功能比较简单，可以阅读微信读书的内容，可登录。安装完成之后，左侧工具栏会出现微信读书的图标，点击即可跳转到插件。

Zhihu On VSCode

知乎插件，提供包括阅读，搜索，创作，发布等一站式服务，内容加载速度比 Web 端更快，创新的 Markdown-Latex 混合语法让内容创作者更方便地插入代码块，数学公式，并一键发布至知乎。

Cloudmusic

网易云音乐插件，几乎支持了全部可用功能，包括账号登录，歌单同步、搜索、收藏、心动模式、私人FM、歌词显示、榜单查看等功能，还可以查看个人听歌排行、每日推荐，新歌上架等板块。安装完成之后，左侧工具栏会出现云音乐的图标，点击即可跳转到插件。

小霸王

小霸王是一款基于VSCode的nes游戏插件。

Bangumi Open

番剧插件，需要配合 bilibili 使用，可以按照分类和时间来查看 B 站上对应的番剧更新时间和连载情况。使用快捷键 Ctrl+Shift+P 调出命令栏后，输入Open Bangumi 或 Bangumi Open: Week Bangumi 即可打开插件。

daily anime

追番插件，功能简单，可以看到每天会对应更新的番剧列表，数据来源于bangumi。使用时，可以使用快捷键 ctrl+shift+p（Mac：command +shift+p） 来打开命令面板，输入 anime 可打开番剧页面，输入 hitokoto 可随机展示一条句子。

z-reader

小说阅读插件，支持在线搜索和本地阅读，支持txt和epub格式，可以从起点网小说和笔趣阁进行小说搜索和阅读，阅读进度支持自动保存。

韭菜盒子

韭菜盒子，VSCode 里也可以看股票 & 基金实时数据，做最好用的投资插件。

Leetcode

一款非常强大的 Leetcode 刷题插件，可以直接同步 Leetcode 所有题目，并且可以直接在VS Code中提交和查看。

掘金

基于 VS Code 的掘金插件，可以边看文章边写代码，不用在 VSCode 和浏览器间频繁切换，提高工作体验和学习效率。边写代码边刷沸点，光明正大地摸鱼。

七、AI、助手

DevChat

DevChat 是一个集成了多种主流大模型的 AI 编程工具,专注于提升程序员的编程效率。它整合了 ChatGPT 等热门 AI 应用,支持自然语言编程、代码编写、代码生成、代码补全等功能。Devchat 最大的优势是一站式服务,集成热门大模型，并且可以根据需求随心切换，省去了选择和整合不同AI模型的麻烦，无需过多配置就可以快速上手,从而全面提升开发效率。

MarsCode AI

MarsCode 是豆包旗下的智能编程助手，提供以智能代码补全为代表的核心能力，支持主流编程语言及 IDE，能在编码过程中提供单行或整个函数的建议，同时支持在用户编码过程中提供代码解释、单测生成、问题修复、技术问答等辅助功能，提升编码效率与质量。

drawio （流程图）

流程图是一种直观的图示方法，可以用简明结构实现一个复杂工作/研究框架的解析和输出，在许多行业中有着广泛应用。
插件安装完成后，我们在工作文件夹中新建一个后缀为.drawio的文件，进入编辑器页面。

Project Manager

该插件可以帮助我们方便的管理多个项目，支持快速的在多个项目间切换工程。