這篇文章為大家總結分享一些VSCode常用外掛程式和好用設定（超詳細），前端小白必看，希望對大家有幫助！
本人學習前端也有一年多了，vscode從一開始就一直陪伴在身邊，作為主力開發工具。從中我也接觸過一些形形色色的插件還有一些配置。對此我想寫篇文章去介紹vscode 的插件和一些使用。希望可以給剛入坑前端的朋友一些幫助。本文很長，希望讀者可以耐心看完，看完你一定會有所收穫。
工欲善其事，必先利其器。本文介紹一些前端入門級插件，這些插件作者都有用到過，也對比過一些同類插件，還有插件是否維護積極等綜合去推薦。 【推薦學習：《vscode入門教學》】
注意#：這些外掛主要以前端這塊來講，且不涉及像vue,react等框架的一些插件，同時也不會講c,python等。
外掛程式清單
#Chinese (Simplified) (簡體中文)
#Auto Rename Tag
#open in browser
Prettier - Code formatter
#Material Icon Theme
01- 實用擴充推薦
#1.Chinese (Simplified) (簡體中文)
同步修改HTML/XML標籤
##3.open in browser提供一個右鍵選單選項，一鍵在瀏覽器開啟html檔。
可以選擇在預設瀏覽器中開啟或選擇自己想用的瀏覽器開啟
4.Prettier - Code formatter
ctrl s
儲存後格式化文件，不管寫的再亂，程式碼都能變得整齊劃一。我們也可以依照自己的喜好，配置相關的設置，例如縮進，前端的話像html
,
,js等都建議縮排兩個單位。
settings.json
{
"printWidth": 130,// 最大换行长度
"tabWidth": 2, // 保存后缩进单位
"[html][css][less][scss][javascript][typescript][json][jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",//设置prettier为默认格式化程序
"editor.tabSize": 2 // 编辑时缩进单位
},
}之前这个插件好久都没人维护，但最近的一段时间，经常可以看到插件的更新，也对比了一些同类插件，这个插件还是很优秀的。
7.Image preview
鼠标悬停可以预览图片，显示图片的大小和尺寸。不仅仅在css中，也可以在js、vue等文件中预览哦，可以打开对应的文件夹和项目文件为位置，真的强烈推荐！
"gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图
8.Code Spell Checker
9.Better Comments
10.Easy LESS
实时编译less到css
11.Sass
写sass/scss文件必装的插件
12.Live Sass Compiler
实时编译sass/scss到css
13.jQuery Code Snippets
jquery代码提示
14.JavaScript (ES6) code snippets
es6等代码块，语法提示
02-外观美化插件推荐
1.主题插件
One Dark Pro 最受欢迎的暗黑主题
Material Theme 拥有非常多的主题，都很不错，也是有名的主题插件
Tokyo Night 本人在用的一款主题，特别喜欢，不刺眼，色彩设计的很合理
2.文件图标
Material Icon Theme 拥有超多的文件图标，色彩饱和度高。
vscode-icons 也是非常不错的文件图标，下载量很高
VSCode 内置很多快捷键，可以大大的提高我们的开发效率。
注意：这个快捷键都是可以自定义的，这里我们主要说说一些好用的默认快捷键。
这里推荐黑马前端pink老师 vscode快捷键-以及使用技巧 https://www.bilibili.com/read/cv9699783
01-彩虹括号
以前我们实现彩虹括号可能会用上一个插件叫Bracket Pair Colorizer 2，但是会产生性能问题，着色慢。vscode在2021 年 8 月（
1.60版）开始内置了这个功能，随之到来的还有垂直连线，亲测，现在已经非常好用了，效果出色，并且所有颜色都是可主题化的，最多可以配置六种颜色。
在如下打开settings.json，记住放在最外层的大括号里。
这是我认为比较好的配置，详细的配置可以参考vscode官方文档：
https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization
"editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": "active",
02-javaScript参数名称提示
vscode在2021 年 8 月（
1.60版）中加入**JavaScript/TypeScript 嵌入提示**- 参数名称和类型的内联提示等，此设置不会自动打开，也就是说也是需要我们手动去配置的。总所周知，javaScript是弱类型语言，这些提示可以简单的帮助我们做一些错误检查，同时也让代码更直观、好看。
这是我的一些配置，详细的配置说明可以参考vscode官方文档：
https://code.visualstudio.com/updates/v1_60#_inlay-hints-for-javascript-and-typescript
"javascript.inlayHints.parameterNames.enabled": "all", "javascript.inlayHints.variableTypes.enabled": false,
至此，本文结束。创作不易，本人第一次写博客，如果本篇文章对你有所帮助，希望可以点个赞，给个关注。
更多关于VSCode的相关知识，请访问：vscode教程！！
以上是2022年前端小白必看VSCode常用插件和好用配置總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
