2022年,VSCode插件推荐和基本使用(前端小白必看,超详细)

·  阅读 11713
2022年,VSCode插件推荐和基本使用(前端小白必看,超详细)

本文已参与「新人创作礼」活动, 一起开启掘金创作之路

前言

学习前端也有一年多了,VSCode作为我的主力开发工具,从中我接触过许许多多的插件还有一些配置。对此我想写篇文章去介绍vscode 的插件和一些使用。希望可以给刚入坑前端的小伙伴一些帮助。本文很长,如果能认真看完,你一定会有所收获。

2022年,VSCode常用插件推荐

工欲善其事,必先利其器。本文介绍一些前端入门级插件,这些插件作者都有用到过,我会去对比同类插件、插件是否有在长期维护去综合推荐,我也不想增加心理负担,推荐的都是非常基本却又非常实用的插件。

提示:这些插件主要以前端这块来讲,并且不涉及vue,react等框架的一些插件,同时也不会讲c++,python等。

插件清单

  1. Chinese (Simplified) (简体中文)
  2. Auto Rename Tag
  3. open in browser
  4. Prettier - Code formatter
  5. Live Server
  6. Path Intellisense
  7. Image preview
  8. Code Spell Checker
  9. Better Comments
  10. CodeSnap
  11. Easy LESS
  12. Sass
  13. Live Sass Compiler
  14. jQuery Code Snippets
  15. 14.JavaScript (ES6) code snippets
  16. One Dark Pro
  17. Material Theme
  18. Tokyo Night
  19. Material Icon Theme
  20. vscode-icons

01- 实用扩展推荐

1.Chinese (Simplified) (简体中文)

适用于 VS Code 的中文(简体)语言包。

不用多说,英语不太好的小伙伴必装的汉化插件,英语好的可以略过。

image-20220119212543711

2.Auto Rename Tag

同步修改 HTML/XML标签。

01.gif

3.open in browser

提供右键菜单选项,一键在浏览器打开html文件。

可以选择在默认浏览器打开或者选择自己想用的浏览器打开。

02.gif

4.Prettier - Code formatter

最流行的前端代码格式化利器。

在设置中把在保存时格式化文件勾上,就可以ctrl+s保存后格式化文件,不管写的再乱,代码都能变得整齐划一。我们也可以根据自己的喜好,配置相关的的设置,比如缩进,前端的话像html,css,js等都建议缩进两个单位。

2

这是一些常用的配置,记住放在settings.json最外的大括号里。

"prettier.printWidth": 120,,// 最大换行长度
"prettier.tabWidth": 2, // 保存后缩进单位
"[html][css][less][scss][javascript][typescript][json][jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",//设置prettier为默认格式化程序
    "editor.tabSize": 2// 编辑时缩进单位
  },

复制代码

5.Live Server

开启一个实时的本地服务器。

一个非常好用的插件,相比于open in browser每次保存文件后到浏览器都要刷新才能看到最新的变化,有了这个插件,就可以实时监听文件的变化,自动刷新。真的非常推荐刚开始学htmlcssjs的同学使用这个插件学习,很方便。

03.gif

6.Path Intellisense

智能路径补全。

之前这个插件好久都没人维护,但最近的一段时间,经常可以看到插件的更新,体验还是不错的,也可以试试同类的插件Path Autocomplete

其实VSCode对大部分都是有路径感知的,这个插件的一个比较好的功能是配置路径别名,以后用框架写项目的时候用的会比较多。

04.gif

"path-intellisense.extensionOnImport": true, // 保留文件扩展名
复制代码

7.Image preview

鼠标悬停可以预览图片。

鼠标悬停可以预览图片,显示图片的大小和尺寸。不仅仅在css中,也可以在jsvue等文件中预览哦,而且还能预览url网络上的图片,可以打开对应的文件夹和项目文件为位置,真的强烈推荐!

05.gif

"gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图
复制代码

8.Code Spell Checker

一个基本的拼写检查器,可以很好地与驼峰大小写代码配合使用。

06.gif

9.Better Comments

写出更个性化的注释。

10.CodeSnap

可以一键生成精美的代码截图,放大也不会模糊,嫌截屏软件生成的代码截图太难看,可以试试这个插件。生成的代码主题都是依自己的主题的哦。

image-20220419122739106

4

11.Easy LESS

实时编译lesscss

12.Sass

提供对sass/scss文件的支持,代码高亮、语法检查,写sass/scss文件必装的插件。

13.Live Sass Compiler

实时编译sass/scsscss

14.jQuery Code Snippets

jquery代码提示,拥有许多jquery相关的api代码块提示,如果有在学jquery的小伙伴,建议装一个。

15.JavaScript (ES6) code snippets

es6等代码块,语法提示

image-20220419123712108

02-外观美化插件推荐

主题插件

One Dark Pro,最受欢迎的暗黑主题,也是VSCode中下载量最高的主题。

Material Theme,拥有非常多的主题,每个都很好看,也是有名的主题插件。

Tokyo Night,本人在用的一款主题,特别喜欢,不刺眼,颜色很好看。

文件图标

Material Icon Theme,拥有超多的文件图标,下载量也是最高。

vscode-icons,VSCode官方的文件图标,也相当的好看。

如何去寻找主题插件

VSCode对插件做了分类,主题类插件的分类名叫themes,我们可以根据分类去寻找相关的插件。

搜索出来后,也可以看到已经按下载量进行了排行,很直观的看到各个主题的下载量。

3

VSCode常用快捷键

VSCode内置很多快捷键,可以大大的提高我们的开发效率。

提示:这个快捷键都是可以自定义的,但用好默认的内置快捷键就足够胜任我们日常大部分开发了。

这里推荐黑马前端pink老师 VSCode快捷键-以及使用技巧 www.bilibili.com/read/cv9699…

VSCode一些好用的配置

彩虹括号

以前我们实现彩虹括号可能会用上一个插件叫Bracket Pair Colorizer 2,但是有着性能问题,着色慢。vscode在2021 年 8 月(1.60 版)开始内置了这个功能,随之到来的还有垂直连线,亲测,现在已经非常好用了,效果出色,并且所有颜色都是可主题化的,最多可以配置六种颜色。

在如下打开settings.json,记住放在最外层的大括号里。

这是我认为比较好的配置,详细的配置可以参考vscode官方文档

 "editor.bracketPairColorization.enabled": true,
 "editor.guides.bracketPairs": "active",
复制代码

JavaScript参数名称提示

VSCode在2021 年 8 月(1.60 版)中加入JavaScript/TypeScript 嵌入提示参数名称和类型的内联提示等,此设置不会自动打开,也就是说也是需要我们手动去配置的。这些提示可以简单的帮助我们做一些错误检查,同时也让代码更直观、好看。

这是我的一些配置,详细的配置说明可以参考vscode官方文档

  "javascript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.variableTypes.enabled": false,
复制代码

至此,本文结束。创作不易,本人第一次写博客,如果本篇文章对你有所帮助,希望可以点个赞,给个关注。

分类:
前端
收藏成功!
已添加到「」, 点击更改