Essential vscode plug-ins to improve front-end development efficiency (share)

This article will share with you some vscode essential plug-ins that improve the efficiency of front-end development. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

[Recommended learning: "vscode tutorial"]

vscode front-end essential plug-in - improve development Efficiency

##1. Auto Close Tag　

Automatically close HTML/XML tag

2. Auto Rename Tag

Automatically complete the synchronous modification of the tag on the other side

3. Beautify

Format code. It is worth noting that the beautify plug-in supports custom formatting code rules

4. Bracket Pair Colorizer

Add different colors to brackets to distinguish different blocks. Users can define different bracket types and colors

##5. Debugger for Chrome

Map breakpoints on vscode to chrome for easy debugging

6. Courier New

A good-looking font

##7. GitLens

Convenient to view git logs, a must for heavy git users

8, HTML CSS Support

Intelligent prompt CSS class name and id

##9, HTML Snippets

Intelligent prompt HTML tags, and tag meaning

##10, JavaScript (ES6) code snippets

ES6 syntax smart prompts and quick input not only support .js, but also .ts, .jsx, .tsx, .html, .vue, eliminating the need to configure it to support various Time containing js code files

11. jQuery Code Snippets

jQuery code smart tips

12. Markdown Preview Enhanced

Real-time preview of markdown, a must for markdown users

13. markdownlint

Markdown syntax error correction

##14. Material Icon Theme

Personally think that the best vscode icon theme supports the replacement of icons of different colors. It is worth pointing out that this plug-in is updated extremely frequently, basically consistent with the update frequency of vscode

15. open in browser

Unlike IDE, vscode can open HTML directly in the browser, but this plug-in supports shortcut keys and right mouse button. Open html files in the browser, support customized opening of specified browsers, including: Firefox, Chrome, Opera, IE and Safari

16. Path Intellisense

Automatically prompts file paths and supports various quick import files

##17、React/Redux/react-router Snippets

React/Redux/react-router syntax smart tips

18, Vetur

Vue multi-functional integrated plug-in, including: syntax highlighting, smart prompts, emmet, error prompts, formatting, automatic completion Full, debugger. vscode officially designated Vue plug-in, a must-have for Vue developers.

##19. vscode-icon

Let the vscode resource tree directory add

20、HTMLHint

　html code detection

21、 Project Manager

A tool for quickly switching between multiple projects

22, fileheader

Top comment template, you can define the author and time and other information, and will automatically update the last modification time. The shortcut key ctrl alt i automatically enters the author information and modification information at the beginning of the file

23, filesize

The current file size is displayed in the status bar at the bottom. After clicking, you can also see the detailed creation and modification time

24, quokka

A debugging tool plug-in that provides real-time feedback based on the code you are writing. It is easy to configure and provides the ability to preview functions and calculated value results of variables. In addition, it can be used out of the box in projects using JSX or TypeScript

25, CSS Peek

Use this plugin , you can trace back to where the CSS classes and ids are defined in the stylesheet. When you right-click the selector in the HTML file and select the "Go to Definition and Peek definition" option, it will send you the CSS code for the styling.

26. HTML Boilerplate

By using the HTML template plug-in, you get rid of the need to rewrite headers and headers for new HTML files. The trouble with body tags. You just type html into an empty file and press the Tab key to generate a clean document structure.

27. Prettier

Prettier is currently the most popular code formatter in web development. Once this plugin is installed, it can automatically apply Prettier and quickly format the entire JS and CSS document into a unified code style. If you still want to use ESLint, there is also a Prettier – Eslint plug-in, you don’t want to miss it!

28. Color Info

Provides you with information about using colors in CSS. You can preview the color model (HEX, RGB, HSL and CMYK) information in the color block by simply hovering the cursor over the color.

29. Icon Fonts

This is a plug-in that can add icon fonts to the project. The plugin supports over 20 popular icon sets, including Font Awesome, Ionicons, Glyphicons and Material Design Icons

##30, Minify

　This is an application for compressing and merging JavaScript and CSS files. It offers a large number of customizable settings, as well as the option to automatically compress and save and export to .min files. It works with JavaScript, CSS and HTML via uglify-js, clean-css and html-minifier respectively. Use F1 to run the file minifier Minify

31、VueHelper

snippet code snippet

32、 Vue 2 Snippets

33, Vue VSCode Snippets

VUE code automatic completion plug-in

34, Git History

　Git submission history

35、Setting Sync

Synchronize your settings and plug-ins

36、Reactjs code snippets

　A React automatic patching tool.

37. Terminal

The built-in command line plug-in of vs code is also more practical.
38, npm Intellisense

Used to automatically fill in npm modules in the import statement.

39, npm

This extension supports running npm scripts defined in files, package.json and based on Defined dependencies verify installed module package.json.

40. Window Colors

Each VSCode window can be uniquely and automatically colored.

41. Live server plug-in

Open the local server

##42. Comment Translate
## Translation plug-in, select the text to translate

43. Tiny Light

Beige eye protection theme, similar to Hbuild

##For more programming-related knowledge, please visit: Introduction to Programming

! !

The above is the detailed content of Essential vscode plug-ins to improve front-end development efficiency (share). For more information, please follow other related articles on the PHP Chinese website!