科技微讯

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

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

eslint-config-init

//.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: {},
};

eslint-error-hint

注意两点:

如果你还使用 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: {},
};

相关阅读:

暂无评论