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
![](https://www.7ix.net/wp-content/uploads/2022/06/58fd101095c03a9bf18321d5d87cffe2-1024x759.jpeg)
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 +
![](https://www.7ix.net/wp-content/uploads/2022/06/3619ea19091a0a0c86295cbcd5466a06-1024x759.jpeg)
selection in the upper right corner Live Template, then Abbrevitionwrite vuein Template text, write the template text content that needs to be configured in
![](https://www.7ix.net/wp-content/uploads/2022/06/4108b4fb0342b45dbfe2b72f03791dd5-1024x859.jpeg)
and finally on the current page, there is a place for ! , click Define
![](https://www.7ix.net/wp-content/uploads/2022/06/3b90d944b6060fa279ae6404c37abe01.jpeg)
and check HTML, click ok to finish
![](https://www.7ix.net/wp-content/uploads/2022/06/c97ea515348d04e71da9d2716aee2af6.jpeg)
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
![](https://www.7ix.net/wp-content/uploads/2022/06/4e05509a414454ca7a8acc867a3e0468-1024x951.jpeg)
Good!
Good!