共计 4326 个字符，预计需要花费 11 分钟才能阅读完成。
海阔凭鱼跃，天高任鸟飞。Hey 你好！我是秦爱德。😄
平平无奇下班摸鱼，甚至想着如何带薪拉屎？不不不，明天咱们来聊聊 vscode 中那些进步工作效率的实用插件吧。
在之前的给在座各位“老划水员”分享 10 款进步幸福指数的 vscode“摸鱼神器”这篇文章公布之后，也播种了很多小伙伴的点赞，咱们也不能一天天光摸鱼，还是得干点闲事。特此，我整顿了一些好用的 vscode 插件，如果感觉不错，欢送一键三连，你们的点赞，就是我继续写文最大的能源🙈🙈🙈
本文从 根底必备 、 代码标准 、 开发神器 三个方面来举荐，方方面面都有波及，有了这些 神器 就让咱们一起愉悦的撸代码吧！
😏😏😏后方高能，多图正告😏😏😏
根底通用插件
Chinese
vscode编辑器汉化包，装置后，在 locale.json 中增加 "locale": "zh-cn"，即可载入中文（简体）语言包。
Auto Rename Tag
主动重命名成对的 HTML 标记，批改开始标签，完结标签会同步批改
HTML Snippets
HTML 代码片段，该插件可为你提供 html 标签的代码提醒，不必键入尖括号了
Bracket Pair Colorizer
该插件能够为你把成对的括号做色彩辨别，并且提供一根连接线。不便咱们审阅代码构造。
通过批改配置文件，使得构造线高亮，食用更佳
"workbench.colorCustomizations": {"editorIndentGuide.activeBackground": "#00ffea"},CSS Peek
css 款式查看器，可疾速查看咱们的 css 款式，十分方便快捷
Npm Intellisense
可主动实现导入语句中的 npm 模块
open in browser
疾速关上 html 文件到浏览器预览
vscode-icons
提供了十分丑陋的目录树图标主题
Auto Close Tag
主动闭合 HTML/XML 标签
Path Intellisense
主动提醒文件门路，反对各种疾速引入文件
Image preview
鼠标悬浮在链接上可及时预览图片
Beautify
在代码文件右键鼠标一键格式化 html,js,css
JavaScript (ES6) code snippets
ES6 语法智能提醒，以及疾速输出
Vetur
VScode官网钦定 Vue 插件，Vue开发者必备。内含语法高亮，智能提醒，emmet，谬误提醒，格式化，主动补全，debugger等实用功能
代码格调标准类插件
ESlint
标准 js 代码书写规定，如果感觉太过谨严，可自定义规定
TSLint
ts 的书写标准，这个插件是一个系列，同时还提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX
Code Spell Checker
是拼写检查程序，查看不常见的单词，如果单词拼写错误，会给出正告提醒
koroFileHeader
在 vscode 中用于生成文件头部正文和函数正文的插件，通过多版迭代后，插件：反对所有支流语言, 功能强大，灵便不便，文档齐全，食用简略！
不光如此，还能生成一些特地有意思的正文，比方这一条喷火龙 …
Better Align
代码书写的整洁，工整往往是掂量一个程序员素养的规范，这款插件能够让你的代码更排版优雅
选中代码配合组合键 [Ctrl+Shift+p]，输出Align 即可
、
change-case
通常咱们对一个变量的命名可能是驼峰，可能是全大写，又或是下划线，这里可通过这个插件解决变量命名标准的问题
选中变量配合组合键[Ctrl+Shift+p]，输出对应格局即可
extension.changeCase.commands：列出所有“更改案例”命令，如果仅抉择一个单词，则带有预览
extension.changeCase.camel：更改大小写 'camel'：转换为字符串，并用下一个字母大写示意分隔符
extension.changeCase.constant：更改大小写“常量”：转换为大写字母，下划线分隔字符串
extension.changeCase.dot：更改大小写的“点”：转换为小写，句点分隔的字符串
extension.changeCase.kebab：更改大小写“kebab”：转换为小写字母，用破折号分隔的字符串（参数名的别名）extension.changeCase.lower：更改大小写为“小写”：转换为小写的字符串
extension.changeCase.lowerFirst：更改大小写“lowerFirst”：转换为首字母小写的字符串
extension.changeCase.no：转换没有任何大小写的字符串（小写字母，空格分隔）extension.changeCase.param：更改大小写为 'param'：转换为小写字母，用破折号分隔的字符串
extension.changeCase.pascal：更改大小写“pascal”：转换为以与 camelCase 雷同的形式示意的字符串，但首字母也大写
extension.changeCase.path：更改大小写的“门路”：转换为小写，用斜杠分隔的字符串
extension.changeCase.sentence：更改大小写的“句子”：转换为小写的空格分隔的字符串
extension.changeCase.snake：更改大小写“snake”：转换为小写字母，下划线分隔字符串
extension.changeCase.swap：更改大小写“替换”：转换为每个大小写相同的字符串
extension.changeCase.title：更改大小写“题目”：转换为以空格分隔的字符串，每个单词的第一个字符均大写
extension.changeCase.upper：更改大小写为大写：转换为大写字符串
extension.changeCase.upperFirst：更改大小写为“upperFirst”：转换为首字母大写的字符串Better Comments
这款插件能够丰盛正文色彩，让正文也具备生命力，如需自定义款式，须要写入配置代码
配置代码
"better-comments.tags": [
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"backgroundColor": "transparent"
}
]
应用
// * 绿色的高亮正文TODO Tree
咱们常常会在代码中应用 TODO 来标记咱们的代码，进步可读性，TODO Tree这款插件提供了可视化窗口来查看和治理咱们的TODO Tree
GitLens
GitLens能够帮忙您更好地了解代码。疾速查看更改行或代码块的对象，功能强大，功能丰富且高度可定制，能够满足您的需要
GitHistory
GitHistory可查看和搜寻 git 日志以及图形和详细信息，同时还反对分支比拟，分支治理等操作，十分不便
其余插件（神器）
Partial Diff
文件比拟是一个很常见的场景，如果光凭咱们肉眼别离的话，累人不说还容易出错。 Partial Diff的呈现就正好解决了这个问题
Markdown All in One
这款神器能够让咱们在 vscode 外面高兴的书写 Markdown，功能强大。提供了丰盛的快捷键，可边写边看，轻松转化为html 或pdf文件，非常好用，强烈推荐
vscode-drawio
这款神器能够让咱们在 vscode 外面高兴的画流程图。新建 .drawio 后缀文件并拖入 vscode 中, 即可失去如下界面👇
Polacode-2020
这款神器能够将咱们的代码转化成一张逼格满满的图片，在写文章或者代码分享的时候。抛出一张这样的图片，可比顺手截图体面多了
REST Client
这款神器能够让咱们在 vscode 外面进行接口调试，提供丰盛的 api 配置形式，让咱们不必来到编辑器也能够随时调用接口调试
新建一个 .http 文件，写下根本的测试代码，点击 Send Request即可在左边窗口查看接口返回后果，十分 nice，强烈推荐
更多的应用配置，可查看官网文档传送门
Browser Preview
这款神器能够让咱们在 vscode 外面关上浏览器，一边编码一边查看，偶然也能够用来摸鱼，十分兽性，强烈推荐
JavaScript Booster
这款神器能够在咱们代码写的不标准或者有待调整的中央，在光标聚焦后，会有一个小灯泡。会提醒对应的不合理起因和改良计划。极大的进步了咱们的代码优雅度，强烈推荐
让您的生存更轻松，应用代码操作为您执行重复性工作！他们能够提供很多帮忙，只需追随灯泡💡！
当在 JavaScript（或TypeScript / Flow）中编辑代码时，此VS Code 扩大提供了各种代码操作（疾速修复）。只需注意左侧的灯泡，而后按一下它即可理解如何在光标下转换代码。
Settings Sync
这款神器能够让咱们的 vscode 配置同步到云端，当咱们跟换电脑或者再次装置 vscode 的时候，只须要登录账号即可同步配置了，而不必再次从头开始。几乎不要太香了，强烈推荐
Live Share
这款神器能够使您可能与别人实时进行合作式编辑和调试，无论您应用的是哪种编程语言或正在构建的应用程序类型。什么意思呢？就是能够多人同时编辑一份代码，差不多有点代码共享的意思。不得不说，这款神器就太了不起了，强烈强烈强烈推荐，
搬用官网上的形容
Visual Studio Live Share使您可能与别人实时进行合作式编辑和调试，无论您应用的是哪种编程语言或正在构建的应用程序类型。它使您能够立刻（平安地）共享以后我的项目，而后依据须要共享调试会话，终端实例，localhost Web应用程序，语音呼叫等！退出您的会话的开发人员会从您的环境（例如语言服务，调试）中取得所有编辑器上下文，从而确保他们能够立刻开始进行高效的合作，而无需克隆任何存储库或装置任何SDK。
另外，与传统的成对编程不同，Visual Studio Live Share使开发人员能够一起工作，同时保留其集体编辑器的首选项（例如主题，键绑定）以及本人的光标。这样，您就能够在彼此之间无缝过渡，并可能本人摸索想法 / 工作。在实践中，这种能力一起工作，并独立地提供了一个单干的教训，是可能有更多的天然常见的用例。
好了，这就是我为大家举荐的 33 款vscode插件了，心愿大家喜爱。
❤️爱心三连击
1. 点赞在看，已成习惯！该系列继续更新，你们的一键三连就是我继续写作的最大能源
2. 关注公众号 前端秦爱德
3. 点赞、珍藏、转发 === 催更！
欢送关注我的公众号「前端秦爱德」，每天给你推送陈腐的技术文章。回复 电子书 即可取得我精心筹备的前端学习大礼包
感兴趣的小伙伴还能够退出我的「秦爱德前端交换群」，一起聊聊前端人的那些事儿
