webstorm出现红色波浪线


取消的办法是用如下操作：

      

        
WebStorm配置代码格式化

配置WebStorm的代码格式化功能，使自动代码格式后符合ESLint+Prettier代码检测规范。

　　通过vue-cli脚手架工具搭建vue项目时，会让我们选择是否配置ESLint（代码检测工具），很多人会选择No，因为一旦有了检测，会降低开发效率（经常报错）。
　　但我在实际工作中会选择配置它。
　　因为一方面可以养成良好的代码习惯，写出来的代码可读性高，
　　另一方面可以使团队协作的项目中代码风格一致，便于维护。
　　在使用脚手架创建项目时，我选择了 ESLint + Prettier。这也是使用比较多的一个组合。
　　而一旦配置了代码检测工具，我们在使用WebStorm的Reformat Code功能时，就会出现下图这样的警告，甚至报错。

![](https://img-blog.csdnimg.cn/20200710172705150.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9uYW4xMjM4Ng==,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://img-blog.csdnimg.cn/20200710172705125.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9uYW4xMjM4Ng==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020071017270536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9uYW4xMjM4Ng==,size_16,color_FFFFFF,t_70)
这是因为WebStorm的默认格式化标准不同造成的，一些玩家选择修改.eslintrc.js文件中的规则（rules）来让检测工具“迎合”IDE，我不太喜欢这样，而且也不能解决一些问题（比如eslint不报错了，但Vue却还是会报错等等）。
　　下面记录下我的最终解决办法。
一、修改代码缩进
　　依次进入WebStorm的
　　File => Settings => Editor => Code Style
　　将缩进设置为2（个空格），其中包括Style Sheets中的各种css语言文件、html文件、JavaScript文件和其它类型文件（根据实际情况），如下图所示。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200710172836638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9uYW4xMjM4Ng==,size_16,color_FFFFFF,t_70)
二、修改标签后换行不缩进
　　ESLint + Prettier 约定了 <script> 标签和 <style> 标签后的首行代码不缩进，我们也要配置一下。
　　进入
　　File => Settings => Editor => Code Style => HTML => Other
　　在 Do not indent children of 一栏中加入script标签和style标签，如下图所示。
三、设置函数名和花括号的空格
　　ESLint + Prettier 约定了：
　　●　函数声明时，函数名后不加括号；
　　●　在函数表达式中function后面括号前不加空格；
　　●　花括号中（插值表达式/解构赋值）首尾要增加空格。
　　我们在
　　File => Settings => Editor => Code Style => JavaScript => Spaces
　　做如下配置（见下图）：

　　现在，就可以愉快地使用WebStorm的 Code => Reformat Code 来自动格式化代码，而不用担心格式完后一堆报错了。
四、相关：vue-cli脚手架工具
　　如果想了解vue-cli脚手架工具搭建vue项目的相关内容，可以阅读我的另外两篇笔记：
　　《Vue CLI 2.x搭建Vue项目》
　　《Vue CLI 3.x搭建Vue项目》

问题背景：
vue开发，使用ESLlint作为代码格式校验
问题描述：
webstorm for windows和for mac os，使用快捷键代码格式化结果不一致，导致有些格式需要自己手动修改的问题。
问题图述：
mac环境-格式化前：
mac环境-格式化后：

windows环境-格式化后

问题就在于，在windows环境下data后面的空格消失了，如何与mac os保持一直？

解决方法：
1.将webstorm升级至2017.3及以上版本
2.在 .eslintrc.js 上右键，菜单底部有一个 "Apply ESLint Code Style Rule" 点它，之后自动格式化就会按照 eslint 的规则了
3.重新使用代码格式化快捷键，查看问题是不是解决了
补充：如果想要快捷修复ESLint校验问题，也可以点击“Fix ESLint Problems”解决
关于进一步的个性化编码配置，请参考"setting" -->"Editor" --> "Code Style" --> "JavaScript"，然后在tab栏，切换到spaces，通过勾选完成你想要的空格配置。
图解：

希望能够帮到大家！

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