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

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 关注 分享

要回复文章请先登录注册

下一页丶翻

下一页丶翻

回复 DCloud_HB_WDL :
能不能使用项目的.eslintrc.js验证规则,都无法验证出错误。hbuildex
2020-04-16 11:40
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 zzzzzfreea :
请说明你遇到的问题,以及操作步骤。
HBuilderX 2.6.8+版本起,新增eslint 文件保存自动修复错误的功能。见https://ask.dcloud.net.cn/article/37070
2020-04-10 10:30
zzzzzfreea

zzzzzfreea

配置了eslint根本就不生效,这功能是忽悠人的嘛
2020-04-10 09:50
西洲

西洲

回复 挖坑小能手 :
解决了吗,我也想问
2019-09-11 10:42
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 9***@qq.com :
若你本机没有安装node, 使用hx有自带的npm即可
2019-08-15 11:29
9***@qq.com

9***@qq.com

回复 DCloud_HB_WDL :
win10下shell 输入没用啊
2019-08-14 17:41
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 9***@qq.com :
进入插件目录,找到对应插件。
在空白处,鼠标右键打开右键菜单,点击【在此处打开命令窗口】,输入npm install
2019-08-14 17:35
9***@qq.com

9***@qq.com

提示安装失败。 让我用命令行安装??
怎么解决?
2019-08-14 17:29
挖坑小能手

挖坑小能手

这个markdown格式好像有点不正常...
2019-08-14 16:42
挖坑小能手

挖坑小能手

请问一下,我在`eslint-plugin-vue`中加入了`vue/eqeqeq`规则,但是他只校验`template`中的`==`,`script`标签里面的并不会校验,这是咋回事?
2019-08-14 16:41