一个校验工具可以帮助我们在编写代码时避免一些愚蠢的错误。
一个好的校验工具可以在我们浪费时间找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规则配置说明 |
stylus
和php
,暂时没有语法校验插件,后期会增加。