WebStorm NuxtJS 代码自动格式化实践 20210818

通过本文你会了解到

• WebStorm 中 Vue 代码自动格式化设置

20210818 亲测可用

背景（一些废话?）

作为一个资深的“强迫症”患者，代码的美观与否直接影响到我的生产效率，考虑到一直在用Nuxt项目，正好利用下空余时间把项目的代码格式化问题搞定，个人比较喜欢4个空格的缩进，但在网上找了好久都没有找到真正有效的方法。最终结合搜索和个人实践，才有了本文。

具体设置过程

Step1：Nuxt项目建立

Nuxt官方网站

yarn create nuxt-app <project-name>
复制代码

Step2：修改配置

首先修改 .editorconfig 文件，将 index_size 设置为 4，然后重启（一定要重启！否则后续操作将不生效）

Step3：插件及配置

该步骤需要安装 ESlint 和 Prettier

ESlint及设置

Prettier及设置(新版WebStorm一般会自带Prettier，确认下安装了就行)

Step4：测试效果

在需要格式化的文件点击右键 使用Prettier重新格式化就可以了~

格式化前的效果

格式化后的效果

Step5：保存后自动格式化

只需要在文件类型中添加 vue 文件类即可

Step6：如果我想改回2个空格的缩进怎么办？

如果你想改回2个空格的缩进，只需要将 .editorconfig 文件，将 index_size 设置为 2 然后重启WebStorm就可以了。修改完成之后一定要重启！否则不生效

其他想说的

中文插件

在网上搜索的时候发现新版的WebStorm已经支持中文了，所以就尝试安装了一个。至于到底好不好，我会在使用一段时间之后在写个反馈的，

参考文章如下：感谢这位小伙伴的分享

参考文章链接

希望我的分享能帮助到你，方便的话可以帮我点个赞，下次见~