Visual Studio Code is a lightweight yet powerful source code editor developed by Microsoft. Lightweight is reflected in the relatively fast opening speed of the plug-in; powerful functions are reflected in the ability to install desired plug-ins, thereby enriching vscode functions and improving development efficiency. Let me introduce the plug-ins I used to develop the front-end Vue project:
1. Chinese (Simplified) (Simplified Chinese) Language Pack for Visual Studio Code
This plug-in can Chineseize the English version of vscode, and the text display of the entire vscode is in Chinese
2、vscode-icons vscode
Before this plug-in is installed, the vscode file directory and file icons are not displayed well. After installing this plug-in, the vscode file directory and file icons are displayed completely, and each type of file is marked very clearly.
3、Auto Rename Tag
This plug-in can automatically synchronize the modification of tags, for example: modify <div> to <test>, no need to manually change the following </div> to </test>, the plug-in will automatically monitor the changes of your tags and complete the modification
4、Code Translate
When the mouse is placed on an unknown word in the code, the plug-in does not display the meaning of the word, and there is no need to manually switch translation tools for translation
5、CSS Formatter
This plugin can format css code
6、Vue Language Features (Volar) vue3
This plugin is highly recommended by Youda, it can highlight vue3 code
7、Winter
This plugin highlights vue2 code
8、Dot Log
Quickly output console.log, input msg.clg, it will generate console.log("msg",msg)
9、Easy-less less
This plugin can support less (css preprocessing language)
10、Highlight Maching Tag
This plugin can highlight tags
11、HTML CSS Support css
When entering a selector, this plugin can prompt you for the name of the selector
12、Image preview
This plugin can display the shape of the picture you quoted on the left side of the code
13、Import Cost
This plugin shows the size of your imported dependencies
14、Indenticator
This plugin can display your code indentation level
15、Live Server
This plug-in changes the content of the file you modified in real time, without manually refreshing it in the browser
16、Parameter Hints
This plugin can prompt you to enter the number and type of parameters
17、px to rem
This plugin can automatically convert px units to rem units for you, but you have to configure the html font size in the configuration file yourself
18、Tabnine AI Autocomplete for Javascript
This plug-in can predict the content you input. If the content meets your requirements, press tab to enter the predicted content. If it does not meet your requirements, just continue to enter what you want to enter.
19、Vue VSCode Snippets
When creating a new xxx.vue file, the file is empty. When entering vbase, it can help us generate the file content of vue in an empty file, such as <template> <script> <style>
