打造高效舒适编程环境,这些VSCode插件一定不要错过!

368 阅读5分钟

一、基础插件

1. Chinese

1.png

这就是一个中文插件,可以让你的 VSCode 的内容变为中文,你要问我为什么要使用这个插件,因为:

华流才是最X的!

2. Markdown Preview Enhanced

3.png

如果喜欢写 md 文件的帅哥靓女们千万不能错过这个markdown插件。该插件可以增强 md 的体验,比如 md 代码中右击菜单中可以 MPE 预览,可以[toc]生成菜单,画流程图等:

3.png

3. Project Manager

2.png

对于刚开始使用 VSCode 的我最苦恼的就是每次切换项目都得重新打开新的窗口并打开项目(也可能是我没有玩明白 VSCode 吧-.-)。这个插件就是用来做项目管理的,这个真的强烈推荐!有了它,可以帮你在 VSCode 中快速地在各个项目中切换,不需要痛苦地从文件目录中一级一级最终选到你想要的项目文件。

当安装该插件后, VSCode 的主测栏就会多一个项目管理器4.png 点击小笔按钮就可以进行项目编辑:

5.png 照着这个编辑一个项目后保存,就会在项目管理器的栏位里看到如下列表,点击这个列表就可以直接打开这个项目啦。需要注意的是:直接点击会在当前窗口打开项目,如果你想新窗口打开,请在该项目上右击鼠标找到新窗口打开或者点击项目列表最右边的连接图标

image.png

4. Image Preview

7.png

这个插件用来预览图片,鼠标移入图片路径可以进行图片预览。这个插件主要是方便检查引入的图片对不对或者回过头来看看某个地方引入了啥图片,不用根据路径一点点去寻找查看。

5. Live Server

8.png

这个插件是用来开启一个本地服务器,可以实时查看开发的网页或者项目效果。开启与停止该插件在右击的菜单里可以找到:

9.png

6. Auto Rename Tag

image.png

这个插件的作用是在一个标签更改时自动更新另一个标签,但是现在这个功能 VSCode 已经内置啦!!!不需要再额外装插件了,不过默认是关闭的,需要手动开启:

  1. 打开设置。
  2. 搜索 Editor: Linked Editing,勾选上。

7. JavaScript(ES6) code snippets

image.png

ES6 语法智能提示,可以实现快速输入,支持.js,还支持.ts,.jsx,.tsx,.html,.vue。前端开发应该都需要吧。1s的速度提升也是提升嘛,蚊子虽小也是肉。

8. Path Intellisense

image.png

补全文件路径,依然那句话蚊子虽小也是肉0.0。

9. Error Lens

image.png

实时的提示代码错误。平时在 VSCode 里编写的代码报红或者报黄,我们需要鼠标移到指定位置,弹出的信息框会告诉我们为什么报红或报黄,但是有了该插件,再也不需要这么麻烦啦!

image.png

10. One Dark Pro

image.png

这个则是 VSCode 的主题插件,我用过很多其他的主题,就这个看得最舒服,纯属个人喜好,欢迎各位尝试。

11. VSCode Great Icons

image.png

好的东西总是想分享出去,这个图标插件我是真的爱了,简洁又好看。

image.png

12. indent-rainbow

image.png

代码缩进也可以变成好看的彩虹

image.png

13. Power Mode

image.png

这个插件就是用来提高用户打代码积极性的(反正我是这么认为的,哈哈),它是一种炫酷高逼格敲代码的效果动画。 安装该插件后,需要在 VSCode 的配置文件中填写如下代码:

{
  // ......
  
  "powermode.enabled": true, // 是否开启特效
  "powermode.presets": "particles", // flames 火花效果、  particles 粒子、 magic 魔法、 fireworks 烟花、 clippy 曲别针
  "powermode.shake.enabled": false, // 屏幕是否抖动
  "powermode.explosions.maxExplosions": 1, // 最大同时爆炸次数
  
  // ......
}

它还有其他配置,俺也知道的不全,感兴趣的可以自行查找。

14. Source Code Pro

image.png

这个不是插件,这个是俺认为非常好看的一个字体想分享给大家。设置该字体的步骤为:

  1. 寻找资源下载字体(如果找不到的,可以私聊我哦)。
  2. 将 ttf 文件夹里的.ttf 文件全都复制到电脑的 c/:window/font 里。
  3. VSCode 设置字体:设置---字体---将 Source Code Pro, Consolas, 'Courier New', monospace 填入其中。

二、开发插件

1. Volar

image.png

vue3 提示工具,提高 vue3 的开发速度,且多了很多便利的功能。以前 vue2 的时候使用的是 Vetur ,其实 Volar 也可以开发 vue2 只是需要进行一些配置。

2. Vue 3 Snippets

image.png

vue2 和 vue3 代码提示

3. EditorConfig for VS Code

image.png

该插件的作用是统一代码编辑器编码风格,如果是多人开发任务使用的编辑器不一样,或者编辑器一样但是编辑器的编写代码配置不同都会造成一个问题,代码写出来乱糟糟的,什么样的格式都会有,会影响后续开发和代码阅读、维护。所以在项目里都会有一个文件 .editorconfig 用来配置统一的编辑代码配置,VSCode 如果想根据该文件进行统一配置,就必须安装该插件。

4. Prettier - Code formatter

image.png

该插件的作用为统一代码风格样式,比如代码末尾加不加分号等。如果项目没有 .prettierrc 文件,则会用用户设置的配置,如果有就会读取项目中该文件的配置。

5. Eslint

image.png

该插件的作用为检查代码规范

6. Element UI Snippets

image.png

vue开发最多人用的就是 Element UI,该插件可以代码提示,提高开发效率。

麻烦各位多评论多点赞,多批评多教育!!!