Visual Studio Code 插件推荐

by 草梅友仁

参考链接

前言

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 是一个在你编程时持续夸你写的牛逼的扩展，可以根据代码关键字播放贴近代码意义的真人语音。

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/44a0df8f.html
版权声明：本文采用 CC BY-NC-SA 4.0 协议进行分发，转载请注明出处！