菜园前端

Appearance

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 小游戏，帮助你劳逸结合, 提高开发效率。至于怎么提高效率我也不清楚。