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

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

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

1. 插件安装与配置

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

如下图:

语法校验eslint等使用 - 图1

1.1 安装插件

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

1.2 插件配置

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

语法校验eslint等使用 - 图2

2. 语法校验

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

如下图:

语法校验eslint等使用 - 图3

3. 插件规则配置

语言插件名称配置文件配置教程
vueeslint-plugin-vue.eslintrc.jsvue规则配置说明
css/less/sassstylelint.stylelintrc.jscss规则配置说明
htmlhtmllint.htmlhintrchtml规则配置说明
javascripteslint-js.eslintrc.jsjs规则配置说明

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

从HBuilderX 2.1.5 alpha起,也支持项目下安装的eslint的规则配置