Vue (3) webstorm code format specification settings and vue template configuration

Compiler code format specification settings
Usually, when we write code, the code indentation is 4 spaces, but in the front end, according to global voting statistics, it is recommended to use 2 spaces for code indentation.

First, we open the settings in webstorm. If you are using a mac student, you can use the command + ,shortcut directly, go to Editor–> Code Style–> HTML, change the value of sum to 2, and change it to 2 in the same Tab sizeway .IndentJavaScript

vue template configuration
When we use the htmlexercise vue, if we don’t want to create an instance object every time vue, then we can htmlconfigure a template in it, and then use the vuetag directly to import the code directly.

We open the settings in webstorm, go to Editor–> Live Templates, select vue, click the +

selection in the upper right corner Live Template, then Abbrevitionwrite vuein Template text, write the template text content that needs to be configured in

and finally on the current page, there is a place for ! , click Define

and check HTML, click ok to finish

The final effect achieved, we HTMLdirectly enter vueit in , and then press tab, we will immediately appear the template code that has just been configured


Leave a Reply