1. Common configurations of VsCode
1. Cancel update
- I also canceled the update of the plug-in.
2. Set the encoding to utf-8: it is the default, no need to set it
3. Set commonly used development fonts: Consolas, it is the default, no need to set it
- Fonts are also very important for development. Different fonts have different letter shapes, especially punctuation marks, commas and semicolons. Some fonts look very similar to each other.
4. Set ctr+scroll wheel to change font size
5. Set the line number: it is there by default, no need to set it
6. Automatic saving:
7. Set up multi-line display of tabs
- If you open a lot of files in this way, some of the open files will not be hidden.
8. Set to view the structure of the current class or file OUTLINE
- Equivalent to idea, view the structure of the current class or interface Structure
2. 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. Automatically close HTML/XML tags: Auto Close Tag
4. Automatic image inspection: Image preview
5. 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.
6. 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.
Optional plug-ins installed
Things like color tips and themes, as well as grammar checks, smart grammar tips, etc.
Local history code record: local history
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.
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. Plug-ins recommended for VsCode development projects
1. Plug-ins that must be installed when developing Vue projects
(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)
2. Plug-ins that must be installed when developing Lua projects
(1) Install a plug-in that facilitates reading lua code: lua
If this article is helpful to you, please remember to give Yile a like, thank you!