WebStorm VUE代码格式化后ESLINT报错缩进问题,重新配置代码格式化的方法

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;
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值