WebStorm配置代码格式化
WebStorm VUE代码格式化后报错缩进问题,重新配置代码格式化的方法,配置WebStorm的代码格式化功能，使自动代码格式后符合ESLint+Prettier代码检测规范。
通过vue-cli脚手架工具搭建vue项目时，会让我们选择是否配置ESLint（代码检测工具），很多人会选择No，因为一旦有了检测，会降低开发效率（经常报错）。
但我在实际工作中会选择配置它。
因为一方面可以养成良好的代码习惯，写出来的代码可读性高，
另一方面可以使团队协作的项目中代码风格一致，便于维护。
在使用脚手架创建项目时，我选择了 ESLint + Prettier。这也是使用比较多的一个组合。
而一旦配置了代码检测工具，我们在使用WebStorm的Reformat Code功能时，就会出现下图这样的警告，甚至报错。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6W4l4Qbl-1583136253015)(/medias/blogimages/webstorm_reformat_code_warning.png)]
这是因为WebStorm的默认格式化标准不同造成的，一些玩家选择修改.eslintrc.js文件中的规则（rules）来让检测工具“迎合”IDE，我不太喜欢这样，而且也不能解决一些问题（比如eslint不报错了，但Vue却还是会报错等等）。
下面记录下我的最终解决办法。
一、修改代码缩进
依次进入WebStorm的
File => Settings => Editor => Code Style
将缩进设置为2（个空格），其中包括Style Sheets中的各种css语言文件、html文件、JavaScript文件和其它类型文件（根据实际情况），如下图所示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ocZnLUX0-1583136253019)(/medias/blogimages/webstorm_reformat_code_indent.png)]
二、修改标签后换行不缩进
ESLint + Prettier 约定了 <script> 标签和 <style> 标签后的首行代码不缩进，我们也要配置一下。
进入
File => Settings => Editor => Code Style => HTML => Other
在 Do not indent children of 一栏中加入script标签和style标签，如下图所示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0hPCpCas-1583136253020)(/medias/blogimages/webstorm_reformat_tag_indent.png)]
三、设置函数名和花括号的空格
ESLint + Prettier 约定了：
● 函数声明时，函数名后不加括号；
● 在函数表达式中function后面括号前不加空格；
● 花括号中（插值表达式/解构赋值）首尾要增加空格。
我们在
File => Settings => Editor => Code Style => JavaScript => Spaces
做如下配置（见下图）：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zDBLAUX-1583136253021)(/medias/blogimages/webstorm_reformat_code_spaces.png.png)]
现在，就可以愉快地使用WebStorm的 Code => Reformat Code 来自动格式化代码，而不用担心格式完后一堆报错了。
四、相关：vue-cli脚手架工具
如果想了解vue-cli脚手架工具搭建vue项目的相关内容，可以阅读我的另外两篇笔记：
《Vue CLI 2.x搭建Vue项目》《Vue CLI 3.x搭建Vue项目》
.series a {
text-decoration:none !important;
}
