WebStorm配置代码格式化

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

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

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

  而一旦配置了代码检测工具,我们在使用WebStorm的Reformat Code功能时,就会出现下图这样的警告,甚至报错。
webstorm_reformat_code_warning.png.png
  这是因为WebStorm的默认格式化标准不同造成的,一些玩家选择修改.eslintrc.js文件中的规则(rules)来让检测工具“迎合”IDE,我不太喜欢这样,而且也不能解决一些问题(比如eslint不报错了,但Vue却还是会报错等等)。

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

一、修改代码缩进

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

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

  ESLint + Prettier 约定了 <script> 标签和 <style> 标签后的首行代码不缩进,我们也要配置一下。
  进入
  File => Settings => Editor => Code Style => HTML => Other
  在 Do not indent children of 一栏中加入script标签和style标签,如下图所示。
webstorm_reformat_tag_indent.png

三、设置函数名和花括号的空格

  ESLint + Prettier 约定了:
  • 函数声明时,函数名后不加括号;
  • 在函数表达式中function后面括号前不加空格;
  • 花括号中(插值表达式/解构赋值)首尾要增加空格。
  我们在
  File => Settings => Editor => Code Style => JavaScript => Spaces
  做如下配置(见下图):
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项目》


  目录