Visual Studio Code 插件推荐

by 草梅友仁

参考链接

• VSCode 必装的 10 个高效开发插件

• vscode 好用的插件

前言

Visual Studio Code 是一个非常适合用来写前端的编辑器，虽然本体功能简单，但是有着丰富而强大的插件支持，这使得 Visual Studio Code 可以深度自定义，实现你的需求。

插件推荐

那么，下面我就根据自己的使用体验来推荐一些插件。

• Auto Close Tag 自动补全 HTML / XML 标签
• Auto rename tag 自动重命名配对的 HTML / XML 标签
• Auto Complete Tag 前两个插件的整合包
• Auto Import 自动导入依赖包
• Better Comments 高亮注释
• change-case 修改代码命名风格
• Chinese (Simplified) Language Pack for Visual Studio Code 中文简体汉化插件，习惯英语界面的也可以不装，英语苦手当然是必备的
• Color Highlight 会将颜色代码转换为对应的颜色显示出来，这段代码什么颜色一目了然
• Document This 给代码添加注释
• DotENV .env 文件支持和格式化
• EditorConfig for VS Code 使 vscode 支持 .editorconfig 配置
• ESLint 代码检查工具，用于代码风格的检查。团队合作必备
• file-peek 可以方便的补全文件路径
• Git Graph 可视化 git 分支和提交记录
• HTML Snippets HTML 代码片段
• Image Preview 在编辑器上显示图片缩略图
• IntelliSense for CSS class names in HTML 在 html 文件中提示 css 名称
• JavaScript (ES6) code snippets es6 代码块
• JavaScript and TypeScript Nightly 启用最新的 Typescript 语法
• Markdown All in One 编写 md 文件
• Markdown Preview Enhanced 可以把 vscode 当初 md 编辑器来使用，附带预览功能
• npm Intellisense 自动提示 npm 包路径
• Path Intellisense 自动提示 文件 路径
• Polacode 生成美化代码的图片
• open-in-browser 给 vscode 加一个右键在默认浏览器打开的快捷键
• One Dark Pro 暗色主题。安装了 One Dark Pro 插件后，可以一键将 VSCode 编辑器的颜色调整成暗色系，编码起来更加舒适。
• Simple React Snippets React 代码片段
• stylelint css、scss、less 格式化
• Todo Tree 统一查看项目下标记为 TODO 的注释
• Vetur 前端神器，涵盖语法提示到格式化所有功能。也是 vue 框架推荐的插件。
• Volar 对 Vue3 + Typescript 进行了专门的优化，注意和 Vetur 功能冲突，装其中一个就好了。如果使用 Typescript 开发，则该插件能提供更多的 Typescript 信息，所以更推荐安装该插件。如果使用 JavaScript 开发，那么效果差不多，都可以
• vscode-icons 可以让 vscode 中的文件管理的树目录显示图标，显示图标后会使得文件、文件夹更加明确功能
• WakaTime 记录写代码的时间
• YAML yml/yaml 格式文件提示

以上插件在 Visual Studio Code 直接搜索即可~

娱乐向插件推荐

以下插件偏向娱乐性，请在开发中慎用~

• 小霸王 小霸王是一款基于 vscode 的 nes 游戏插件，能让你在紧张的开发之余在 vscode 里发松身心。通过劳逸结合，提升开发效率。
  • 请务必在闲暇时间使用本插件，若是上班摸鱼被发现，后果自负
• cloudmusic 网易云音乐插件。在 vscode 中听音乐，实现了播放器的大部分功能。
  • 本插件也请务必在闲暇时间使用~
  • 注意，如果无法使用本插件例如插件初始化失败，请安装 Visual C++ 2017 后重试。
• swimming VSCode 模拟写代码，划水，摸鱼神器
• Rainbow Fart VSCode Rainbow Fart 是一个在你编程时持续夸你写的牛逼的扩展，可以根据代码关键字播放贴近代码意义的真人语音。

• 本文作者： 草梅友仁(CaoMeiYouRen)
• 本文链接： https://wp.cmyr.ltd/archives/visual-studio-code-plugin-recommendations
• 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！