微信小程序开发者工具配置 ESLint 的方法

作者：科技微讯

日期：2022-11-26

📝 笔记

在微信小程序开发者工具使用 ESLint 的方法：

打开开发者工具 - 设置 - 扩展设置 - 安装 ESLint 插件；
如果你的项目根目录还没有 package.json 文件，那在根目录执行 npm init -y 创建它；
执行 npm init @eslint/config，ESLint 会让你回答几个问题，请根据实际情况回答问题，我的回答可参考下图，ESLint 会根据你的回答生成一个配置文件，并安装相关的 npm 依赖；

上面的命令会安装 ESLint 的最新版本，所以接着你要执行 npm uninstall eslint 删除最新版本，然后 npm i -D eslint@7 安装 ESLint 的 7.x.x 版本；
如果你在回答 ESLint 的问题时选择了 typescript，还需要 npm i -D typescript，这是 @typescript-eslint 的要求；
打开 ESLint 生成的配置文件，添加 globals 配置信息，如果回答问题时你选择了 Typescript，那最后的配置信息应该是这样的：

//.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  //Typescript 项目需要增加 @typescript-eslint 这个插件提供的 @typescript-eslint/recommended 规则
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  overrides: [],
  //ESLint 的默认 parser 是 Espree，Typescript 项目需要改为 @typescript-eslint/parser
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
  globals: {
    wx: true,
    App: true,
    Page: true,
    getCurrentPages: true,
    getApp: true,
    Component: true,
    Behavior: true,
    requirePlugin: true,
    requireMiniProgram: true,
  },
  rules: {},
};

在项目根目录执行 npx eslint .，看看 ESLint 能否正确工作，如果不可以，则可能是配置文件哪里出错了，请根据错误提示排错；
如果完成上述步骤后编辑器没有实时代码提示功能，尝试重启开发者工具；
要验证 ESLint 是否正确配置，只需要在根目录创建一个 test.js 或 test.ts 文件，输入 const a = 1，把鼠标放在 a，如果看到下面这种提示，则说明配置成功。

注意两点：

为什么不能安装最新的 ESLint，必须安装 ESLint 的 7.x.x 版本？因为 7.x.x 才能在微信开发者工具的编辑器中实时显示代码审查错误，最新版本不可以，官方在一个帖子中有解释；
如果你通过开发者工具的模版创建项目，那模版应该自带了一份 ESLint 配置文件，上面的 globals 我就是从模版复制过来的，但额外增加了 Behavior: true，模版没有针对 Typescript 的规则，所以不建议使用模版的配置，建议通过 npm init @eslint/config 根据实际情况生成新的配置；

如果你还使用 prettier 格式化代码，为了避免 ESLint 的规则和 prettier 的规则产生冲突，建议再安装 eslint-config-prettier，它会关闭 ESLint 中那些和 prettier 冲突的规则，即如果有冲突，以 prettier 为准。eslint-config-prettier 除了会关闭有冲突的 ESLint 核心规则外，还会关闭有冲突的 @typescript-eslint/eslint-plugin 等第三方规则。

以下是使用 eslint-config-prettier 后的 ESLint 配置信息，关键是要把 eslint-config-prettier 放在 extends 数组最后的位置，eslint-config- 是 ESLint sharable config 都会使用的前缀，实际使用时需要删除这个前缀，即把 prettier 添加到 extends 配置项中，其他不变。

//.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
  globals: {
    wx: true,
    App: true,
    Page: true,
    getCurrentPages: true,
    getApp: true,
    Component: true,
    Behavior: true,
    requirePlugin: true,
    requireMiniProgram: true,
  },
  rules: {},
};