This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together

preface

I have been learning front-end for more than a year. Vscode is my main development tool, from which I have been exposed to many plug-ins and some configurations. I would like to write an article about vscode plug-ins and some usage. I hope I can give some help to my friends who just entered the pit. This article is very long, I hope you can read it patiently, you will learn something.

In 2022, VSCode commonly used plug-ins are recommended

To do a good job, he must sharpen his tools. This article introduces some front-end entry level plug-ins, these plug-ins are useful to the author, I have also compared some similar plug-ins, as well as whether the plug-in maintenance active comprehensive to recommend.

Note: these plugins focus on the front end, and do not involve plug-ins for frameworks like vue and react. They also do not cover c++,python, etc.

The plug-in manifest

  1. (Simplified Chinese)
  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. Easy LESS
  11. Sass
  12. Live Sass Compiler
  13. jQuery Code Snippets
  14. 14.JavaScript (ES6) code snippets
  15. One Dark Pro
  16. Material Theme
  17. Tokyo Night
  18. Material Icon Theme
  19. vscode-icons

01- Practical extension recommended

1. English (Simplified Chinese)

  • Chinese (Simplified) language pack for VS Code

Do not say more, English is not good partners will install the Chinese plug-in, good English can be skipped.

2.Auto Rename Tag

  • Modify HTML/XML tags synchronously

3.open in browser

  • Provides right-click menu options to open HTML files in a browser with one click.

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

4.Prettier – Code formatter

  • The most popular front-end code formatter

CTRL + S format the file after saving. No matter how messy it is, the code can be neat and uniform. We can also configure the relevant Settings according to their own preferences, such as indentation, for example, in front of HTML, CSS, JS and so on, it is recommended to indent two units.

These are some of the common configurations, and remember to put them in the outer braces of settings.json

"prettier.printWidth": 120.// Maximum newline length
"prettier.tabWidth": 2.// Save the indent unit
"[html][css][less][scss][javascript][typescript][json][jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode".// Set prettier as the default formatter
    "editor.tabSize": 2// Indent units when editing
  },

Copy the code

5.Live Server

  • Start a live local server

A very good plug-in, every time after saving the file to the browser to refresh to see the latest changes, with this plug-in, you can monitor the changes of the file in real time, automatic refresh, really good. Thank you so much to the authors of this plugin.

6.Path Intellisense

  • Intelligent path completion

Before this plug-in for a long time no one to maintain, but the recent period of time, often can see the plug-in update, but also compared some similar plug-ins, this plug-in is very good.

7.Image preview

  • Hover to preview the image

Hover the mouse to preview the picture, showing the size and dimensions of the picture. Not only in CSS, but also in JS, Vue and other files preview oh, you can open the corresponding folder and project file as location, really highly recommended!

"gutterpreview.showImagePreviewOnGutter": false.// Turn off the display of indentation in line numbers
Copy the code

8.Code Spell Checker

  • A basic spell checker that works well with camel case code.

9.Better Comments

  • Write more personalized comments

10.Easy LESS

Compile less to CSS in real time

11.Sass

Write SASS/SCSS files must be installed plug-in

12.Live Sass Compiler

Compile SASS/SCSS to CSS in real time

13.jQuery Code Snippets

Jquery code tips

14.JavaScript (ES6) code snippets

Es6 code blocks, syntax tips

02- Cosmetic plugin recommended

1. Theme plug-ins

  • One Dark Pro

Favorite dark theme

  • Material Theme

There are a lot of themes, all of which are nice and famous theme plugins

  • Tokyo Night

I am using a theme, especially like, not dazzling, the color is very good-looking

  • .

2. File icon

  • Material Icon Theme

Has more file ICONS and the most downloads.

  • vscode-icons

VSCode’s official file icon is also pretty good

Second, VSCode common shortcut keys

VSCode has a lot of built-in shortcuts that can greatly improve our development efficiency. Note: these shortcuts are customizable, so here are some useful default shortcuts.

Here recommend black front pink teacher vscode shortcuts – and to use skills www.bilibili.com/read/cv9699…

Three, VSCode some useful configuration

01- Rainbow parentheses

In the past, we might have used a plug-in called Bracket Pair Colorizer 2 to implement rainbow parentheses, but it would cause performance problems and slow coloring. Vscode built this feature in August 2021 (version 1.60), along with vertical connection and beta testing, and now it’s working really well, it works really well, and all colors are themeable, with up to six colors available.

Open settings.json below, remember to put it in the outermost braces.

This is a better configuration in my opinion. For detailed configuration, please refer to vscode official documents.

 "editor.bracketPairColorization.enabled": true."editor.guides.bracketPairs": "active".Copy the code

02-javaScript parameter name prompt

In August 2021 (version 1.60), vscode added **JavaScript/TypeScript embedded tooltips **- inline tooltips for parameter names and types, etc. This setting will not be automatically turned on, meaning it will need to be manually configured. JavaScript is known to be weakly typed, and these tips make it easy to do some error checking, while also making the code more intuitive and attractive.

Here are some of my configurations. For detailed configuration instructions, please refer to vscode official documentation.

  "javascript.inlayHints.parameterNames.enabled": "all"."javascript.inlayHints.variableTypes.enabled": false.Copy the code

This concludes the article. Creation is not easy, I write blog for the first time, if this article is helpful to you, I hope you can like, give a attention.