DCloud_HB_WDL
DCloud_HB_WDL
  • 发布:2019-06-27 13:48
  • 更新:2024-06-20 08:30
  • 阅读:34809

HBuilderX语法校验、eslint实时校验自动修复功能说明

分类:HBuilderX

本帖文档已集成到: hx产品文档

一个校验工具可以帮助我们在编写代码时避免一些愚蠢的错误。

一个好的校验工具可以在我们浪费时间找BUG之前告诉我们存在的问题。

一个好的校验工具可以确保一个项目遵循编码规范。

1. 插件安装与配置

HBuilderX 包含4款语法校验插件,htmlhint, stylelint, eslint-plugin-vue, eslint-js。主要用于校验html,css/less/sass/scss,vue, javascript

如下图:

1.1 安装插件

点击菜单【工具】【插件安装】,在弹出的窗口中,根据需要安装所需插件即可。

1.2 插件配置

安装完插件后,进入菜单【工具】【插件配置】,找到所需插件,进行插件配置。

2. 语法校验

当代码中出现错误时,保存的时候,底部工具栏会出现提示,且代码中出错的地方会出现红色波浪线,按下F4可以跳转到错误的地方。

如下图:

3. 插件规则配置

插件配置文件入口:菜单【工具】【插件配置】

语言/文件 插件名称 配置文件 配置教程
vue eslint-plugin-vue .eslintrc.js vue规则配置说明
css/less/sass stylelint .stylelintrc.js css规则配置说明
html htmllint .htmlhintrc html规则配置说明
javascript eslint-js .eslintrc.js js规则配置说明

stylusphp,暂时没有语法校验插件,后期会增加。

备注: 关于eslint, HBuilderX 2.6.8已支持语法错误自动修复。见本文第四章。

4. eslint自动修复、以及实时校验功能说明

2.6.8+版本起,新增eslint 文件保存自动修复错误、实时语法校验的功能。见https://ask.dcloud.net.cn/article/37070

2.2.0和2.6.8之间的版本,使用eslint一键修复功能。见https://ask.dcloud.net.cn/article/36532

0 关注 分享

要回复文章请先登录注册

白開水

白開水

同时安装了 Prettier 插件是否会存在冲突?如何解决?
2024-06-20 08:30
9***@qq.com

9***@qq.com

在开发中我们想在这行代码上禁用eslint校验怎么做?vscode中会提示 Disabled xxx for this line
2022-04-07 13:44
1***@qq.com

1***@qq.com

回复 1***@163.com :
这个跟个人eslint配置有关
2022-01-26 17:46
1***@163.com

1***@163.com

花括号中的小于号会被识别为标签,[eslint-vue]Parsing error: invalid-first-character-of-tag-name.
2021-05-17 11:54
1***@163.com

1***@163.com

回复 1***@163.com :
<template v-for="(item,index) in statistic">
{{item.terminalName}}
<span
:class="[index==0?'green':index==1||index==2?'orange':'green','yanhei']">{{item.terminalAllCount}}</span>个
{{index < (statistic.length-1)?',':''}}
</template>
2021-05-17 11:53
1***@163.com

1***@163.com

template v-for 会提示缺少key:
2021-05-17 11:53
h***@163.com

h***@163.com

希望可以设置快捷键,快速手动校验。保存校验影响编绎。
2021-04-02 11:36
T***@163.com

T***@163.com

没什么作用
2021-03-22 15:25
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 1***@qq.com :
已回复您的另一个帖子:https://ask.dcloud.net.cn/question/113661
2020-12-20 13:13
1***@qq.com

1***@qq.com

从来没出现过红线,无论有没有错误,vue-eslint 一如既往的提示我校验通过没有问题,我怀疑它在偷懒,只是做个样子,并没有真的校验
2020-12-20 11:43