更新记录

1.4.6（2023-10-18）

1. 修复 bug

1.4.5（2023-10-18）

1. 修复 bug
2. 支持 nvue

1.4.4（2023-10-01）

1.更新依赖

平台兼容性

HBuilderX插件通用注意事项

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

mxp-eslint-js

简介

用于校验 ts,js 和 html,vue 中的 ts,js 代码

说明

1. 本插件启用规则相当严格几乎启用了与 prettierr 无冲突的所有规则，建议新项目启用，老项目还是根据提示关闭某些规则吧!
2. HBuilderX 2.6.8+起，支持 eslint 实时校验、自动修复。具体教程见：https://ask.dcloud.net.cn/article/37070

使用说明

格式化所有文件

{
  "name": "mxp",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "install": "npm install",
    "prettier": "prettier --write ./**/*.{js,json,vue,ts,jsx,cjs,mjs,tsx,cts,mts,wxss,wxml,wxs}", // 使用prettier格式化所有文件
    "eslint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix", // 使用eslint格式化所有文件
    "stylelint": "stylelint **/*.{css,scss,vue} --fix" // 使用stylelint格式化所有文件
  },
  "devDependencies": {
    "eslint-plugin-html": "^7.1.0", // 用于eslint格式化vue （如不需要可以不安装）
    "eslint": "^8.34.0", // 用于eslint格式化vue （如不需要可以不安装）
    "eslint-plugin-jsdoc": "^40.0.0", // 用于eslint格式化jsdoc注释的 （如不需要可以不安装）
    "eslint-plugin-vue": "^9.9.0", // 用于eslint格式化vue （如不需要可以不安装）
    "postcss": "^8.4.21", // 用于stylelint格式化scss或者less建议安装 （如不需要可以不安装）
    "postcss-html": "^1.5.0", // 用于stylelint格式化html或者vue文件中的样式 （如不需要可以不安装）
    "prettier": "^2.8.4", // prettier 代码格式
    "sass": "^1.58.0", //  用于stylelint格式化(防止出错建议需要stylelint的也安装上)  （如不需要可以不安装）
    "stylelint": "15.1.0", //用于stylelint格式化 （如不需要可以不安装）
    "stylelint-config-html": "^1.1.0", // 用于stylelint格式化html或者vue文件中的样式（如不需要可以不安装）
    "stylelint-config-standard-scss": "^7.0.0", // stylelint的scss格式化规则 （如不需要可以不安装）
    "stylelint-order": "^6.0.2" // stylelint的scss属性排序规则 （如不需要可以不安装）
  }
}

1. 在根目录中新建 package.json，并加入上述 json 内容
2. 运行 -> 运行到终端 -> install （安装环境 如已安装请忽略）
3. 运行 -> 运行到终端 -> eslint （开始使用 eslint 格式化所有文件）

【vscode】：vscode 中怎么使用大家应该都知道，所以不做说明。

mxp-eslint-vue 配置文件

本插件使用.eslintrc.js作为eslint的配置文件，如果项目根目录中存在.eslintrc.js文件，以项目中的配置为准，如不存在则使用本插件自带的.eslintrc.js文件。

修改本插件自带配置文件方式如下（建议把自带的配置文件拷贝出来放到项目根目录下方便 vscode 使用，如不使用 vscode 则无需拷贝）：

点击 工具 -> 设置 -> 插件配置 -> mxp-eslint-js -> .eslintrc.js，即可打开.eslintrc.js 文件。

.eslintrc.js配置文件中对应说明如下：

/** 默认缩进(默认缩进两个空格，为false代表关闭相关规则 (当设置为false时max-len规则下的tabwidth默认为4)) */
const indent = 4;
/** 是否为uni-app项目 (uni-app项目特有的全局变量如uni、 wx、getCurrentPages等会报错) */
const isUniApp = true;

/** 得到vue版本 (如：3.2.45) */
const vueVersions = '2.7.14';

/** vue版本转数字（vue2和vue3会使用不同插件解析） */
const vueVersionsNumb = parseFloat(vueVersions.replace(/[^\d.]/g, '') || '3.0');

/** 是否添加TS验证规则 */
const tsVerify = false;

/** 是否添加jsdoc验证规则 */
const jsDocVerify = false;

/** 全局变量数组（isUniApp为true时将添加包含uni-app，微信字节跳动，钉钉，京东，QQ等等平台的全局变量）  */
const globalArr = isUniApp ? ['uni', 'plus', 'wx', 'tt', 'my', 'swan', 'qq', 'qh', 'ks', 'jd', 'dd', 'getApp', 'getCurrentPages'] : [];

/** 全局变量数组转对象 */
const globals = {};
globalArr.forEach((item) => {
  globals[item] = 'readonly'; // 代表只读，不可创建或赋值
});

/** 插件 */
const _extends = [vueVersionsNumb >= 3 ? 'plugin:vue/vue3-essential' : 'plugin:vue/essential', 'eslint:recommended'];
if (tsVerify) {
  // 如果需要验证TS就添加'@vue/eslint-config-typescript'插件
  _extends.push('@vue/eslint-config-typescript');
}

module.exports = {
  root: true,
  extends: _extends,
  plugins: jsDocVerify ? ['jsdoc'] : [],
  parserOptions: {
    ecmaVersion: 'latest', // 启用es2020的语法包含以下版本  2015(同6)、2016(同7)、2017(同8)、2018(同9)、2019(同10)、2020(同11)、2021(同为 12)或 2022(与 13 相同)以使用基于年份的命名。您还可以设置 “latest” 以使用最新支持的版本
    sourceType: 'module',

    ecmaFeatures: {
      jsx: true, // 启用jsx
      impliedStrict: true, // 启用全局严格模式
    },
  },
  env: {
    browser: true,
    es2016: true,
    es2017: true,
    es2018: true,
    es2019: true, // 启用es2019的全局变量
    es2020: true, // 启用es2020的全局变量
    es6: true,
    node: true,
  },
  // 配置全局变量 'readonly' 代表不可覆盖,'writable'代表允许覆盖 ,'off'代表禁止使用
  globals,
  // 针对某文件启用或关闭特定语法
  overrides: [
    { files: ['*.vue'], rules: { indent: 'off' } }, // 在vue文中中关闭 indent规则,防止与 vue/script-indent 规则冲突
    { files: ['*.d.ts'], rules: { 'init-declarations': 'off' } },
    {
      files: ['**/**/auto-imports.d.ts', '**/**/components.d.ts'],
      rules: { semi: 'off' },
    },
  ],
  // 在某些文件或文件夹中禁用检查
  ignorePatterns: ['dist/*', 'node_modules/*', '*/node_modules/*', 'unpackage/*', '*/unpackage/*', 'uni_modules/*', '*/uni_modules/*'],
  rules: {
    ...getBaseRules(),
    ...getVueRules(),
    ...(jsDocVerify ? getJsDocRules() : {}), // 是否添加 TS 的相关规则
    ...(tsVerify ? getTypescriptRules() : {}), // 是否添加 TS 的相关规则
  },
};

更多配置说明可以参考options

使用 mxp 格式化全家桶

使用 mxp 格式化全家桶：mxp-stylelint、mxp-prettier、mxp-eslint-vue、mxp-eslint-js 可无缝切换至 vscode 开发，适合即用 vscode 又用 HBuilder 的用户。（只需要在 vscode 中 npm 安装对应插件并拷贝对应规则即可（mxp-eslint-vue 和 mxp-eslint-js 是的插件和规则是一样的直接使用 mxp-eslint-js 的规则就行了）），这样就不用担心 vscode 和 HBuilder 的格式化规则不一致的问题了

禁止自带的格式化工具 (js-beautify)

HBuilder 默认使用js-beautify格式化代码且不可卸载，当同时存在js-beautify和prettier插件时，prettier格式化.vue,prettier格式化,js-beautify格式化.js(详见：HBuilderX 格式化操作、及格式化插件配置说明),这样会导致 js 和 vue 不是用的同一个格式化工具，所以建议删除自带 js-beautify格式化工具，或者禁止使用js-beautify格式化，具体操作如下：

1. HBuilder X中点击 工具 -> 插件配置 -> jsbeautify -> 打开 jsbeautifyrc.js 进行配置。
2. 在配置文件中屏蔽 parsers 节点中的键值对，如图：

module.exports = {
  options: {
    indent_size: '1',
    indent_char: '\t',
    // 由于篇幅太长下面的省略
  },
  // 【重点】 删除或者屏蔽 parsers 里面的键值对
  // 【重点】 删除或者屏蔽 parsers 里面的键值对
  // 【重点】 删除或者屏蔽 parsers 里面的键值对
  parsers: {
    // '.js': 'js',
    // '.json': 'js',
    // '.njs': 'js',
    // '.sjs': 'js',
    // '.wxs': 'js',
    // '.css': 'css',
    // '.nss': 'css',
    // '.wxss': 'css',
    // 由于篇幅太长下面的省略
  },
};

问题解答

明明下载的时最新版规则还是旧版的

由于用户的配置文件(工具 -> 设置 -> 插件配置 -> 打开对应的配置文件)会覆盖自带的配置文件，所以建议先备份后删除原配置文件以及他的上级目录，然后重新打开 工具 -> 设置 -> 插件配置 -> 对应的配置文件 ，此时会生成一个最新版的配置文件

修改项目根目录的配置文件不生效

理论上项目根目录的配置优先级高于 工具 -> 设置 -> 插件配置 -> 中的配置文件，所以应该是会生效，如有问题请参照：

1. 请检测配置文件是否正确
2. 重启 HBuilder 再试
3. 把配置文件内容复制到 工具 -> 设置 -> 插件配置 -> 中的配置文件里试一下

其他问题

还有问题请在本插件评论区或者提交issues

感谢

本插件是基于DCloud-HBuilderX 团队制作的 eslint-js插件的一个升级版,在此对原作者表示感谢