In this article you will find out
- Automatic formatting of Vue code in WebStorm
None. 20210818 The test is available
Background (some nonsense 🤣)
As a senior “obsessive-compulsive disorder patients,” the code is beautiful or not directly affect my production efficiency, considering that has been using Nuxt project, use the free time, the problem of project code formatting individuals prefer four Spaces indentation, but online to find for a long time did not find the really effective way. Finally, the combination of search and personal practice resulted in this article.
Specific setting process
Step1: establishment of Nuxt project
Nuxt official website
yarn create nuxt-app <project-name>
Copy the code
Step2: modify the configuration
First modify the.EditorConfig file, set index_size to 4, and then restart (do restart! Otherwise, subsequent operations will not take effect.)
Step3: Plug-in and configuration
ESlint and Prettier are installed for this step
ESlint and set
Prettier and setting (WebStorm usually comes with Prettier, just make sure it’s installed)
Step4: Test the effect
Right-click on the file that needs formatting and reformat it using Prettier
The effect before formatting
The result of formatting
Step5: Save and format automatically
Just add the Vue file class to the file type
Step6: What if I want to change the indentation back to 2 Spaces?
If you want to change the indentation back to 2 Spaces, just set index_size to 2 in the.editorConfig file and restart WebStorm. Be sure to reboot after modification! Otherwise it will not take effect
Anything else you want to say
Chinese plug-in
When searching online, I found that the new version of WebStorm already supports Chinese, so I tried to install one. As for whether it is good or not, I will write a feedback after using it for a period of time.
Thanks for sharing
Reference article links
I hope my sharing can help you. Please give me a “like” if it’s convenient. See you next time