2022年前端小白必看VSCode常用插件和好用配置總結

這篇文章為大家總結分享一些VSCode常用外掛程式和好用設定（超詳細），前端小白必看，希望對大家有幫助！

本人學習前端也有一年多了，vscode從一開始就一直陪伴在身邊，作為主力開發工具。從中我也接觸過一些形形色色的插件還有一些配置。對此我想寫篇文章去介紹vscode 的插件和一些使用。希望可以給剛入坑前端的朋友一些幫助。本文很長，希望讀者可以耐心看完，看完你一定會有所收穫。

一、2022年，VSCode常用外掛推薦

工欲善其事，必先利其器。本文介紹一些前端入門級插件，這些插件作者都有用到過，也對比過一些同類插件，還有插件是否維護積極等綜合去推薦。 【推薦學習：《vscode入門教學》】

注意#：這些外掛主要以前端這塊來講，且不涉及像vue,react等框架的一些插件，同時也不會講c ,python等。

外掛程式清單

• #Chinese (Simplified) (簡體中文)

• #Auto Rename Tag

• #open in browser

• Prettier - Code formatter

# #Live Server
Path Intellisense
#Image preview
Code Spell Checker
#Better Comments
Easy LESS
Sass
Live Sass Compiler
jQuery Code Snippets
14.JavaScript (ES6) code snippets
#One Dark Pro
Material Theme
#Tokyo Night

#Material Icon Theme

• vscode-icons

01- 實用擴充推薦

#1.Chinese (Simplified) (簡體中文)

• 適用於VS Code 的中文（簡體）語言包

#不用多說，英文不太好的小夥伴必裝的漢化插件，英文好的可以略過。

2.Auto Rename Tag

同步修改HTML/XML標籤

##3.open in browser提供一個右鍵選單選項，一鍵在瀏覽器開啟html檔。

可以選擇在預設瀏覽器中開啟或選擇自己想用的瀏覽器開啟

4.Prettier - Code formatter

最受歡迎的前端程式碼格式化利器

在設定中把在儲存時格式化文件勾上，就可以

ctrl s

儲存後格式化文件，不管寫的再亂，程式碼都能變得整齊劃一。我們也可以依照自己的喜好，配置相關的設置，例如縮進，前端的話像

html,

css

,js等都建議縮排兩個單位。

這是一些常用的配置，記得放在

settings.json最外的大括號裡

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

##### #5.Live Server############開啟一個即時的本機伺服器###################一個非常好用的插件，每次儲存檔案後到瀏覽器都要刷新才能看到最新的變化，有了這個插件，就可以即時監聽檔案的變化，自動刷新，真滴好用。真的是太感謝開發這個外掛的作者了。 ##################6.Path Intellisense#############智慧路徑補全########### ###

之前这个插件好久都没人维护，但最近的一段时间，经常可以看到插件的更新，也对比了一些同类插件，这个插件还是很优秀的。

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常用快捷键

VSCode 内置很多快捷键，可以大大的提高我们的开发效率。注意：这个快捷键都是可以自定义的，这里我们主要说说一些好用的默认快捷键。

这里推荐黑马前端pink老师 vscode快捷键-以及使用技巧  https://www.bilibili.com/read/cv9699783

三、VSCode一些好用的配置

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中文網其他相關文章！