更新记录

1.0.6(2020-07-22)

优化 修改插件配置规范, 支持插件配置文件独立

1.0.4(2020-06-13)

新增 eslint-js插件

查看更多

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后,卸载时需手动卸载,详细教程参考:如何手动卸载插件


1. eslint-js简介

用于校验js和html中的js代码

1.1. eslint-js插件配置文件

eslint-js的配置文件为.eslintrc.js。 点击菜单工具 -> 插件配置 -> eslint-js -> .eslintrc.js,即可打开.eslintrc.js文件。

选项对应说明如下:

  module.exports = {
      "plugins": [],          //插件
      "env": {
          "browser": true,
          "node": true
      },
      "parser": "esprima",    //指定解析器
      "parserOptions": {},    
      "rules": {}             //规则
  };

更多配置说明可以参考options

1.2 如何增加规则?

官方规则列表https://cn.eslint.org/docs/rules/

规则设置:

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
  • "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)

规则示例

"rules": {
  "camelcase": 2,           //强制驼峰法命名,
  "indent": [2, 4],         //缩进风格
  "id-match": 0,            //命名检测
  "init-declarations": 1,   //声明时必须赋初值
  "no-undef": 1,            //不能有未定义的变量
}

1.3 eslint-js错误校验提示

如下图所示,当检查到错误时,会出现红色波浪线

2. 关于实时校验、自动修复错误功能说明

HBuilderX 2.6.8+版本起,新增eslint 实时校验、自动修复错误的功能。注意:此文不适用于2.6.8之前的版本

2.1. 实时校验、自动修复功能简介

  1. 使用此功能,必须安装eslint-jseslint-vue插件。
  2. vue-cli项目,需要安装eslint库,并配置eslint规则.
  3. 若满足上述条件,当编写完代码,保存时,若代码中存在错误,自动修复;

2.2 插件设置

2.6.11版本,支持自定义配置:保存时自动修复启用实时校验;见下图

特别说明: 实时校验功能,默认未开启,需要手动开启此功能

2.3. 特别说明

  • eslint自动修复功能,并不能修复所有的语法错误。
  • 比如定义了某个变量,但未使用,eslint校验保存,自动修复功能并不能修复此类错误。

2.4 .eslintrc.js配置文件完整示例

module.exports = {
    "plugins": [
        "html"
    ],
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        },
        "allowImportExportEverywhere": false
    },
    rules: {
        "no-alert": 0,
        "semi": [2, "always"],
        "no-multi-spaces": "error",
       "quotes": ["error", "single"]
    }
}

2.5 普通项目示例:使用eslint, 删除多余的空格

2.6. uni-app项目为例:配置eslint规则,校验vue文件

特别说明:

  • vue文件,校验vue语法,需要安装eslint-vue插件,插件地址
  • vue文件, 校验规则,需要从eslint-vue插件中配置。
  • 菜单【工具】【插件配置】【eslint-vue】【.eslintrc.js】,编辑.eslintrc.js文件

2.7. vue-cli项目:eslint安装、配置

vue-cli项目,如果使用项目下的配置规则,需要安装相关库、并在项目根目录创建.eslintrc.js文件

备注:

  1. 注意:项目下eslint规则会覆盖HBuilderX编辑器eslint插件中的规则
  2. 校验vue语法,需要安装eslint-vue插件,插件地址
$ npm install --save eslint eslint-plugin-vue eslint-plugin-html eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

.eslintrc.js配置文件示例

module.exports = {
    extends: [
        'plugin:vue/recommended'
    ],
    rules: {
        "no-alert": 0,
        "no-multi-spaces": "error", // 禁止多个空格 
        "semi": [2, "always"] ,// 自动补充分号
       "quotes": ["error", "single"] // 使用单引号
    }
}

示例:使用eslint, 自动补充分号

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问