WebStorm VUE代码格式化后ESLINT报错缩进问题,重新配置代码格式化的方法

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;
}