1. Commonly used plug-ins for VsCode
1. Plug-in for refreshing web pages in real time: LiveServer
2、open in browser
Supports shortcut keys and the right mouse button to quickly open html files in the browser, and supports customized opening of specified browsers, including: Firefox, Chrome, Opera, IE and Safari
To add: The difference between LiveServer and open in browser: Pay attention to the browser address bar
- open in browser: Open the HTML file directly through the File protocol.
- LiveServer: Opened through the http protocol, the host name will be seen in the address bar. Live Server starts a local development server, and both static and dynamic pages can be reloaded in real time.
3. Automatic saving: No need to install plug-ins, just set it in VsCode
4. Set ctr+scroll wheel to change font size
5. Automatically close HTML/XML tags: Auto Close Tag
6. Automatic image inspection: Image preview
7. Resource tree directory: vscode-icon
Not only can it add comfortable icons to folders and files, but it can also automatically detect projects and match different icons according to different functions of the project.
8. Local history code record: local history
9. Git-related plug-ins: Git History
Git History provides a visual git log. No more need to view git logs in the terminal. Files can be compared across branches, commits, and across commits.
10. AI smart prompt plug-in: Tabnine
Intelligent prompts can be given when writing code using the IDE. The more you write, the more accurate the prompts will be.
Selective installation
Things like color tips and themes, as well as grammar checks, smart grammar tips, etc.
HTML CSS Support
Smart prompt CSS class name and id
HTML Snippets
Smart prompts for HTML tags and their meanings
JavaScript(ES6) code snippets
ES6 syntax smart prompts and quick input not only support .js, but also .ts, .jsx, .tsx, .html, .vue, eliminating the time of configuring it to support various files containing js code
jQuery Code Snippets
jQuery code smart tips
CSS Peek
Using this plugin, you can trace down to where CSS classes and ids are defined in your 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.
1. Commonly used plug-ins for VsCode
1. [vue2] Install a plug-in that facilitates reading vue code: Vetur
- After installation, the vue code and text color began to change [the comments are green hahaha]. Without installation, the code is all white.
Vetur plug-in introduction: functions include - syntax highlighting , smart prompts, emmet, error prompts, formatting, auto-completion, and debugger. vscode officially designated Vue plug-in, a must-have for Vue developers.
- vue3 uses the plug-in Vue Language Features (Volar)