A must-read summary of VSCode common plug-ins and useful configurations for front-end novices in 2022

This article will summarize and share with you some VSCode commonly used plug-ins and useful configurations (super detailed). It is a must-read for front-end novices. I hope it will be helpful to everyone!

#I have been learning front-end for more than a year, and vscode has been with me from the beginning as the main development tool. I have also come into contact with some various plug-ins and some configurations. In this regard, I want to write an article to introduce the vscode plug-in and some uses. I hope it can give some help to friends who are new to the front-end pit. This article is very long. I hope readers can read it patiently. You will definitely gain something after reading it.

1. Recommended commonly used plug-ins for VSCode in 2022

If a worker wants to do his job well, he must first sharpen his tools. This article introduces some front-end entry-level plug-ins. The authors of these plug-ins have used them, compared them with some similar plug-ins, and recommended them based on whether the plug-ins are actively maintained. [Recommended learning: "vscode introductory tutorial"]

Note: These plug-ins are mainly focused on the front-end, and do not involve things like Some plug-ins of frameworks such as vue, react, and c , python, etc. are also not available.

Plug-in list

• 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- Practical extension recommendation

1.Chinese (Simplified) (Simplified Chinese)

Chinese (Simplified) language pack for VS Code

Needless to say, this is a must-install Chinese plug-in for those who are not very good at English. If you are good at English, you can skip it.

2.Auto Rename Tag

Synchronically modify HTML/XML tags

3.open in browser

Provides right-click menu options to open html files in the browser with one click.

You can choose to open it in the default browser or choose the browser you want to use

4.Prettier - Code formatter

The most popular front-end code formatting tool

in the settings If you check the Format file when saving checkbox, you can

ctrl s format the file after saving. No matter how messy the code is, the code will become neat and consistent. We can also configure related settings according to our own preferences, such as indentation. For the front end, it is recommended to indent two units. These are some commonly used configurations, remember to put them in the outermost braces of 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

Open a real-time local server

A very easy-to-use plug-in, every time After saving the file, you have to refresh the browser to see the latest changes. With this plug-in, you can monitor the changes in the file in real time and refresh automatically. It is really easy to use. I really want to thank the author who developed this plug-in.

6.Path Intellisense

Intelligent path completion

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

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教程！！

The above is the detailed content of A must-read summary of VSCode common plug-ins and useful configurations for front-end novices in 2022. For more information, please follow other related articles on the PHP Chinese website!