How to solve the problem of no code prompt in Vue3

First of all, we have made it clear that after installing the volar plug-in, the HTML tag fragment completion has become invalid. That is, when writing HTML tags in the template, there will no longer be code completion. That is, input "div", which is " div" instead of "

". In order to solve this problem, we need to make some configurations to Vscode without deleting the volar plug-in.

Open settings and enter the following interface:

Select text editor-> Text- > , click the first one on the right, add an item, enter the item: "*.vue", enter the value: "html", click save and return to the vue file. If you enter any HTML tag, you will find that the code can be automatically completed. , and is autistic and.

But there are also some problems at this time. I don’t know if you have been exposed to them. If not, you can skip them.

First: The customized code snippet is invalid. When we usually create a new Vue3 component, we need to initialize the template

  <template>
 
</template>
 
<script setup lang=&#39;ts&#39;>
import {ref,reactive} from &#39;vue&#39;
 
</script>
 
<style lang=&#39;less&#39; scoped> 
 
</style>

Although the code is very simple, it is required every time a new component is created. Writing is quite cumbersome, so we will create some new custom code snippets. In the user code snippet, click vue.json to create your own code snippet

How to I won’t go into details about creating your own code snippets here. There are many related tutorials and they are very simple.

After the code snippet is created, you only need to enter keywords to create the entire snippet, which is very convenient.

But after the above configuration, my code snippet failed. A solution at this time is to create a new global code snippet of my own.

Click "New Global Code Snippet File" and enter the name of the file. Then you can customize the code snippet. The method is the same as defined in the existing .json file. Code snippets work the same way.

After the configuration is completed, create a new .vue file, enter the custom code prompt word, for example, mine is vue3, press Enter, and the code snippet will be generated.

The second problem is that after the top configuration, the icons of the .vue file become HTML. Don’t panic if this happens to the file icon. If you don’t mind, you can actually leave it alone. However, in order to distinguish it, it is recommended to download a new icon plug-in

Because I installed the scode-icon plug-in before, the icon will change after the configuration is completed. At this time, we can reinstall one. For example, I installed vue Theme

The above is the detailed content of How to solve the problem of no code prompt in Vue3. For more information, please follow other related articles on the PHP Chinese website!