程序生涯：你必须知道的操作：WebStorm配置代码格式化

WebStorm配置代码格式化

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