精选!18个 VS Code 高效插件,献给需要的前端程序猿/媛

7,186 阅读6分钟

古之立大事者,不惟有超世之才,亦必有坚忍不拔之志——苏轼

先写前面

俗话说 欲先善其事必先利器,作为一个21新世纪的打工人,怎么可以没有一个趁手的编辑器工具呢。今天的主角就是 VS Code ,一个炒鸡强大的编辑器,我们先来介绍一下这个编辑器。

VS Code 全称 Visual Studio Code 是由微软开发的一款免费、跨平台的轻量级代码编辑器。以功能强大、提示友好、不错的性能和颜值俘获了大量开发者的青睐,对 JavaScript 和 NodeJS 的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全等。

再强大的IDE那也不可能面面俱到什么功能都塞进去,那样只会导致IDE本身太臃肿。功能嘛,按需索取,所以,vscode的很多强大功能都是基于插件实现的,IDE只提供一个最基本的框子和最基本功能,由插件来丰富和扩展它的功能。

美化插件

一个美美的编辑器,在我们的开发过程中是非常友好的,所以我们先来介绍一下用于美化的插件

1. Material Theme 插件

Material Theme 插件是一款用于美化主题的图标的插件,该插件包含两个子插件,分别是 Community Material Theme 该插件用于美化主题,还有一个 Material Theme Icons 用于美化图标的。

image-20201116212608537
image-20201116212608537

2. VSCode Great Icons 插件

VSCode Great Icons 插件是 VS Code 图标插件,可以控制 VS Code 中的文件管理的树目录显示图标。不过如果安装上面那个插件这个插件也就不需要了。

image-20201116213037910
image-20201116213037910

代码高亮插件

1. Color Highlight 插件

Color Highlight 插件是 VS Code 中的颜色高亮插件,可以在编辑器中看出其背景颜色。

image-20201116213858966
image-20201116213858966

2. vscode-pigments 插件

该插件也是一款颜色高亮插件,同上一个插件类似,是我现在使用的一个颜色高亮的插件

image-20201116214057772
image-20201116214057772

3. Bracket Pair Colorizer 插件

为不同的括号拥有不同的颜色,可以使嵌套结构表现特别明显,这个插件是我非常喜欢的一个插件,给我安排它。

image-20201116225424675
image-20201116225424675

高效插件

1. Search node_modules 插件

Search node_modules 插件是一款高效的查找插件,当我们的文件太多时,需要找到某个定义的方法时,可以通过该插件在当前文件夹进行搜索内用

image-20201116214435807
image-20201116214435807

2. Path Intellisense 插件

Path Intellisense 插件是一个路径智能感知插件,该插件在我非常喜欢的一个插件,对路径识别特别友好。

image-20201116215246078
image-20201116215246078

3. Live Server 插件

该插件不仅可以帮你搭建一个小的服务器,而且还可以实现实时预览 HTML ,再也不用这边 Ctrl+s 保存,回到浏览器 Ctrl + R 刷新了。

image-20201116220159540
image-20201116220159540

4. IntelliSense for CSS class names in HTML 插件

该插件会根据工作区中找到的定义或通过元素引用的外部文件为 HTML 属性提供 CSS 类名。

image-20201116220803440
image-20201116220803440

5. Comment Translate 插件

该插件用于翻译功能,官方描述是:许多优秀的项目,都有丰富的注释,使用者可以快速理解代码意图。但是如果使用者并不熟习注释的语言,会带来理解困难。本插件使用 Google Translate API 翻译 VSCode 的编程语言的注释。

image-20201116221408439
image-20201116221408439

6. CSS Peek 插件

该插件可以帮助我们在 HMTL 页面中直接查看 其 CSS 样式,(Ctrl + hover),也可以实现跳转(F12)到该 CSS 写的地方

image-20201116221807883
image-20201116221807883

7. Beautify 插件

该插件用于代码格式化,是我非常喜欢用的一个插件,非常的简单高效

image-20201116221931046
image-20201116221931046

8. Auto Close Tag 插件

这个插件可以帮助我们自动闭合 HTML/XML 标签,非常高效,必须推荐

image-20201116230043776
image-20201116230043776

9. Auto Rename Tag 插件

这个插件的基本功能就是当我们修改 HMTL 标签名的时候,需要修改开始标签和闭合标签两个内容,如果多了会是一个非常烦的操作,不过这个使用这个插件,当我们修改开始标签的时候闭合标签也跟着一起修改。最后这两个插件在前端学习中我是极力的推荐的,真的给出的高效。

image-20201116230522353
image-20201116230522353

注释插件

一个完美的码农的注释绝对是非常非常美观的,以下的插件可以帮助我们写出完美的注释

1. koroFileHeader 插件

koroFileHeader 插件是在 VS Code 中用于生成文件头部注释和函数注释的插件,该插件功能强大使用简单

image-20201116213515996
image-20201116213515996

2. Better Comments 插件

通过该插件可以使注释拥有一些样式,包含:代办、强调、警告等样式

image-20201116225114489
image-20201116225114489

Markdown 插件

Markdown 是我特别喜欢的一个工具,其样式美观,基本脱离鼠标的编辑方式真的是太赞了,VS Code 对 Markdown 也是非常友好的,拥有很多的插件,介绍几个我比较常用的。

1. Markdown Preview Enhanced 插件

Markdown Preview Enhanced 插件是超级强大的 Markdown 插件。 这款插件意在让你拥有飘逸的 Markdown 写作体验。

image-20201116215726559
image-20201116215726559

2. Markdown All in One 插件

该插件提供了常用操作便利的快捷键、目录、实时预览等强大的功能

image-20201116220439225
image-20201116220439225

写在最后

这些插件是我用 VScode 之后一直在使用的,今天整理分享出来,欢迎大家进行补充。

知识是共享的,技术是开源的。