炫意html5
最早CSS3和HTML5移动技术网站之一

HBuilderX 使用eslint实时校验、自动修复代码错误(适用于HBuilderX 2.6.8+)

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

插件下载地址

eslint-js插件下载地址
eslint-vue插件下载地址


1. eslint 文件保存,实时校验、自动修复错误功能说明

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

2. 插件设置

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

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

3. 特别说明

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

4. 普通项目:eslint规则配置

点击菜单【工具】【插件配置】【eslint-js】,编辑.eslintrc.js文件

eslint规则:https://eslint.org/docs/rules/

.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"]
}
}

示例:使用eslint, 删除多余的空格

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

$ 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

安装完成后,在vue-cli项目根目录,创建.eslintrc.js文件

备注:(注意:项目下eslint规则会覆盖HBuilderX编辑器eslint插件中的规则

eslint-plugin-vue配置文件与规则:eslint-plugin-vue官方教程

.eslintrc.js配置文件示例

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

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

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

特别说明:

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

7. vue-cli 项目demo

附件中的zip包,为vue-cli项目demo。因为node_modules太大,所以未包含node_modules。解压zip后,请执行npm install安装node_modules

回答

炫意HTML5 » HBuilderX 使用eslint实时校验、自动修复代码错误(适用于HBuilderX 2.6.8+)

Java基础教程Android基础教程