代码检查（Linter） | Quasar Framework

Quasar CLI with Webpack - @quasar/app-webpack

代码检查（Linter）

强烈推荐您使用代码检查工具（例如 ESLint v9+）来保证代码的可读性。它也可以帮助您在运行代码之前捕获一些潜在的错误。

当您使用 Quasar CLI 创建项目时，它会询问您是否要添加 ESLint（以及是否使用 prettier 作为代码格式化工具）。

JavaScript 项目

所需依赖

Yarn

NPM

PNPM

Bun

$ yarn add --dev @eslint/js eslint@9 eslint-plugin-vue vue-eslint-parser globals eslint-webpack-plugin

如果您还想使用 prettier 作为代码格式化工具，还需要安装以下依赖：

Yarn

NPM

PNPM

Bun

$ yarn add --dev prettier@3 @vue/eslint-config-prettier

quasar.config 文件配置

return {
  eslint: {
    // fix: true,
    // include: [],
    // exclude: [],
    // cache: false,
    // rawEsbuildEslintOptions: {},
    // rawWebpackEslintPluginOptions: {},
    warnings: true,
    errors: true
  }
}

ESLint 配置

import js from "@eslint/js";
import globals from "globals";
import pluginVue from "eslint-plugin-vue";
import pluginQuasar from "@quasar/app-webpack/eslint";

// 以下是可选的，如果您还想使用 prettier：
import prettierSkipFormatting from "@vue/eslint-config-prettier/skip-formatting";

export default [
  {
    /**
     * 忽略以下文件。
     * 请注意，pluginQuasar.configs.recommended() 已经自动为您忽略了
     * "node_modules" 目录（以及其他所有 Quasar 项目相关的目录和文件）。
     *
     * ESLint 要求 "ignores" 必须是该对象中唯一的键
     */
    // ignores: []
  },

  ...pluginQuasar.configs.recommended(),
  js.configs.recommended,

  /**
   * https://eslint.vuejs.org
   *
   * pluginVue.configs.base
   *   -> 启用正确 ESLint 解析所需的设置和规则。
   * pluginVue.configs[ 'flat/essential']
   *   -> 在 base 的基础上，加入防止错误或意外行为的规则。
   * pluginVue.configs["flat/strongly-recommended"]
   *   -> 在上述基础上，加入显著提升代码可读性和开发体验的规则。
   * pluginVue.configs["flat/recommended"]
   *   -> 在上述基础上，加入社区推荐的主观约定以确保代码一致性。
   */
  ...pluginVue.configs["flat/essential"],

  {
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",

      globals: {
        ...globals.browser,
        ...globals.node, // SSR, Electron, config files
        process: "readonly", // process.env.*
        ga: "readonly", // Google Analytics
        cordova: "readonly",
        Capacitor: "readonly",
        chrome: "readonly", // BEX related
        browser: "readonly", // BEX related
      },
    },

    // 在这里添加您的自定义规则
    rules: {
      "prefer-promise-reject-errors": "off",

      // allow debugger during development only
      "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    },
  },

  {
    files: ["src-pwa/custom-service-worker.js"],
    languageOptions: {
      globals: {
        ...globals.serviceworker,
      },
    },
  },

  prettierSkipFormatting, // 可选，如果您想使用 prettier
];

TypeScript 项目

所需依赖

Yarn

NPM

PNPM

Bun

$ yarn add --dev vue-tsc @vue/eslint-config-typescript @eslint/js eslint@9 eslint-plugin-vue globals eslint-webpack-plugin

如果您还想使用 prettier 作为代码格式化工具，还需要安装以下依赖：

Yarn

NPM

PNPM

Bun

$ yarn add --dev prettier@3 @vue/eslint-config-prettier

quasar.config 文件配置

return {
  eslint: {
    // fix: true,
    // include: [],
    // exclude: [],
    // cache: false,
    // rawEsbuildEslintOptions: {},
    // rawWebpackEslintPluginOptions: {},
    warnings: true,
    errors: true
  }
}

ESLint 配置文件

import js from "@eslint/js";
import globals from "globals";
import pluginVue from "eslint-plugin-vue";
import pluginQuasar from "@quasar/app-webpack/eslint";
import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescript";

// 以下是可选的，如果您还想使用 prettier：
import prettierSkipFormatting from "@vue/eslint-config-prettier/skip-formatting";

export default defineConfigWithVueTs(
  {
    /**
     * 忽略以下文件。
     * 请注意，pluginQuasar.configs.recommended() 已经自动为您忽略了
     * "node_modules" 目录（以及其他所有 Quasar 项目相关的目录和文件）。
     *
     * ESLint 要求 "ignores" 必须是该对象中唯一的键
     */
    // ignores: []
  },

  pluginQuasar.configs.recommended(),
  js.configs.recommended,

  /**
   * https://eslint.vuejs.org
   *
   * pluginVue.configs.base
   *   -> 启用正确 ESLint 解析所需的设置和规则。
   * pluginVue.configs[ 'flat/essential']
   *   -> 在 base 的基础上，加入防止错误或意外行为的规则。
   * pluginVue.configs["flat/strongly-recommended"]
   *   -> 在上述基础上，加入显著提升代码可读性和开发体验的规则。
   * pluginVue.configs["flat/recommended"]
   *   -> 在上述基础上，加入社区推荐的主观约定以确保代码一致性。
   */
  pluginVue.configs["flat/essential"],

  {
    files: ["**/*.ts", "**/*.vue"],
    rules: {
      "@typescript-eslint/consistent-type-imports": ["error", { prefer: "type-imports" }],
    },
  },
  // https://github.com/vuejs/eslint-config-typescript
  vueTsConfigs.recommendedTypeChecked,

  {
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",

      globals: {
        ...globals.browser,
        ...globals.node, // SSR, Electron, config files
        process: "readonly", // process.env.*
        ga: "readonly", // Google Analytics
        cordova: "readonly",
        Capacitor: "readonly",
        chrome: "readonly", // BEX related
        browser: "readonly", // BEX related
      },
    },

    // 在这里添加您的自定义规则
    rules: {
      "prefer-promise-reject-errors": "off",

      // allow debugger during development only
      "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    },
  },

  {
    files: ["src-pwa/custom-service-worker.ts"],
    languageOptions: {
      globals: {
        ...globals.serviceworker,
      },
    },
  },

  prettierSkipFormatting, // 可选，如果您想使用 prettier
);

性能优化与忽略文件

WARNING

请务必忽略不需要检查的文件以提升性能。如果对未使用的文件/目录也进行 lint 检查，开发体验会明显下降。

您可以通过编辑 /eslint.config.js 文件来忽略特定文件：

export default [
  {
    /**
     * 忽略以下文件。
     * 请注意，pluginQuasar.configs.recommended() 已经自动为您忽略了
     * "node_modules" 目录（以及其他所有 Quasar 项目相关的目录和文件）。
     *
     * ESLint 要求 "ignores" 必须是该对象中唯一的键
     */
    ignores: [] // <<<---- 在这里添加！
  },

需要注意的是，前面章节中提到的 pluginQuasar.configs.recommended() 会自动将以下路径加入 ESLint 的 ignores 配置（您无需再手动添加）：

// 自动添加到 "ignores" 的部分路径（非完整列表）
["dist/*", "src-capacitor/*", "src-cordova/*", ".quasar/*", "quasar.config.*.temporary.compiled*"];

代码检查规则

代码检查规则可以删除、修改或添加。请注意以下几点：

部分规则是 ESLint 的标准规则。例如：‘brace-style’。
部分规则来自 eslint-plugin-vue。例如：‘vue/max-attributes-per-line’。

您可以参考 https://eslint.org/docs/rules/ 或 https://eslint.vuejs.org/rules 来添加、删除或修改规则。

发现错误？在浏览器中编辑此页

1. Introduction

2. JavaScript 项目

2.1. 所需依赖

2.2. quasar.config 文件配置

2.3. ESLint 配置

3. TypeScript 项目

3.1. 所需依赖

3.2. quasar.config 文件配置

3.3. ESLint 配置文件

4. 性能优化与忽略文件

5. 代码检查规则