问题背景：

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的忠实粉丝，主要就是觉得编辑器好看，哈哈，但是最近公司要开发小程序，下载了微信开发工具，觉得那编辑器界面实在太丑了，果断放弃！

踩坑经历

正当我开发的一路畅通时，一键格式化后，发现样式的rpx前面出现了一个空格，我天儿，怎么回事？？？样式全部乱了！！！

看到样式乱了第一反应肯定是rpx语法无法识别导致，所以百度了一番，主要借鉴了以下两篇文章

• https://blog.csdn.net/qq_42339350/article/details/117361243?utm_source=app&app_version=4.13.0
• https://www.wodecun.com/blog/7945.html

解决方案

网上文章基本上千篇一律，总结一下，主要以下两种方法，选择自己觉得方便的就行！

方案一

windows下载sed（自行百度下载或关注公众号：‘百家券’，发送‘sed’，即可获取）
配置Tools->File Watchers->+

//windows系统配置规则如下
-i s/"\ rpx"/rpx/g $FilePath$

//MacOS系统配置规则如下
-i "" s/"\ rpx"/rpx/g $FilePath$

注意：File type 如果使用了scss请选择scss文件，否则选择css

方案二（推荐）

1、安装插件：

WeChat weapp Support
WeChat mini program support/

2、安装完成以后去setting->Languages & Frameworks->Wechat Mini Program-启用，然后重启webstorm就可以了

外卖红包优惠券在哪里领，那些天天都可以领外卖优惠券的公众号是真的吗？

给大家透露一个消息，美团饿了么每天都会放出一些隐藏的大额红包，对于经常点外卖的你，不领红包直接原价付款，那就太亏了！！！！！！！！！

每天免费领的外卖优惠券，还买什么15块月会员！！！！！！！！

使用微信扫一扫，一起来撸羊毛吧↓↓↓

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

　　通过vue-cli脚手架工具搭建vue项目时，会让我们选择是否配置ESLint（代码检测工具），很多人会选择No，因为一旦有了检测，会降低开发效率（经常报错）。
　　但我在实际工作中会选择配置它。
　　因为一方面可以养成良好的代码习惯，写出来的代码可读性高，
　　另一方面可以使团队协作的项目中代码风格一致，便于维护。

　　在使用脚手架创建项目时，我选择了 ESLint + Prettier。这也是使用比较多的一个组合。

　　而一旦配置了代码检测工具，我们在使用WebStorm的Reformat Code功能时，就会出现下图这样的警告，甚至报错。
 

这是因为WebStorm的默认格式化标准不同造成的，一些玩家选择修改.eslintrc.js文件中的规则（rules）来让检测工具“迎合”IDE，我不太喜欢这样，而且也不能解决一些问题（比如eslint不报错了，但Vue却还是会报错等等）。

　　下面记录下我的最终解决办法。

一、修改代码缩进

　　依次进入WebStorm的
　　File => Settings => Editor => Code Style
　　将缩进设置为2（个空格），其中包括Style Sheets中的各种css语言文件、html文件、JavaScript文件和其它类型文件（根据实际情况），如下图所示。

二、修改标签后换行不缩进

　　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项目》