vscode必装插件

`vscode`是我们常用的编辑器，具有很多的插件，同样功能的插件具有多款，哪款插件更适合自己需要自行实践。

接下来说一下我常用的插件

### 基础

1. `Auto Import`

![image-20240603105147322](http://banmag.cn:8089/i/2024/06/03/665d2fc290aa3.png)

自动查找、解析并为所有可用的导入提供代码操作和代码完成。与Typescript和TSX

2. `Auto Rename Tag`

![image-20240603105224128](http://banmag.cn:8089/i/2024/06/03/665d2fe75ada6.png)

自动修改闭合标签

3. `Better Comments`

![image-20240603105324520](http://banmag.cn:8089/i/2024/06/03/665d3023b8ac5.png)

添加彩色注释，是注释更加明显

4. `Code Spell Checker`

代码检查插件

5. `Color Highlight`

![image-20240603105719211](http://banmag.cn:8089/i/2024/06/03/665d310e792e2.png)

在编辑器中突出显示网页颜色

![image-20240603105806106](http://banmag.cn:8089/i/2024/06/03/665d313d78d27.png)

6. ` filesize`

![image-20240603110858589](http://banmag.cn:8089/i/2024/06/03/665d33ca127f5.png)

这个插件是显示该文件的大小

![recording](http://banmag.cn:8089/i/2024/06/03/665d346be7429.gif)

7. `Image preview`

![image-20240603111849249](http://banmag.cn:8089/i/2024/06/03/665d361890d2c.png)

导入图片之后会在祖册显示图片缩略图

### 效率

1. `Bookmarks`

![image-20240603105443134](http://banmag.cn:8089/i/2024/06/03/665d30727c41b.png)

这是对代码添加标记的插件，有时候我们需要记录一段代码的位置，这个插件可以很好的帮助我们

![](http://banmag.cn:8089/i/2024/06/03/665d30c820a36.png)

2. `CSS Peek`

![image-20240603110101994](http://banmag.cn:8089/i/2024/06/03/665d31edae25d.png)

点击`css`名称会自动跳转到具体的样式

![recording](http://banmag.cn:8089/i/2024/06/03/665d3250d8828.gif)

3. `folder-alias`

![image-20240603111211179](http://banmag.cn:8089/i/2024/06/03/665d348a67b50.png)

在我们开发项目的时候会有很多文件，文件多达几百个的时候你能够记住某个文件夹是什么功能吗？这个插件可以对文件(夹)添加备注

![recording](http://banmag.cn:8089/i/2024/06/03/665d35ac348f4.gif)

对于有更改的文件夹，添加备注不知道为什么会不显示，代码提交之后会显示

添加备注之后会在根目录添加`folder-alias.json`文件里面就是我们的备注信息

![image-20240603111804763](http://banmag.cn:8089/i/2024/06/03/665d35ec17930.png)

4. `Project Manager`

![image-20240603112524713](http://banmag.cn:8089/i/2024/06/03/665d37a416b0c.png)

我们在公司开发可能会有多个项目，每次都需要去资源管理器找到在打开或使用`utool`中的`vsc`打开，有些麻烦。

使用这个插件能够快速打开我们的项目

5. `Todo Tree`

![image-20240603112953937](http://banmag.cn:8089/i/2024/06/03/665d38b136f8f.png)

在文件中添加了`TODO`后面找不到了，通过这个插件可以快速定位到`todo`的位置

![image-20240603112940059](http://banmag.cn:8089/i/2024/06/03/665d38a3c12bc.png)

6. `Turbo Console Log`

![image-20240603113019340](http://banmag.cn:8089/i/2024/06/03/665d38ca8ee7c.png)

能够快速打印`log`，可以批量删除……

7. `Console Ninja`

![image-20240603113130865](http://banmag.cn:8089/i/2024/06/03/665d39121f228.png)

能够在编辑器中直接显示打印的日志，可以结合上面的`Turbo Console Log`使用

### 美化插件

`vscode`默认界面比较丑，98%以上的程序员都会安装一定的美化插件。好看的编辑器是能够提高我们开发效率的！

1. `A-super-themes`

这个插件是一款主题插件，从一开始使用编辑器就一直在用这个。

![image-20240603104236149](http://banmag.cn:8089/i/2024/06/03/665d2d9ba2f52.png)

2. `background`

这个插件是在编辑器窗口增加一个小背景

![image-20240603104326275](http://banmag.cn:8089/i/2024/06/03/665d2dcd922d5.png)

3. `background-cover`

这个是在整个窗口添加背景图，可以设置一张，也可以设置一个目录使其自动轮换播放

![image-20240603104438965](http://banmag.cn:8089/i/2024/06/03/665d2e1669985.png)

以上安装之后的样式

![image-20240603104549402](http://banmag.cn:8089/i/2024/06/03/665d2e5e9268e.png)

4. `Material Icon Theme`

![image-20240603111938711](http://banmag.cn:8089/i/2024/06/03/665d3649e3477.png)

这是一个图标美化插件

### 别名

1. `别名路径跳转`

别名路径跳转插件，支持任何项目，可以自由配置映射规则，自由配置可缺省后缀名列表，功能还是比较强大的

![image-20240603104643144](http://banmag.cn:8089/i/2024/06/03/665d2e929992c.png)

2. `path-alias`

![image-20240603112302238](http://banmag.cn:8089/i/2024/06/03/665d37158ce74.png)

一个提供路径别名补全，跳转,重构,函数自动引入，函数signature help 的vscode 插件

很遗憾 我没玩明白，要是有小伙伴玩明白了还望告诉我一声

### 翻译

1. `翻译(英汉词典)`

![image-20240603104811178](http://banmag.cn:8089/i/2024/06/03/665d2eeb814db.png)

选中英文会在底部自动出现翻译

![image-20240603104932179](http://banmag.cn:8089/i/2024/06/03/665d2f3bcefd5.png)

2. `escook-translate`

![image-20240603110316484](http://banmag.cn:8089/i/2024/06/03/665d3273dfc08.png)

**escook-translate** 是一个简洁高效的**单词翻译插件**，可以辅助程序员对单词进行**中英互译**。如果你正在为变量命名而发愁，那么强烈推荐您安装使用此插件

![recording](http://banmag.cn:8089/i/2024/06/03/665d32dca59c2.gif)

3. `fanyi`

![image-20240603110643624](http://banmag.cn:8089/i/2024/06/03/665d3342ccc1a.png)

一个划词翻译的 VS Code 插件

![recording](http://banmag.cn:8089/i/2024/06/03/665d33a30d387.gif)

### 其他

1. `any-rule`

![image-20240603105023170](http://banmag.cn:8089/i/2024/06/03/665d2f6e74be1.png)

这是一个正则编写的插件

2. `Composer`

![image-20240603105900991](http://banmag.cn:8089/i/2024/06/03/665d317467eaf.png)

检查npm包，基本上不怎么用

![image-20240603110001737](http://banmag.cn:8089/i/2024/06/03/665d31b1acd45.png)

3. `node-readme`

![image-20240603112056340](http://banmag.cn:8089/i/2024/06/03/665d369795c2e.png)

快速显示依赖的说明文档，不常用

![recording](http://banmag.cn:8089/i/2024/06/03/665d36dde77de.gif)

### 总结

希望以上26个插件能够帮助你，后面不定期分享，一些很常用的插件就不会再分享了，分享了也没有任何意义

如果感觉这篇文章帮到了你，麻烦点赞关注一下，谢谢！