33 个提高前端工作效率的 VSCode 实用插件

怼烎@ 2022-08-29 14:53 3阅读 0赞

> 转自：秦爱德  
> 
> 
> juejin.cn/post/6908497610311467021

海阔凭鱼跃，天高任鸟飞。Hey 你好！我是秦爱德。????

> 平平无奇上班摸鱼，甚至想着如何带薪拉屎？不不不，今天我们来聊聊vscode中那些提高工作效率的实用插件吧。

咱们也不能一天天光摸鱼，还是得干点正事。

特此，我整理了一些好用的vscode插件，如果觉得不错，欢迎一键三连，你们的点赞，就是我持续写文最大的动力????????????

本文从**基础必备**、**代码规范**、**开发神器**三个方面来推荐，方方面面都有涉及，有了这些**神器**就让我们一起愉悦的撸代码吧！

**????????????前方高能，多图警告????????????**

## 基础通用插件 ##

### Chinese ###

`vscode`编辑器汉化包，安装后，在 `locale.json` 中添加 `"locale": "zh-cn"`，即可载入中文（简体）语言包。![70398e22d83bcd41ea4c1af552eceafc.png][]

### Auto Rename Tag ###

自动重命名成对的`HTML`标记，修改开始标签，结束标签会同步修改![edbb4ea588a955f5ecada84f1a0da4a8.gif][]

### HTML Snippets ###

HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了![553e5dae0a319e492a1ae65c199fa1d0.gif][]

### Bracket Pair Colorizer ###

该插件可以为你把成对的括号做颜色区分，并且提供一根连接线。方便我们审阅代码结构。![5c6ad883e090d9d1ed48b94b3d00b817.png][]通过修改配置文件，使得结构线高亮，食用更佳![06a8a0492a70f7c7cd71c9da6fa85499.png][]

"workbench.colorCustomizations": {
      "editorIndentGuide.activeBackground": "#00ffea"
    },
    复制代码

### CSS Peek ###

css样式查看器，可快速查看我们的css样式，非常方便快捷![89ca68c5532bb4cc0896d167f249bb64.gif][]

### Npm Intellisense ###

可自动完成导入语句中的npm模块![52898f3bf041182e59c6703c5a980a58.gif][]

### open in browser ###

快速打开`html`文件到浏览器预览![20167b8add95c18e5c730aa8c48750b5.png][]

### vscode-icons ###

提供了非常漂亮的目录树图标主题![d9b8d7f9dcf668b9c984887db5e7a99e.png][]

### Auto Close Tag ###

自动闭合`HTML/XML`标签![6dffc22eae3621d5a646010806ab9ab0.png][]

### Path Intellisense ###

自动提示文件路径，支持各种快速引入文件![a94c9e9638e878a984df651974a65657.png][]

### Image preview ###

鼠标悬浮在链接上可及时预览图片![f4c7a21a8dff5d9e49925e0ac64f72cf.png][]

### Beautify ###

在代码文件右键鼠标一键格式化 `html,js,css`![4eb681908db97eef33c25bed3f162e9c.png][]

### JavaScript (ES6) code snippets ###

ES6语法智能提示，以及快速输入![2d766a4412917172152fa31930518b69.png][]

### Vetur ###

`VScode`官方钦定Vue插件，`Vue`开发者必备。内含语法高亮，智能提示，`emmet`，错误提示，格式化，自动补全，`debugger`等实用功能![9ae9cca82c8c411206b4c90bf805a8ed.png][]

## 代码风格规范类插件 ##

### ESlint ###

规范js代码书写规则，如果觉得太过严谨，可自定义规则![ee3bdccd379190c10471b8504e4ab60b.png][]

### TSLint ###

ts的书写规范，这个插件是一个系列，同时还提供了`TSLint (deprecated)`，`TSLint Vue`，`TSLint Vue-TSX`![76e46ddbb0c5ab3eb9c5a2b680281992.png][]

### Code Spell Checker ###

是拼写检查程序，检查不常见的单词，如果单词拼写错误，会给出警告提示![69a9d7287c6f450e125eec16fdf6f012.gif][]

### koroFileHeader ###

在`vscode`中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！![c440381252fda99f40a93cb5d3eb9566.png][]

不光如此，还能生成一些特别有意思的注释，比如这一条喷火龙...

![82f6b5423d74ce4252a77da2e1ec8730.png][]

### Better Align ###

代码书写的整洁，工整往往是衡量一个程序员素养的标准，这款插件可以让你的代码更排版优雅

选中代码配合组合键`[Ctrl+Shift+p]`，输入`Align`即可![663d181a5cab784aeee573ec7410b2ea.gif][]、

### 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 ###

这款插件可以丰富注释颜色，让注释也具有生命力，如需自定义样式，需要写入配置代码![8d58d4476b7db477d6ae8909cd0e2ec8.png][]

配置代码
    "better-comments.tags": [
      {
        "tag": "*",
        "color": "#98C379",
        "strikethrough": false,
        "backgroundColor": "transparent"
      }
    ]
    使用
    // * 绿色的高亮注释
    复制代码

### TODO Tree ###

我们经常会在代码中使用`TODO`来标记我们的代码，提高可读性，`TODO Tree`这款插件提供了可视化窗口来查看和管理我们的`TODO Tree`

![58f821d38981b55807d6d6bd322b44f8.png][]

### GitLens ###

`GitLens`可以帮助您更好地理解代码。快速查看更改行或代码块的对象，功能强大，功能丰富且高度可定制，可以满足您的需求![0849b85616f38f195d397c08f1626bd4.png][]

### GitHistory ###

`GitHistory`可查看和搜索git日志以及图形和详细信息，同时还支持分支比较，分支管理等操作，非常方便![dacd3d40657fdba0b5dbcbb3f0d291c6.png][]

## 其他插件（神器） ##

### Partial Diff ###

文件比较是一个很常见的场景，如果光凭我们肉眼分别的话，累人不说还容易出错。`Partial Diff`的出现就正好解决了这个问题。

Markdown All in One

这款神器可以让我们在`vscode`里面快乐的书写`Markdown`，功能强大。提供了丰富的快捷键，可边写边看，轻松转化为`html`或`pdf`文件，十分好用，强烈推荐

![ffd0ee37740c1e6e0346647b75d212ce.png][]

### vscode-drawio ###

这款神器可以让我们在`vscode`里面快乐的画流程图。新建 `.drawio` 后缀文件并拖入vscode中, 即可得到如下界面????

![b24c502fb0c1cbbbac6584fb8c42f042.png][]

### Polacode-2020 ###

这款神器可以将我们的代码转化成一张逼格满满的图片，在写文章或者代码分享的时候。抛出一张这样的图片，可比随手截图体面多了

![3e7b52cbdcf7a35c948dc7e310fce5f9.png][]

### REST Client ###

这款神器可以让我们在`vscode`里面进行接口调试，提供丰富的api配置方式，让我们不用离开编辑器也可以随时调用接口调试

新建一个`.http`文件，写下基本的测试代码，点击 `Send Request`即可在右边窗口查看接口返回结果，非常nice，强烈推荐

更多的使用配置，可查看官方文档传送门![a16634b34b04c8fcc8a3afc59d1addf8.png][]

### Browser Preview ###

这款神器可以让我们在`vscode`里面打开浏览器，一边编码一边查看，偶尔也可以用来摸鱼，非常人性，强烈推荐

![cdbf00e671b83310ce0910dbe4b78d13.png][]

### JavaScript Booster ###

这款神器可以在我们代码写的不规范或者有待调整的地方，在光标聚焦后，会有一个小灯泡。会提示对应的不合理原因和改进方案。极大的提高了我们的代码优雅度，强烈推荐

让您的生活更轻松，使用代码操作为您执行重复性任务！他们可以提供很多帮助，只需跟随灯泡????！

当在`JavaScript`（或`TypeScript / Flow`）中编辑代码时，此`VS Code`扩展提供了各种代码操作（快速修复）。只需注意左侧的灯泡，然后按一下它即可了解如何在光标下转换代码。

![6f19b9d294ba1c3f69aa5be97fa1f231.png][]

### Settings Sync ###

这款神器可以让我们的`vscode`配置同步到云端，当我们跟换电脑或者再次安装`vscode`的时候，只需要登录账号即可同步配置了，而不用再次从头开始。简直不要太香了，强烈推荐

![c5e1c211d99c24a5f356743116e6bb30.png][]

### Live Share ###

这款神器可以使您能够与他人实时进行协作式编辑和调试，无论您使用的是哪种编程语言或正在构建的应用程序类型。什么意思呢？就是可以多人同时编辑一份代码，差不多有点代码共享的意思。不得不说，这款神器就太了不起了，强烈强烈强烈推荐，

搬用官网上的描述

`Visual Studio Live Share`使您能够与他人实时进行协作式编辑和调试，无论您使用的是哪种编程语言或正在构建的应用程序类型。它使您可以立即（安全地）共享当前项目，然后根据需要共享调试会话，终端实例，`localhost Web`应用程序，语音呼叫等！加入您的会话的开发人员会从您的环境（例如语言服务，调试）中获得所有编辑器上下文，从而确保他们可以立即开始进行高效的协作，而无需克隆任何存储库或安装任何`SDK`。

另外，与传统的成对编程不同，`Visual Studio Live Share`使开发人员可以一起工作，同时保留其个人编辑器的首选项（例如主题，键绑定）以及自己的光标。这样，您就可以在彼此之间无缝过渡，并能够自己探索想法/任务。在实践中，这种能力一起工作，并独立地提供了一个合作的经验，是可能有更多的自然常见的用例。

![988b90d4992b6a7639c4b58da6f17a00.png][]

好了，这就是我为大家推荐的**33**款`vscode`插件了，希望大家喜欢。另外就是最近疫情又严重起来了，望各位小伙伴健健康康，带好口罩，我们一起顺顺利利的度过这个艰难的**2021**，加油！加油！

撒花、撒花 ????????????????????????????????

[70398e22d83bcd41ea4c1af552eceafc.png]: /images/20220829/e17b9172b2214e54b49b6acdd5e65937.png
[edbb4ea588a955f5ecada84f1a0da4a8.gif]: /images/20220829/37e623dd67b240f787b5e7f6528e90da.png
[553e5dae0a319e492a1ae65c199fa1d0.gif]: /images/20220829/fa1bf02e08e44f05943ded78467c6844.png
[5c6ad883e090d9d1ed48b94b3d00b817.png]: https://img-blog.csdnimg.cn/img_convert/5c6ad883e090d9d1ed48b94b3d00b817.png
[06a8a0492a70f7c7cd71c9da6fa85499.png]: /images/20220829/d1301c48576049258d93b6038ca1f08c.png
[89ca68c5532bb4cc0896d167f249bb64.gif]: /images/20220829/b090e0d424bb4888a7cbf93fde9385ad.png
[52898f3bf041182e59c6703c5a980a58.gif]: /images/20220829/bd5918d8f09342389566bf556c90430a.png
[20167b8add95c18e5c730aa8c48750b5.png]: /images/20220829/f5270c417d0942de8ef5dff980133551.png
[d9b8d7f9dcf668b9c984887db5e7a99e.png]: /images/20220829/1777e9194ba148b5bc0d0d9649a60db7.png
[6dffc22eae3621d5a646010806ab9ab0.png]: /images/20220829/21d02c46c9834573887b3a39125ad950.png
[a94c9e9638e878a984df651974a65657.png]: /images/20220829/d7b62632d11d4643a3e98412bf30ee6c.png
[f4c7a21a8dff5d9e49925e0ac64f72cf.png]: /images/20220829/b30f1827959341f0be998cc6a9e11c33.png
[4eb681908db97eef33c25bed3f162e9c.png]: /images/20220829/83560ef88061472c89abd85ecc105478.png
[2d766a4412917172152fa31930518b69.png]: /images/20220829/a9c7735c9df44f3199211bd11d9e0c6b.png
[9ae9cca82c8c411206b4c90bf805a8ed.png]: /images/20220829/fed1c731c27749fab74d313c4a01ec9a.png
[ee3bdccd379190c10471b8504e4ab60b.png]: /images/20220829/c30453e16a5546cf8fad420317a5dc36.png
[76e46ddbb0c5ab3eb9c5a2b680281992.png]: /images/20220829/473760da077b4ff395297fcde1cf3f7d.png
[69a9d7287c6f450e125eec16fdf6f012.gif]: /images/20220829/11a74404b92e4e688b736a6bcc0babe1.png
[c440381252fda99f40a93cb5d3eb9566.png]: /images/20220829/804b80df15794690939c8a7544287207.png
[82f6b5423d74ce4252a77da2e1ec8730.png]: /images/20220829/d45e7d3078b54608957d065922f05129.png
[663d181a5cab784aeee573ec7410b2ea.gif]: /images/20220829/46d2f9d81c6b471e88cd913589ec8787.png
[8d58d4476b7db477d6ae8909cd0e2ec8.png]: /images/20220829/45ef9db2e1714259bc316775970166f2.png
[58f821d38981b55807d6d6bd322b44f8.png]: /images/20220829/74463dc841ed49b682e1e8385bf66a57.png
[0849b85616f38f195d397c08f1626bd4.png]: /images/20220829/6228d3b02ff641a9b4a9c11f39b4da46.png
[dacd3d40657fdba0b5dbcbb3f0d291c6.png]: /images/20220829/66b1070b28fd45e78e743d3f2e509647.png
[ffd0ee37740c1e6e0346647b75d212ce.png]: /images/20220829/9dfcd9c4e69947d9b6bade8623b73566.png
[b24c502fb0c1cbbbac6584fb8c42f042.png]: /images/20220829/cac5cca665dc494094e9ac24d4fdd324.png
[3e7b52cbdcf7a35c948dc7e310fce5f9.png]: /images/20220829/74db8d54fbe24fbbbc59491ffe0c316b.png
[a16634b34b04c8fcc8a3afc59d1addf8.png]: /images/20220829/1425a60f58db4cbd88887eabf01cc185.png
[cdbf00e671b83310ce0910dbe4b78d13.png]: /images/20220829/ef10d2ff82c84b708cefed54828621fd.png
[6f19b9d294ba1c3f69aa5be97fa1f231.png]: /images/20220829/487b092ac6874b39813213bb68ebe84b.png
[c5e1c211d99c24a5f356743116e6bb30.png]: /images/20220829/6f9426f2a2f240bab6694fb46a074f24.png
[988b90d4992b6a7639c4b58da6f17a00.png]: /images/20220829/e45d5ccd1c234f21ba4e6a981f7db91d.png