程序生涯:你必须知道的操作: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 约定了

你可能感兴趣的:(插件安装,前端,Vue,webstorm)