34 个终极 VS Code 扩展，助您提升生产力！💪

大家好👋

大家好👋

我是 Savio。我是一名年轻的开发者，立志成为一名成功的 Web 开发者。我喜欢用 React 构建 Web 应用。我已经证明了自己在前端技术方面的卓越能力。

今天，我将向你展示 34 个极致的 VS Code 扩展，助你提升工作效率。我相信你一定会喜欢这份超棒的 VS Code 扩展列表。

自动重命名标签

自动重命名配对的 HTML/XML 标签，与 Visual Studio IDE 相同。

更好的评论

更好的注释扩展将帮助您在代码中创建更加人性化的注释。

Bootstrap 4、Font awesome 4、Font Awesome 5 免费版和专业版代码片段

Visual Studio Code 插件包含 Bootstrap 4、Font Awesome 4 以及 Font Awesome 5 免费版和专业版的代码片段。该插件在稳定版和内部版本中均可使用。

括号对着色器 2

此扩展允许使用颜色来识别匹配的括号。用户可以定义要匹配的标记以及要使用的颜色。

变更案例

Visual Studio Code 的 node-change-case 包装器。快速更改当前选定内容或当前单词的大小写。

代码运行器

运行多种语言的代码片段或代码文件：C、C++、Java、JavaScript、PHP、Python、Perl、Perl 6、Ruby、Go、Lua、Groovy、PowerShell、BAT/CMD、BASH/SH、F# Script、F# (.NET Core)、C# Script、C# (.NET Core)、VBScript、TypeScript、CoffeeScript、Scala、Swift、Julia、Crystal、OCaml Script、R、AppleScript、Elixir、Visual Basic .NET、Clojure、Haxe、Objective-C、Rust、Racket、Scheme、AutoHotkey、AutoIt、Kotlin、Dart、Free Pascal、Haskell、Nim、D、Lisp、Kit、V、SCSS、Sass、CUDA、Less、Fortran 和自定义命令

代码拼写检查器

一款基础拼写检查器，可完美兼容驼峰式拼写规则。该拼写检查器旨在帮助用户发现常见的拼写错误，同时降低误报率。

CSS 速览

允许从 HTML 文件中提取 CSS ID 和类字符串作为相应 CSS 的定义。允许提取并转到定义。

Chrome 调试器

VS Code 扩展用于在 Google Chrome 浏览器或其他支持 Chrome DevTools 协议的目标中调试您的 JavaScript 代码。

EJS 语言支持

EJS、Javascript 和 HTML 标签的语法高亮显示。包含 JavaScript 自动补全功能。

ES7 React/Redux/GraphQL/React-Native 代码片段

使用 ES7 语法在 JS/TS 中对 React、Redux 和 Graphql 进行简单扩展

GitHub 拉取请求和问题

此扩展允许您在 Visual Studio Code 中查看和管理 GitHub 拉取请求和问题。

GitLens — Git 增强版

增强 Visual Studio Code 内置的 Git 功能 - 通过 Git blame 注释和代码镜头一目了然地查看代码作者，无缝导航和探索 Git 存储库，通过强大的比较命令获得有价值的见解等等

谷歌字体

此扩展允许您浏览 Google 字体列表，并将 HTML 或 CSS 插入到您的代码中

图像预览

在边缘和悬停时显示图像预览

GraphQL

VSCode 的 GraphQL 扩展为 GraphQL 项目添加了语法高亮、验证以及诸如跳转至定义、悬停信息和自动完成等语言功能。此扩展也适用于带有 gql 标签注释的查询。

vscode 样式组件

样式组件的语法高亮

美化 JSON

Visual Studio Code Prettify JSON 扩展

进口成本

此扩展将在编辑器中内联显示导入包的大小。该扩展使用 webpack 和 babili-webpack-plugin 来检测导入包的大小。

HTML 中 CSS 类名的 IntelliSense

根据工作区中的定义完成 HTML 类属性的 CSS 类名。

JavaScript（ES6）代码片段

此扩展包含 Vs Code 编辑器的 ES6 语法 JavaScript 代码片段（支持 JavaScript 和 TypeScript）。

实时服务器

启动具有静态和动态页面实时重新加载功能的开发本地服务器

实时共享

使用您最喜欢的工具进行实时协作开发。

Markdown 预览增强

Markdown Preview Enhanced 移植到 vscode

Node-js 的 Mongo 代码片段

提供 Mongo 查询的片段、样板代码以及 Mongoose 模型的完成建议。

npm

此扩展支持运行 package.json 文件中定义的 npm 脚本，并根据 package.json 中定义的依赖项验证已安装的模块。

npm 智能感知

Visual Studio Code 插件可在导入语句中自动完成 npm 模块

占位符图像

使用各种第三方服务（如 Unsplash、placehold.it、LoremFlickr 等）在 Visual Studio Code 中生成占位符图像并将其插入到 HTML 中

波拉科德

宝丽来为您的代码

Prettier - 代码格式化程序

Prettier 是一款规范的代码格式化工具。它会解析你的代码，并根据自己的规则重新打印，同时考虑到最大行长，并在必要时进行换行，从而强制保持一致的风格。

Tabnine 自动完成

Tabnine 是一款功能强大的人工智能助手，旨在帮助您更快地编码、减少错误并发现最佳编码实践 - 而无需离开舒适的 VSCode。

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 通过为 Visual Studio Code 用户提供自动完成、语法突出显示和 linting 等高级功能来增强 Tailwind 开发体验。

露娜油漆

Luna Paint 是一个 VS Code 扩展，可让您在编辑器内编辑光栅图像，只需从资源管理器中打开图像并像任何其他文件一样开始编辑。

Quokka.js

Quokka.js 是一款用于快速编写 JavaScript/TypeScript 原型的开发者生产力工具。运行时值会在您输入代码时更新并显示在 IDE 中的代码旁边。

👀 总结

好了，就到这里。希望你喜欢这篇文章。欢迎分享你的反馈。我的推特账号是@saviomartin7。快来关注我吧！

在 Github 上关注我@saviomartin，不要错过我的精彩项目！💯

你还有什么想说的吗？欢迎在评论区留言。非常感谢大家的反馈！🙌
祝你拥有美好的一天！

🌎 让我们联系

• Github
• 叽叽喳喳
• LinkedIn
• Instagram

🙌 支持

我的项目由咖啡☕推动，给我买一杯吧！