Skip to content

Visual Studio Code 插件

Visual Studio Code 插件可以帮助我们提高开发效率,提供更好的开发体验。例如,我们可以通过插件来提供代码提示、代码格式化、代码检查、代码高亮等功能。Visual Studio Code 插件可以通过 Visual Studio Code 的插件市场进行安装。

以下将为您推荐 20 款插件。

GitHub Copilot

GitHub Copilot 是一个由 GitHub 和 OpenAI 合作开发的人工智能代码提示工具。这个工具可以大幅的提升你的开发效率,当你编写代码的时候,它会根据你的当前文件代码推断出来你想要做什么事情,然后给出对应的代码提示。这个工具真的非常强大和准确,例如你想实现一个函数,你只需要在注释中写上函数的名称、或者尽可能详细的描述你的函数功能,然后按下 Tab 键,它就会自动帮你生成对应的函数代码。除了编码以外,它还能帮你转换数据格式结构、中英文翻译、编写文章等等。

这个工具唯一的缺点就是要收费,一个月要 10 美元。相当于 70 元一个月。新用户可以先免费试用 30 天,当然你可以和多个小伙伴一起拼。而博主则是通过一些技巧一直免费的薅羊毛。

CodeGeeX

插件全称 "CodeGeeX: AI Code AutoComplete, Chat, Auto Comment"

CodeGeeX 也是一款人工智能代码提示工具,它可以帮助我们更快的编写代码。CodeGeeX 是免费的,而且响应速度超级快。但是文档编写能力 GitHub Copilot 会更加详细一点。

Chinese

插件全称 "Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code"

这个插件为 VS Code 提供了简体中文界面。安装之后,可以将 VS Code 的默认语言设置为简体中文。

One Dark Pro

One Dark Pro 是一款非常漂亮的主题插件,它可以让我们的 VS Code 界面变得更加美观。

Auto Rename Tag

Auto Rename Tag 可以帮助我们在修改 HTML 标签的时候,自动修改对应的闭合标签。

HTML CSS Support

HTML CSS Support 可以帮助我们在 HTML 文件中,自动提示 CSS 样式。例如输入 class="" 的时候,会自动提示当前项目中的 CSS 类名。然后在标签中点击对应的 class 名称,可以跳转到 CSS 文件中对应的样式。

Path Intellisense

Path Intellisense 可以帮助我们在编写代码的时候,自动提示文件路径。例如在引号 "" 中输入 "./" 的时候,会自动提示当前目录下的文件。

Image preview

Image preview 可以实现在编码阶段查看图片,例如鼠标移动到 <img src="./title.png" alt="" /> 标签的路径上时,会弹出一个小窗口显示图片,包含图片的尺寸、大小等信息。

Prettier

插件全称 "Prettier - Code formatter"

Prettier 是一款主流的代码格式化工具,它可以帮助我们统一代码风格,提高代码的可读性。在项目根目录下创建一个 .prettierrc 文件,可以配置 Prettier 的格式化规则。

ESLint

ESLint 可以在编码阶段帮我们检查 ECMAScript/JavaScript 代码中的语法错误和风格问题。如果不安装此插件,我们在编码阶段就无法看到 ESLint 的提示信息。

Stylelint

Stylelint 可以在编码阶段帮我们检查 CSS 代码中的语法错误和风格问题。如果不安装此插件,我们在编码阶段就无法看到 Stylelint 的提示信息。

GitLens

插件全称 "GitLens — Git supercharged"

GitLens 可以帮助我们更好的使用 Git,它可以在编辑器中显示当前代码的作者、最近一次提交的时间、代码提交描述等信息。此外,它还可以查看当前文件的历史提交记录。

Live Server

Live Server 可以帮助我们在本地开发环境中启动一个 HTTP 服务器,以便我们在浏览器中预览静态网页。

Vuter

Vuter 是一款 Vue2.0 插件,它可以高亮 Vue 文件中的模板、样式和脚本代码。此外,它还可以提供代码提示、代码格式化、代码检查等功能。

Vue - Official

Vue - Official 是一款 Vue3.0 插件,不建议与 Vuter 插件同时使用,会导致一些不必要的冲突。

Postman

Postman 是一款 API 测试工具,它可以帮助我们测试 API 接口。Postman 插件可以在 VS Code 中直接调用 Postman 的功能。

Better Comments

Better Comments 可以帮助我们在代码中添加更加美观的注释。例如,可以通过 Better Comments 插件将不同类型的注释显示为不同的颜色。

Import Cost

Import Cost 可以在我们使用 import 导入第三方库的时候,显示导入库的大小。

Polacode

Polacode 可以帮助我们生成代码截图。例如你想将一段代码分享给他人查看,可以使用 Polacode 插件生成一张代码截图。

4399 on VSCode

4399 on VSCode 是一款游戏插件,可以在 VS Code 中玩 4399 小游戏,帮助你劳逸结合, 提高开发效率。至于怎么提高效率我也不清楚。