本文已参与「新人创作礼」活动, 一起开启掘金创作之路
前言
学习前端也有一年多了,作为我的主力开发工具,从中我接触过许许多多的插件还有一些配置。对此我想写篇文章去介绍 的插件和一些使用。希望可以给刚入坑前端的小伙伴一些帮助。本文很长,如果能认真看完,你一定会有所收获。
2022年,常用插件推荐
工欲善其事,必先利其器。本文介绍一些前端入门级插件,这些插件作者都有用到过,我会去对比同类插件、插件是否有在长期维护去综合推荐,我也不想增加心理负担,推荐的都是非常基本却又非常实用的插件。
提示:这些插件主要以前端这块来讲,并且不涉及像vue,react等框架的一些插件,同时也不会讲c++,等。
插件清单 () (简体中文)Auto in – Code Spell Sass Code . (ES6) code Dark Icon — 实用扩展推荐1. () (简体中文)
适用于 VS Code 的中文(简体)语言包。
不用多说,英语不太好的小伙伴必装的汉化插件,英语好的可以略过。
2.Auto Tag
同步修改 HTML/XML标签。
3.open in
提供右键菜单选项,一键在浏览器打开html文件。
可以选择在默认浏览器打开或者选择自己想用的浏览器打开。
4. – Code
最流行的前端代码格式化利器。
在设置中把在保存时格式化文件勾上,就可以ctrl+s保存后格式化文件,不管写的再乱,代码都能变得整齐划一。我们也可以根据自己的喜好,配置相关的的设置,比如缩进,前端的话像html,css,js等都建议缩进两个单位。
这是一些常用的配置,记住放在.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
开启一个实时的本地服务器。
一个非常好用的插件,相比于open in 每次保存文件后到浏览器都要刷新才能看到最新的变化,有了这个插件,就可以实时监听文件的变化,自动刷新。真的非常推荐刚开始学html,css,js的同学使用这个插件学习,很方便。
6.Path
智能路径补全。
之前这个插件好久都没人维护,但最近的一段时间,经常可以看到插件的更新,体验还是不错的,也可以试试同类的插件Path 。
其实对大部分都是有路径感知的,这个插件的一个比较好的功能是配置路径别名,以后用框架写项目的时候用的会比较多。
"path-intellisense.extensionOnImport": true, // 保留文件扩展名
7.Image
鼠标悬停可以预览图片。
鼠标悬停可以预览图片,显示图片的大小和尺寸。不仅仅在css中,也可以在js、vue等文件中预览哦,而且还能预览url网络上的图片,可以打开对应的文件夹和项目文件为位置,真的强烈推荐!
"gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图
8.Code Spell
一个基本的拼写检查器,可以很好地与驼峰大小写代码配合使用。
9.
写出更个性化的注释。
10.
可以一键生成精美的代码截图,放大也不会模糊,嫌截屏软件生成的代码截图太难看,可以试试这个插件。生成的代码主题都是依自己的主题的哦。
11.Easy LESS
实时编译less到css。
12.Sass
提供对sass/scss文件的支持,代码高亮、语法检查,写sass/scss文件必装的插件。
13.Live Sass
实时编译sass/scss到css
14. Code
代码提示,拥有许多相关的api和代码块提示,如果有在学的小伙伴,建议装一个。
15. (ES6) code
es6等代码块,语法提示
02-外观美化插件推荐主题插件
One Dark Pro,最受欢迎的暗黑主题,也是中下载量最高的主题。
Theme,拥有非常多的主题,每个都很好看,也是有名的主题插件。
Tokyo Night,本人在用的一款主题,特别喜欢,不刺眼,颜色很好看。
文件图标
Icon Theme,拥有超多的文件图标,下载量也是最高。
-icons,官方的文件图标,也相当的好看。
如何去寻找主题插件
对插件做了分类,主题类插件的分类名叫,我们可以根据分类去寻找相关的插件。
搜索出来后,也可以看到已经按下载量进行了排行,很直观的看到各个主题的下载量。
常用快捷键
内置很多快捷键,可以大大的提高我们的开发效率。
提示:这个快捷键都是可以自定义的,但用好默认的内置快捷键就足够胜任我们日常大部分开发了。
这里推荐黑马前端pink老师 快捷键-以及使用技巧 …
一些好用的配置彩虹括号
以前我们实现彩虹括号可能会用上一个插件叫 Pair 2,但是有着性能问题,着色慢。在2021 年 8 月(1.60 版)开始内置了这个功能,随之到来的还有垂直连线,亲测,现在已经非常好用了,效果出色,并且所有颜色都是可主题化的,最多可以配置六种颜色。
在如下打开.json,记住放在最外层的大括号里。
这是我认为比较好的配置,详细的配置可以参考。
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
参数名称提示
在2021 年 8 月(1.60 版)中加入等,此设置不会自动打开,也就是说也是需要我们手动去配置的。这些提示可以简单的帮助我们做一些错误检查,同时也让代码更直观、好看。
这是我的一些配置,详细的配置说明可以参考。
"javascript.inlayHints.parameterNames.enabled": "all",
"javascript.inlayHints.variableTypes.enabled": false,
至此,本文结束。创作不易,本人第一次写博客,如果本篇文章对你有所帮助,希望可以点个赞,给个关注。
发表回复